fix: auto submit payment form to the iframe

integration-libs/opf/checkout/components/opf-checkout-payment-wrapper/opf-checkout-payment-wrapper.component.html

@@ -46,10 +46,21 @@
         *ngIf="paymentLink?.destination?.form?.length"
         class="cx-payment-link"
       >
+        <iframe
+          *ngIf="paymentLink.renderType === RENDER_PATTERN.IFRAME"
+          class="cx-payment-iframe"
+          name="cx-payment-iframe"
+        ></iframe>
         <form
           [action]="paymentLink.destination?.url"
           [method]="paymentLink.destination?.method"
           [enctype]="paymentLink.destination?.contentType"
+          [target]="
+            paymentLink.renderType === RENDER_PATTERN.FULL_PAGE
+              ? '_self'
+              : this.PAYMENT_IFRAME_NAME
+          "
+          #paymentForm
         >
           <fieldset>
             <input
@@ -60,6 +71,7 @@
             />
           </fieldset>
           <input
+            *ngIf="paymentLink.renderType === RENDER_PATTERN.FULL_PAGE"
             class="btn btn-primary"
             type="submit"
             [value]="'opfCheckout.proceedPayment' | cxTranslate"

integration-libs/opf/checkout/components/opf-checkout-payment-wrapper/opf-checkout-payment-wrapper.component.spec.ts

@@ -1,4 +1,4 @@
-import { ViewContainerRef } from '@angular/core';
+import { ViewContainerRef, ElementRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CurrencyService, LanguageService } from '@spartacus/core';
@@ -344,4 +344,33 @@ describe('OpfCheckoutPaymentWrapperComponent', () => {
       mockGlobalFunctionsService.registerGlobalFunctions
     ).not.toHaveBeenCalled();
   });
+
+  describe('submitFormToIframe', () => {
+    let mockFormElement: jasmine.SpyObj<HTMLFormElement>;
+
+    beforeEach(() => {
+      mockFormElement = jasmine.createSpyObj('HTMLFormElement', ['submit']);
+      component.formElement = {
+        nativeElement: mockFormElement,
+      } as ElementRef<HTMLFormElement>;
+    });
+
+    it('should submit form when payment data is ready and form targets iframe', () => {
+      component['isPaymentDataReady'] = true;
+      mockFormElement.target = 'cx-payment-iframe';
+
+      component['submitFormToIframe']();
+
+      expect(mockFormElement.submit).toHaveBeenCalled();
+    });
+
+    it('should not submit form when form element is not available', () => {
+      component['isPaymentDataReady'] = true;
+      component.formElement = null as any;
+
+      component['submitFormToIframe']();
+
+      expect(mockFormElement.submit).not.toHaveBeenCalled();
+    });
+  });
 });

integration-libs/opf/checkout/components/opf-checkout-payment-wrapper/opf-checkout-payment-wrapper.component.ts

@@ -6,10 +6,13 @@
 
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
+  ElementRef,
   Input,
   OnDestroy,
   OnInit,
+  ViewChild,
   ViewContainerRef,
   inject,
 } from '@angular/core';
@@ -54,8 +57,12 @@ export class OpfCheckoutPaymentWrapperComponent implements OnInit, OnDestroy {
   protected currencyService = inject(CurrencyService);
   protected activeCartService = inject(ActiveCartFacade);
   protected vcr = inject(ViewContainerRef);
+  protected cdr = inject(ChangeDetectorRef);
+  protected isPaymentDataReady = false;
+  protected readonly PAYMENT_IFRAME_NAME = 'cx-payment-iframe';
 
   @Input() selectedPaymentId: number;
+  @ViewChild('paymentForm') formElement!: ElementRef<HTMLFormElement>;
 
   renderPaymentMethodEvent$ = this.service.getRenderPaymentMethodEvent();
 
@@ -88,6 +95,15 @@ export class OpfCheckoutPaymentWrapperComponent implements OnInit, OnDestroy {
     this.service.reloadPaymentMode();
   }
 
+  protected submitFormToIframe(): void {
+    if (this.isPaymentDataReady && this.formElement?.nativeElement) {
+      const form = this.formElement.nativeElement;
+      if (this.formElement.nativeElement?.target === this.PAYMENT_IFRAME_NAME) {
+        form.submit();
+      }
+    }
+  }
+
   protected listenForReinitiatePaymentEvent(): void {
     this.sub.add(
       this.opfPaymentEventsService?.reinitiatePaymentEvent$.subscribe(
@@ -136,6 +152,7 @@ export class OpfCheckoutPaymentWrapperComponent implements OnInit, OnDestroy {
 
   protected initiatePaymentMode(paymentOptionId?: number): void {
     const idToUse = paymentOptionId || this.selectedPaymentId;
+    this.isPaymentDataReady = false;
     this.sub.add(
       this.service.initiatePayment(idToUse).subscribe({
         next: (paymentSessionData) => {
@@ -151,6 +168,13 @@ export class OpfCheckoutPaymentWrapperComponent implements OnInit, OnDestroy {
               OpfGlobalFunctionsDomain.CHECKOUT
             );
           }
+
+          this.isPaymentDataReady = true;
+          this.cdr.detectChanges();
+          this.submitFormToIframe();
+        },
+        error: () => {
+          this.isPaymentDataReady = false;
         },
       })
     );