feat: support multiple payment gateway

integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/apple-pay/apple-pay.component.spec.ts

@@ -7,7 +7,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Cart } from '@spartacus/cart/base/root';
 import { Product } from '@spartacus/core';
-import { OpfActiveConfiguration } from '@spartacus/opf/base/root';
 import { OpfPaymentErrorHandlerService } from '@spartacus/opf/payment/core';
 import { OpfQuickBuyTransactionService } from '@spartacus/opf/quick-buy/core';
 import {
@@ -33,17 +32,6 @@ const mockCart: Cart = {
   code: '123',
 };
 
-const mockActiveConfiguration: OpfActiveConfiguration = {
-  digitalWalletQuickBuy: [
-    {
-      merchantId: 'merchant.com.adyen.upscale.test',
-      provider: OpfQuickBuyProviderType.APPLE_PAY,
-      countryCode: 'US',
-    },
-    { merchantId: 'merchant.test.example' },
-  ],
-};
-
 describe('ApplePayComponent', () => {
   let component: ApplePayComponent;
   let fixture: ComponentFixture<ApplePayComponent>;
@@ -110,50 +98,56 @@ describe('ApplePayComponent', () => {
       provider: OpfQuickBuyProviderType.APPLE_PAY,
       countryCode: mockCountryCode,
       merchantId: 'merchant.com.adyen.upscale.test',
+      enabled: true,
     };
-    component.activeConfiguration = { digitalWalletQuickBuy: [digitalWallet] };
+    component.activeConfiguration = [
+      { digitalWalletQuickBuy: [digitalWallet] } as any,
+    ];
 
     const mockObservable = of(true);
     mockApplePayService.isApplePaySupported.and.returnValue(mockObservable);
 
     fixture.detectChanges();
-    expect(component.isApplePaySupported$).toBe(mockObservable);
+    expect(component.isApplePaySupported$).toEqual(mockObservable);
   });
 
   it('should not initialize isApplePaySupported$ provider is not Apple pay', () => {
     const digitalWallet: OpfQuickBuyDigitalWallet = {
       provider: OpfQuickBuyProviderType.GOOGLE_PAY,
       countryCode: mockCountryCode,
       merchantId: 'merchant.com.adyen.upscale.test',
+      enabled: true,
     };
-    component.activeConfiguration = { digitalWalletQuickBuy: [digitalWallet] };
-
-    const mockObservable = of(true);
-    mockApplePayService.isApplePaySupported.and.returnValue(mockObservable);
+    component.activeConfiguration = [
+      { digitalWalletQuickBuy: [digitalWallet] } as any,
+    ];
 
     fixture.detectChanges();
+    expect(component.isApplePaySupported$).toBeUndefined();
     expect(mockApplePayService.isApplePaySupported).not.toHaveBeenCalled();
   });
 
   it('should start applePayService', () => {
     mockApplePayService.start.and.returnValue(
       of(<ApplePayJS.ApplePayPaymentAuthorizationResult>{ status: 1 })
     );
-    component.activeConfiguration = {
-      digitalWalletQuickBuy: [
-        {
-          provider: OpfQuickBuyProviderType.APPLE_PAY,
-          countryCode: mockCountryCode,
-          merchantId: 'merchant.com.adyen.upscale.test',
-        },
-      ],
+
+    const digitalWallet: OpfQuickBuyDigitalWallet = {
+      provider: OpfQuickBuyProviderType.APPLE_PAY,
+      countryCode: mockCountryCode,
+      merchantId: 'merchant.com.adyen.upscale.test',
+      enabled: true,
     };
-    component.activeConfiguration = mockActiveConfiguration;
+
+    component.activeConfiguration = [
+      {
+        digitalWalletQuickBuy: [digitalWallet],
+      } as any,
+    ];
+
     fixture.detectChanges();
 
     component.initTransaction();
-    expect(
-      mockOpfPaymentErrorHandlerService.handlePaymentError
-    ).not.toHaveBeenCalled();
+    expect(mockApplePayService.start).toHaveBeenCalled();
   });
 });

integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/apple-pay/apple-pay.component.ts

@@ -31,7 +31,7 @@ import { ApplePayService } from './apple-pay.service';
   imports: [NgIf, AsyncPipe],
 })
 export class ApplePayComponent implements OnInit {
-  @Input() activeConfiguration: OpfActiveConfiguration;
+  @Input() activeConfiguration: OpfActiveConfiguration[];
 
   protected applePayService = inject(ApplePayService);
   protected currentProductService = inject(CurrentProductService);
@@ -43,10 +43,12 @@ export class ApplePayComponent implements OnInit {
   applePayDigitalWallet?: OpfQuickBuyDigitalWallet;
 
   ngOnInit(): void {
-    this.applePayDigitalWallet =
-      this.activeConfiguration?.digitalWalletQuickBuy?.find(
+    this.applePayDigitalWallet = this.activeConfiguration
+      ?.flatMap((config) => config.digitalWalletQuickBuy || [])
+      .find(
         (digitalWallet) =>
-          digitalWallet.provider === OpfQuickBuyProviderType.APPLE_PAY
+          digitalWallet.provider === OpfQuickBuyProviderType.APPLE_PAY &&
+          digitalWallet.enabled
       );
     if (
       !this.applePayDigitalWallet?.merchantId ||

integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.spec.ts

@@ -48,7 +48,7 @@ describe('OpfGooglePayComponent', () => {
 
     fixture = TestBed.createComponent(OpfGooglePayComponent);
     component = fixture.componentInstance;
-    component.activeConfiguration = {};
+    component.activeConfiguration = [];
   });
 
   async function detectChanges() {

integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.component.ts

@@ -29,7 +29,7 @@ export class OpfGooglePayComponent implements OnInit {
   protected opfGooglePayService = inject(OpfGooglePayService);
   protected changeDetectionRef = inject(ChangeDetectorRef);
 
-  @Input() activeConfiguration: OpfActiveConfiguration;
+  @Input() activeConfiguration: OpfActiveConfiguration[];
 
   @ViewChild('googlePayButtonContainer') googlePayButtonContainer: ElementRef;
 

integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.spec.ts

@@ -8,7 +8,10 @@ import { ElementRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { Cart } from '@spartacus/cart/base/root';
 import { Address, PriceType } from '@spartacus/core';
-import { OpfResourceLoaderService } from '@spartacus/opf/base/root';
+import {
+  OpfActiveConfiguration,
+  OpfResourceLoaderService,
+} from '@spartacus/opf/base/root';
 import { OpfPaymentFacade } from '@spartacus/opf/payment/root';
 import { OpfQuickBuyTransactionService } from '@spartacus/opf/quick-buy/core';
 import {
@@ -86,7 +89,7 @@ describe('OpfGooglePayService', () => {
     ]);
     mockQuickBuyButtonsService = jasmine.createSpyObj(
       'OpfQuickBuyButtonsService',
-      ['getQuickBuyProviderConfig']
+      ['getQuickBuyProviderConfig', 'getActiveConfigurationForProvider']
     );
 
     mockOpfQuickBuyConfig = {
@@ -145,7 +148,7 @@ describe('OpfGooglePayService', () => {
 
   describe('getClient', () => {
     it('should return the Google Payment client instance', () => {
-      const activeConfiguration = {};
+      const activeConfiguration: OpfActiveConfiguration[] = [];
       service.initClient(activeConfiguration);
 
       const client = service['getClient']();
@@ -225,7 +228,7 @@ describe('OpfGooglePayService', () => {
 
   describe('isReadyToPay', () => {
     it('should return info about readiness to pay from the Google Pay API', async () => {
-      const activeConfiguration = {};
+      const activeConfiguration: OpfActiveConfiguration[] = [];
 
       service.initClient(activeConfiguration);
 
@@ -247,7 +250,7 @@ describe('OpfGooglePayService', () => {
 
   describe('initClient', () => {
     it('should initialize the Google Payment client with configurations', () => {
-      const activeConfiguration = {};
+      const activeConfiguration: any[] = [];
       service.initClient(activeConfiguration);
 
       const client = service['googlePaymentClient'];

integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/google-pay/google-pay.service.ts

@@ -169,8 +169,15 @@ export class OpfGooglePayService {
     ]);
   }
 
-  initClient(activeConfiguration: OpfActiveConfiguration): void {
-    this.setAllowedPaymentMethodsConfig(activeConfiguration);
+  initClient(activeConfigurations: OpfActiveConfiguration[]): void {
+    const googlePayGateway =
+      this.opfQuickBuyButtonsService.getActiveConfigurationForProvider(
+        OpfQuickBuyProviderType.GOOGLE_PAY,
+        activeConfigurations
+      );
+    if (googlePayGateway) {
+      this.setAllowedPaymentMethodsConfig(googlePayGateway);
+    }
     this.updateGooglePaymentClient();
   }
 
@@ -498,9 +505,8 @@ export class OpfGooglePayService {
     const googlePayConfig =
       this.opfQuickBuyButtonsService.getQuickBuyProviderConfig(
         OpfQuickBuyProviderType.GOOGLE_PAY,
-        activeConfiguration
+        [activeConfiguration]
       );
-
     this.googlePaymentRequest.allowedPaymentMethods = [
       {
         parameters: {

integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.component.spec.ts

@@ -11,6 +11,7 @@ import { OpfQuickBuyProviderType } from '../../root/model';
 import { OpfQuickBuyButtonsComponent } from './opf-quick-buy-buttons.component';
 import { OpfQuickBuyButtonsService } from './opf-quick-buy-buttons.service';
 import createSpy = jasmine.createSpy;
+import { OpfActiveConfiguration } from '@spartacus/opf/base/root';
 
 const routerStateSubject = new BehaviorSubject<RouterState>({
   state: {
@@ -33,6 +34,8 @@ describe('OpfQuickBuyButtonsComponent', () => {
     opfQuickBuyButtonsServiceMock = jasmine.createSpyObj('OpfQuickBuyService', [
       'getPaymentGatewayConfiguration',
       'isQuickBuyProviderEnabled',
+      'getQuickBuyProviderConfig',
+      'getActiveConfigurationForProvider',
     ]);
 
     await TestBed.configureTestingModule({
@@ -70,7 +73,7 @@ describe('OpfQuickBuyButtonsComponent', () => {
 
   it('should determine if a payment method is enabled', () => {
     const provider = OpfQuickBuyProviderType.APPLE_PAY;
-    const activeConfiguration = {};
+    const activeConfiguration: OpfActiveConfiguration[] = [];
     opfQuickBuyButtonsServiceMock.isQuickBuyProviderEnabled.and.returnValue(
       true
     );

integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.component.ts

@@ -26,7 +26,7 @@ import { OpfQuickBuyButtonsService } from './opf-quick-buy-buttons.service';
 })
 export class OpfQuickBuyButtonsComponent implements OnInit {
   protected opfQuickBuyButtonsService = inject(OpfQuickBuyButtonsService);
-  protected paymentGatewayConfig$: Observable<OpfActiveConfiguration>;
+  protected paymentGatewayConfig$: Observable<OpfActiveConfiguration[]>;
 
   PAYMENT_METHODS = OpfQuickBuyProviderType;
 
@@ -37,7 +37,7 @@ export class OpfQuickBuyButtonsComponent implements OnInit {
 
   isPaymentMethodEnabled(
     provider: OpfQuickBuyProviderType,
-    activeConfiguration: OpfActiveConfiguration
+    activeConfiguration: OpfActiveConfiguration[]
   ): boolean {
     return this.opfQuickBuyButtonsService.isQuickBuyProviderEnabled(
       provider,

integration-libs/opf/quick-buy/components/opf-quick-buy-buttons/opf-quick-buy-buttons.service.spec.ts

@@ -52,7 +52,7 @@ describe('OpfQuickBuyButtonsService', () => {
   });
 
   describe('getPaymentGatewayConfiguration', () => {
-    it('should return the first PAYMENT_GATEWAY configuration when available', () => {
+    it('should return all PAYMENT_GATEWAY configurations when available', () => {
       const mockConfigurations = [
         { providerType: OpfPaymentProviderType.PAYMENT_METHOD },
         { providerType: OpfPaymentProviderType.PAYMENT_GATEWAY },
@@ -65,7 +65,10 @@ describe('OpfQuickBuyButtonsService', () => {
       );
 
       service.getPaymentGatewayConfiguration().subscribe((result) => {
-        expect(result).toEqual(mockConfigurations[1]);
+        expect(result).toEqual([
+          mockConfigurations[1],
+          mockConfigurations[2],
+        ] as any);
       });
     });
 
@@ -77,7 +80,7 @@ describe('OpfQuickBuyButtonsService', () => {
       );
 
       service.getPaymentGatewayConfiguration().subscribe((result) => {
-        expect(result).toBeUndefined();
+        expect(result).toEqual([]);
       });
     });
 
@@ -90,7 +93,7 @@ describe('OpfQuickBuyButtonsService', () => {
       );
 
       service.getPaymentGatewayConfiguration().subscribe((result) => {
-        expect(result).toBeUndefined();
+        expect(result).toEqual([]);
       });
     });
 
@@ -111,11 +114,13 @@ describe('OpfQuickBuyButtonsService', () => {
     const provider = OpfQuickBuyProviderType.APPLE_PAY;
 
     it('should return true when the provider is enabled', () => {
-      const activeConfiguration = {
-        digitalWalletQuickBuy: [
-          { provider: OpfQuickBuyProviderType.APPLE_PAY, enabled: true },
-        ],
-      };
+      const activeConfiguration = [
+        {
+          digitalWalletQuickBuy: [
+            { provider: OpfQuickBuyProviderType.APPLE_PAY, enabled: true },
+          ],
+        } as any,
+      ];
 
       const result = service.isQuickBuyProviderEnabled(
         provider,
@@ -125,11 +130,13 @@ describe('OpfQuickBuyButtonsService', () => {
     });
 
     it('should return false when the provider is disabled', () => {
-      const activeConfiguration = {
-        digitalWalletQuickBuy: [
-          { provider: OpfQuickBuyProviderType.APPLE_PAY, enabled: false },
-        ],
-      };
+      const activeConfiguration = [
+        {
+          digitalWalletQuickBuy: [
+            { provider: OpfQuickBuyProviderType.APPLE_PAY, enabled: false },
+          ],
+        } as any,
+      ];
 
       const result = service.isQuickBuyProviderEnabled(
         provider,
@@ -139,11 +146,13 @@ describe('OpfQuickBuyButtonsService', () => {
     });
 
     it('should return false when the provider is not found', () => {
-      const activeConfiguration = {
-        digitalWalletQuickBuy: [
-          { provider: 'otherProvider' as any, enabled: true },
-        ],
-      };
+      const activeConfiguration = [
+        {
+          digitalWalletQuickBuy: [
+            { provider: 'otherProvider' as any, enabled: true },
+          ],
+        } as any,
+      ];
 
       const result = service.isQuickBuyProviderEnabled(
         provider,
@@ -167,9 +176,11 @@ describe('OpfQuickBuyButtonsService', () => {
 
     it('should return false when digitalWalletQuickBuy is null or empty', () => {
       const provider = OpfQuickBuyProviderType.APPLE_PAY;
-      const activeConfiguration = {
-        digitalWalletQuickBuy: null as any,
-      };
+      const activeConfiguration = [
+        {
+          digitalWalletQuickBuy: null as any,
+        } as any,
+      ];
 
       const result = service.isQuickBuyProviderEnabled(
         provider,
@@ -189,12 +200,14 @@ describe('OpfQuickBuyButtonsService', () => {
     };
 
     it('should return config for specific provider', () => {
-      const activeConfiguration = {
-        digitalWalletQuickBuy: [
-          { provider: OpfQuickBuyProviderType.APPLE_PAY, enabled: true },
-          config,
-        ],
-      };
+      const activeConfiguration = [
+        {
+          digitalWalletQuickBuy: [
+            { provider: OpfQuickBuyProviderType.APPLE_PAY, enabled: true },
+            config,
+          ],
+        } as any,
+      ];
 
       const result = service.getQuickBuyProviderConfig(
         OpfQuickBuyProviderType.GOOGLE_PAY,