feat(payment): PAYPAL-365 choses paypalcredit method on the checkout

Author: Olga Lashkul

src/checkout-buttons/strategies/paypal-commerce/paypal-commerce-button-strategy.spec.ts

@@ -34,6 +34,7 @@ describe('PaypalCommerceButtonStrategy', () => {
     let paymentMethod: PaymentMethod;
     let render: () => void;
     let orderID: string;
+    let fundingSource: string;
 
     beforeEach(() => {
         store = createCheckoutStore(getCheckoutStoreState());
@@ -63,11 +64,16 @@ describe('PaypalCommerceButtonStrategy', () => {
         };
 
         orderID = 'ORDER_ID';
+        fundingSource = 'paypal';
         eventEmitter = new EventEmitter();
         paypal = getPaypalCommerceMock();
 
         render = jest.spyOn(paypal, 'Buttons')
             .mockImplementation((options: ButtonsOptions) => {
+                eventEmitter.on('onClick', () => {
+                    options.onClick({ fundingSource });
+                });
+
                 eventEmitter.on('createOrder', () => {
                     options.createOrder();
                 });
@@ -134,6 +140,7 @@ describe('PaypalCommerceButtonStrategy', () => {
         await strategy.initialize(options);
 
         expect(paypal.Buttons).toHaveBeenCalledWith({
+            onClick: expect.any(Function),
             createOrder: expect.any(Function),
             onApprove: expect.any(Function),
             style: paypalOptions.style,
@@ -212,6 +219,21 @@ describe('PaypalCommerceButtonStrategy', () => {
             .toHaveBeenCalledWith('paypalcommerce', 'b20deef40f9699e48671bbc3fef6ca44dc80e3c7');
     });
 
+    it('create order with credit (post request to server) when PayPalCommerce payment details are setup payment', async () => {
+        fundingSource = 'credit';
+
+        await strategy.initialize(options);
+
+        eventEmitter.emit('onClick');
+
+        eventEmitter.emit('createOrder');
+
+        await new Promise(resolve => process.nextTick(resolve));
+
+        expect(paypalCommerceRequestSender.setupPayment)
+            .toHaveBeenCalledWith('paypalcommercecredit', 'b20deef40f9699e48671bbc3fef6ca44dc80e3c7');
+    });
+
     it('post payment details to server to set checkout data when PayPalCommerce payment details are tokenized', async () => {
         await strategy.initialize(options);
 
@@ -227,6 +249,25 @@ describe('PaypalCommerceButtonStrategy', () => {
         }));
     });
 
+    it('post payment details with credit to server to set checkout data when PayPalCommerce payment details are tokenized', async () => {
+        fundingSource = 'credit';
+
+        await strategy.initialize(options);
+
+        eventEmitter.emit('onClick');
+
+        eventEmitter.emit('approve');
+
+        await new Promise(resolve => process.nextTick(resolve));
+
+        expect(formPoster.postForm).toHaveBeenCalledWith('/checkout.php', expect.objectContaining({
+            payment_type: 'paypal',
+            action: 'set_external_checkout',
+            provider: CheckoutButtonMethodType.PAYPALCOMMERCE + 'credit',
+            order_id: orderID,
+        }));
+    });
+
     it('throws error in tokenize payment without order id', async () => {
         orderID = '';
         await strategy.initialize(options);
@@ -268,6 +309,7 @@ describe('PaypalCommerceButtonStrategy', () => {
             await strategy.initialize({ ...options, paypalCommerce: { style } });
 
             expect(paypal.Buttons).toHaveBeenCalledWith({
+                onClick: expect.any(Function),
                 createOrder: expect.any(Function),
                 onApprove: expect.any(Function),
                 style: { height: 25 },
@@ -284,6 +326,7 @@ describe('PaypalCommerceButtonStrategy', () => {
             await strategy.initialize({ ...options, paypalCommerce: { style } });
 
             expect(paypal.Buttons).toHaveBeenCalledWith({
+                onClick: expect.any(Function),
                 createOrder: expect.any(Function),
                 onApprove: expect.any(Function),
                 style: { tagline: true, layout: 'horizontal', height: 55 },
@@ -296,6 +339,7 @@ describe('PaypalCommerceButtonStrategy', () => {
             await strategy.initialize({ ...options, paypalCommerce: { style } });
 
             expect(paypal.Buttons).toHaveBeenCalledWith({
+                onClick: expect.any(Function),
                 createOrder: expect.any(Function),
                 onApprove: expect.any(Function),
                 style: {},

src/checkout-buttons/strategies/paypal-commerce/paypal-commerce-button-strategy.ts

@@ -3,11 +3,12 @@ import { FormPoster } from '@bigcommerce/form-poster';
 import { Cart } from '../../../cart';
 import { CheckoutActionCreator, CheckoutStore } from '../../../checkout';
 import { InvalidArgumentError, MissingDataError, MissingDataErrorType } from '../../../common/error/errors';
-import { ApproveDataOptions, ButtonsOptions, DisableFundingType, PaypalButtonStyleOptions, PaypalCommerceInitializationData, PaypalCommerceRequestSender, PaypalCommerceScriptLoader, PaypalCommerceScriptOptions, StyleButtonColor, StyleButtonLabel, StyleButtonLayout, StyleButtonShape  } from '../../../payment/strategies/paypal-commerce';
+import { ApproveDataOptions, ButtonsOptions, ClickDataOptions, DisableFundingType, PaypalButtonStyleOptions, PaypalCommerceInitializationData, PaypalCommerceRequestSender, PaypalCommerceScriptLoader, PaypalCommerceScriptOptions, StyleButtonColor, StyleButtonLabel, StyleButtonLayout, StyleButtonShape  } from '../../../payment/strategies/paypal-commerce';
 import { CheckoutButtonInitializeOptions } from '../../checkout-button-options';
 import CheckoutButtonStrategy from '../checkout-button-strategy';
 
 export default class PaypalCommerceButtonStrategy implements CheckoutButtonStrategy {
+    providerId?: string;
 
     constructor(
         private _store: CheckoutStore,
@@ -20,9 +21,10 @@ export default class PaypalCommerceButtonStrategy implements CheckoutButtonStrat
     async initialize(options: CheckoutButtonInitializeOptions): Promise<void> {
         let state = this._store.getState();
         const {
-            id: paymentId,
+            id: providerId,
             initializationData,
         } = state.paymentMethods.getPaymentMethodOrThrow(options.methodId);
+        this.providerId = providerId;
 
         if (!initializationData.clientId) {
             throw new InvalidArgumentError();
@@ -33,8 +35,9 @@ export default class PaypalCommerceButtonStrategy implements CheckoutButtonStrat
         const paypalOptions = options.paypalCommerce;
 
         const buttonParams: ButtonsOptions = {
-            createOrder: () => this._setupPayment(options.methodId, cart.id),
-            onApprove: data => this._tokenizePayment(paymentId, data),
+            onClick: data => this._handleClickButtonProvider(providerId, data),
+            createOrder: () => this._setupPayment(cart.id),
+            onApprove: data => this._tokenizePayment(data),
         };
 
         if (paypalOptions && paypalOptions.style) {
@@ -48,24 +51,34 @@ export default class PaypalCommerceButtonStrategy implements CheckoutButtonStrat
     }
 
     deinitialize(): Promise<void> {
+        this.providerId = undefined;
+
         return Promise.resolve();
     }
 
-    private async _setupPayment(methodId: string, cartId: string): Promise<string> {
-        const { orderId } = await this._paypalCommerceRequestSender.setupPayment(methodId, cartId);
+    private _handleClickButtonProvider(providerId: string, { fundingSource }: ClickDataOptions): void {
+        this.providerId = fundingSource === 'credit' ? 'paypalcommercecredit' : providerId;
+    }
+
+    private async _setupPayment(cartId: string): Promise<string> {
+        if (!this.providerId) {
+            throw new MissingDataError(MissingDataErrorType.MissingPaymentMethod);
+        }
+
+        const { orderId } = await this._paypalCommerceRequestSender.setupPayment(this.providerId, cartId);
 
         return orderId;
     }
 
-    private _tokenizePayment(paymentId: string, { orderID }: ApproveDataOptions) {
+    private _tokenizePayment({ orderID }: ApproveDataOptions) {
         if (!orderID) {
             throw new MissingDataError(MissingDataErrorType.MissingPayment);
         }
 
         return this._formPoster.postForm('/checkout.php', {
             payment_type: 'paypal',
             action: 'set_external_checkout',
-            provider: paymentId,
+            provider: this.providerId,
             order_id: orderID,
         });
     }

src/payment/strategies/paypal-commerce/paypal-commerce-sdk.ts

@@ -3,6 +3,10 @@ export interface ApproveDataOptions {
     orderID: string;
 }
 
+export interface ClickDataOptions {
+    fundingSource: string;
+}
+
 export interface OrderData {
     orderId: string;
     approveUrl: string;
@@ -62,6 +66,7 @@ export interface ButtonsOptions {
     style?: PaypalButtonStyleOptions;
     createOrder(): Promise<string>;
     onApprove(data: ApproveDataOptions): void;
+    onClick(data: ClickDataOptions): void;
 }
 
 export interface PaypalCommerceSDK {