feat(payment): PAYPAL-5717 Added AppSwitch to PPCP button strategy

Author: andriiVitvitskyi1990

packages/paypal-commerce-integration/src/paypal-commerce-types.ts

@@ -360,6 +360,8 @@ export interface PayPalCommerceButtons {
     render(id: string): void;
     close(): void;
     isEligible(): boolean;
+    hasReturned?(): boolean;
+    resume?(): void;
 }
 
 export interface PayPalCommerceButtonsOptions {
@@ -607,6 +609,7 @@ export interface PayPalCreateOrderRequestBody extends HostedInstrument, VaultedI
     metadataId?: string;
     setupToken?: boolean;
     fastlaneToken?: string;
+    userAgent?: string;
 }
 
 export enum PayPalOrderStatus {

packages/paypal-commerce-integration/src/paypal-commerce/paypal-commerce-button-strategy.spec.ts

@@ -371,6 +371,7 @@ describe('PayPalCommerceButtonStrategy', () => {
             await strategy.initialize(initializationOptions);
 
             expect(paypalSdk.Buttons).toHaveBeenCalledWith({
+                appSwitchWhenAvailable: true,
                 fundingSource: paypalSdk.FUNDING.PAYPAL,
                 style: paypalCommerceOptions.style,
                 createOrder: expect.any(Function),
@@ -382,6 +383,7 @@ describe('PayPalCommerceButtonStrategy', () => {
             await strategy.initialize(buyNowInitializationOptions);
 
             expect(paypalSdk.Buttons).toHaveBeenCalledWith({
+                appSwitchWhenAvailable: true,
                 fundingSource: paypalSdk.FUNDING.PAYPAL,
                 style: paypalCommerceOptions.style,
                 createOrder: expect.any(Function),
@@ -408,6 +410,7 @@ describe('PayPalCommerceButtonStrategy', () => {
             await strategy.initialize(initializationOptions);
 
             expect(paypalSdk.Buttons).toHaveBeenCalledWith({
+                appSwitchWhenAvailable: true,
                 fundingSource: paypalSdk.FUNDING.PAYPAL,
                 style: paypalCommerceOptions.style,
                 createOrder: expect.any(Function),
@@ -492,6 +495,9 @@ describe('PayPalCommerceButtonStrategy', () => {
 
             expect(paypalCommerceIntegrationService.createOrder).toHaveBeenCalledWith(
                 'paypalcommerce',
+                {
+                    userAgent: 'Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/16.7.0',
+                },
             );
         });
     });

packages/paypal-commerce-integration/src/paypal-commerce/paypal-commerce-button-strategy.ts

@@ -21,6 +21,7 @@ import {
 import PayPalCommerceButtonInitializeOptions, {
     WithPayPalCommerceButtonInitializeOptions,
 } from './paypal-commerce-button-initialize-options';
+import { isExperimentEnabled } from '@bigcommerce/checkout-sdk/utility';
 
 export default class PayPalCommerceButtonStrategy implements CheckoutButtonStrategy {
     constructor(
@@ -96,6 +97,7 @@ export default class PayPalCommerceButtonStrategy implements CheckoutButtonStrat
         paypalcommerce: PayPalCommerceButtonInitializeOptions,
     ): void {
         const { buyNowInitializeOptions, style, onComplete, onEligibilityFailure } = paypalcommerce;
+        const userAgent = navigator.userAgent;
 
         const paypalSdk = this.paypalCommerceIntegrationService.getPayPalSdkOrThrow();
         const state = this.paymentIntegrationService.getState();
@@ -104,7 +106,11 @@ export default class PayPalCommerceButtonStrategy implements CheckoutButtonStrat
         const { isHostedCheckoutEnabled } = paymentMethod.initializationData || {};
 
         const defaultCallbacks = {
-            createOrder: () => this.paypalCommerceIntegrationService.createOrder('paypalcommerce'),
+            ...(this.isPaypalCommerceAppSwitchEnabled() && { appSwitchWhenAvailable: true }),
+            createOrder: () => this.paypalCommerceIntegrationService.createOrder(
+                'paypalcommerce',
+                ...(this.isPaypalCommerceAppSwitchEnabled() ? [{ userAgent: userAgent }] : [])
+            ),
             onApprove: ({ orderID }: ApproveCallbackPayload) =>
                 this.paypalCommerceIntegrationService.tokenizePayment(methodId, orderID),
         };
@@ -134,7 +140,14 @@ export default class PayPalCommerceButtonStrategy implements CheckoutButtonStrat
         const paypalButton = paypalSdk.Buttons(buttonRenderOptions);
 
         if (paypalButton.isEligible()) {
-            paypalButton.render(`#${containerId}`);
+            if (
+                paypalButton.hasReturned?.() &&
+                this.isPaypalCommerceAppSwitchEnabled()
+            ) {
+                paypalButton.resume?.();
+            } else {
+                paypalButton.render(`#${containerId}`);
+            }
         } else if (onEligibilityFailure && typeof onEligibilityFailure === 'function') {
             onEligibilityFailure();
         } else {
@@ -250,4 +263,16 @@ export default class PayPalCommerceButtonStrategy implements CheckoutButtonStrat
             throw error;
         }
     }
+
+    /**
+     *
+     * PayPal AppSwitch experiments handling
+     *
+     */
+    private isPaypalCommerceAppSwitchEnabled(): boolean {
+        const state = this.paymentIntegrationService.getState();
+        const features = state.getStoreConfigOrThrow().checkoutSettings.features;
+
+        return isExperimentEnabled(features, 'PAYPAL-5716.app_switch_functionality');
+    }
 }