feat(payment): PAYPAL-4937 Update PaymentRequestSender with new request to proxy server

packages/core/src/common/http-request/responses.mock.ts

@@ -2,7 +2,8 @@ import { Response } from '@bigcommerce/request-sender';
 
 import { ErrorResponseBody } from '@bigcommerce/checkout-sdk/payment-integration-api';
 
-import { PaymentResponse } from '../../payment';
+import { HeadlessPaymentMethodResponse, PaymentResponse } from '../../payment';
+import { HeadlessPaymentMethod } from '../../payment/headless-payment';
 
 export function getResponse<T>(
     body: T,
@@ -38,6 +39,27 @@ export function getPaymentResponse<T>(
     };
 }
 
+export function getHeadlessPaymentResponse(
+    site: HeadlessPaymentMethod,
+    headers = {},
+    status = 200,
+    statusText = 'OK',
+): Response<HeadlessPaymentMethodResponse> {
+    return {
+        body: {
+            data: {
+                site,
+            },
+        },
+        status,
+        statusText,
+        headers: {
+            'content-type': 'application/json',
+            ...headers,
+        },
+    };
+}
+
 export function getErrorResponse(
     body = getErrorResponseBody(),
     headers = {},

packages/core/src/payment/headless-payment-methods.mock.ts

@@ -0,0 +1,19 @@
+import { HeadlessPaymentMethod } from './headless-payment';
+
+export const initializationData = {
+    merchantId: '100000',
+    paymentButtonStyles: {
+        checkoutTopButtonStyles: { color: 'blue', label: 'checkout', height: '36' },
+    },
+};
+
+export const encodedInitializationData = btoa(JSON.stringify(initializationData));
+
+export function getHeadlessPaymentMethod(): HeadlessPaymentMethod {
+    return {
+        paymentWalletWithInitializationData: {
+            clientToken: 'clientToken',
+            initializationData: encodedInitializationData,
+        },
+    };
+}

packages/core/src/payment/headless-payment/headless-payment-method-config.ts

@@ -0,0 +1,9 @@
+import { HeadlessPaymentMethodType } from './headless-payment-method-type';
+
+const HeadlessPaymentMethodConfig: Record<string, HeadlessPaymentMethodType> = {
+    paypalcommerce: HeadlessPaymentMethodType.PAYPALCOMMERCE,
+    paypalcommercecredit: HeadlessPaymentMethodType.PAYPALCOMMERCECREDIT,
+    braintree: HeadlessPaymentMethodType.BRAINTREE,
+};
+
+export default HeadlessPaymentMethodConfig;

packages/core/src/payment/headless-payment/headless-payment-method-response.ts

@@ -0,0 +1,7 @@
+import HeadlessPaymentMethod from './headless-payment-method';
+
+export interface HeadlessPaymentMethodResponse {
+    data: {
+        site: HeadlessPaymentMethod;
+    };
+}

packages/core/src/payment/headless-payment/headless-payment-method-type.ts

@@ -0,0 +1,5 @@
+export enum HeadlessPaymentMethodType {
+    PAYPALCOMMERCE = 'paypalcommerce.paypal',
+    PAYPALCOMMERCECREDIT = 'paypalcommerce.paypalcredit',
+    BRAINTREE = 'braintree.paypal',
+}

packages/core/src/payment/headless-payment/headless-payment-method.ts

@@ -0,0 +1,7 @@
+export default interface HeadlessPaymentMethod {
+    paymentWalletWithInitializationData: {
+        clientToken?: string;
+        // INFO:: initializationData given in base64 format
+        initializationData?: string;
+    };
+}

packages/core/src/payment/headless-payment/headless-payment-request-options.ts

@@ -0,0 +1,5 @@
+import { RequestOptions } from '../../common/http-request';
+
+export default interface HeadlessPaymentRequestOptions extends RequestOptions {
+    body: { entityId: string };
+}

packages/core/src/payment/headless-payment/index.ts

@@ -0,0 +1,6 @@
+export { default as HeadlessPaymentMethod } from './headless-payment-method';
+export { default as HeadlessPaymentMethodConfig } from './headless-payment-method-config';
+export { default as HeadlessPaymentRequestOptions } from './headless-payment-request-options';
+
+export { HeadlessPaymentMethodType } from './headless-payment-method-type';
+export { HeadlessPaymentMethodResponse } from './headless-payment-method-response';

packages/core/src/payment/index.ts

@@ -18,6 +18,12 @@ export { default as isHostedInstrumentLike } from './is-hosted-intrument-like';
 export { default as isNonceLike } from './is-nonce-like';
 export { default as isVaultedInstrument } from './is-vaulted-instrument';
 export { default as PaymentActionCreator } from './payment-action-creator';
+export {
+    HeadlessPaymentMethod,
+    HeadlessPaymentMethodConfig,
+    HeadlessPaymentRequestOptions,
+    HeadlessPaymentMethodResponse,
+} from './headless-payment';
 export {
     default as Payment,
     CreditCardInstrument,

packages/core/src/payment/payment-method-action-creator.spec.ts

@@ -42,6 +42,11 @@ describe('PaymentMethodActionCreator', () => {
             Promise.resolve(paymentMethodsResponse),
         );
 
+        jest.spyOn(
+            paymentMethodRequestSender,
+            'loadPaymentWalletWithInitializationData',
+        ).mockReturnValue(Promise.resolve(paymentMethodResponse));
+
         jest.spyOn(store.getState().cart, 'getCartOrThrow').mockReturnValue(getCheckout().cart);
     });
 
@@ -195,6 +200,121 @@ describe('PaymentMethodActionCreator', () => {
         });
     });
 
+    describe('#loadPaymentWalletWithInitializationData()', () => {
+        it('loads payment wallet method', async () => {
+            const methodId = 'braintree';
+
+            await from(
+                paymentMethodActionCreator.loadPaymentWalletWithInitializationData(methodId)(store),
+            ).toPromise();
+
+            expect(
+                paymentMethodRequestSender.loadPaymentWalletWithInitializationData,
+            ).toHaveBeenCalledWith(methodId, undefined, undefined);
+        });
+
+        it('loads payment wallet method with timeout', async () => {
+            const methodId = 'braintree';
+            const options = {
+                timeout: createTimeout(),
+            };
+
+            await from(
+                paymentMethodActionCreator.loadPaymentWalletWithInitializationData(
+                    methodId,
+                    options,
+                )(store),
+            ).toPromise();
+
+            expect(
+                paymentMethodRequestSender.loadPaymentWalletWithInitializationData,
+            ).toHaveBeenCalledWith(methodId, undefined, options);
+        });
+
+        it('emits actions if able to load payment wallet method', async () => {
+            const methodId = 'braintree';
+            const actions = await from(
+                paymentMethodActionCreator.loadPaymentWalletWithInitializationData(methodId)(store),
+            )
+                .pipe(toArray())
+                .toPromise();
+
+            expect(actions).toEqual([
+                { type: PaymentMethodActionType.LoadPaymentMethodRequested, meta: { methodId } },
+                {
+                    type: PaymentMethodActionType.LoadPaymentMethodSucceeded,
+                    meta: { methodId },
+                    payload: paymentMethodResponse.body,
+                },
+            ]);
+        });
+
+        it('emits actions with cached values if available', async () => {
+            const methodId = 'braintree';
+            const options = { useCache: true };
+            const actions = await merge(
+                from(
+                    paymentMethodActionCreator.loadPaymentWalletWithInitializationData(
+                        methodId,
+                        options,
+                    )(store),
+                ),
+                from(
+                    paymentMethodActionCreator.loadPaymentWalletWithInitializationData(
+                        methodId,
+                        options,
+                    )(store),
+                ),
+            )
+                .pipe(toArray())
+                .toPromise();
+
+            expect(
+                paymentMethodRequestSender.loadPaymentWalletWithInitializationData,
+            ).toHaveBeenCalledTimes(1);
+            expect(actions).toEqual([
+                { type: PaymentMethodActionType.LoadPaymentMethodRequested, meta: { methodId } },
+                { type: PaymentMethodActionType.LoadPaymentMethodRequested, meta: { methodId } },
+                {
+                    type: PaymentMethodActionType.LoadPaymentMethodSucceeded,
+                    meta: { methodId },
+                    payload: paymentMethodResponse.body,
+                },
+                {
+                    type: PaymentMethodActionType.LoadPaymentMethodSucceeded,
+                    meta: { methodId },
+                    payload: paymentMethodResponse.body,
+                },
+            ]);
+        });
+
+        it('emits error actions if unable to load payment wallet method', async () => {
+            jest.spyOn(
+                paymentMethodRequestSender,
+                'loadPaymentWalletWithInitializationData',
+            ).mockReturnValue(Promise.reject(errorResponse));
+
+            const methodId = 'braintree';
+            const errorHandler = jest.fn((action) => of(action));
+            const actions = await from(
+                paymentMethodActionCreator.loadPaymentWalletWithInitializationData(methodId)(store),
+            )
+                .pipe(catchError(errorHandler), toArray())
+                .toPromise();
+
+            expect(errorHandler).toHaveBeenCalled();
+            expect(actions).toEqual([
+                { type: PaymentMethodActionType.LoadPaymentMethodRequested, meta: { methodId } },
+                {
+                    type: PaymentMethodActionType.LoadPaymentMethodFailed,
+                    meta: { methodId },
+                    payload: errorResponse,
+                    error: true,
+                },
+            ]);
+        });
+    });
+
     describe('#loadPaymentMethodsByIds()', () => {
         it('loads payment methods data', async () => {
             const methodId = 'braintree';

packages/core/src/payment/payment-method-action-creator.ts

@@ -160,6 +160,46 @@ export default class PaymentMethodActionCreator {
             });
     }
 
+    @cachableAction
+    loadPaymentWalletWithInitializationData(
+        methodId: string,
+        options?: RequestOptions & ActionOptions,
+    ): ThunkAction<LoadPaymentMethodAction, InternalCheckoutSelectors> {
+        return (store) =>
+            Observable.create((observer: Observer<LoadPaymentMethodAction>) => {
+                const state = store.getState();
+                const host = state.config.getHost();
+
+                observer.next(
+                    createAction(PaymentMethodActionType.LoadPaymentMethodRequested, undefined, {
+                        methodId,
+                    }),
+                );
+
+                this._requestSender
+                    .loadPaymentWalletWithInitializationData(methodId, host, options)
+                    .then((response) => {
+                        observer.next(
+                            createAction(
+                                PaymentMethodActionType.LoadPaymentMethodSucceeded,
+                                response.body,
+                                { methodId },
+                            ),
+                        );
+                        observer.complete();
+                    })
+                    .catch((response) => {
+                        observer.error(
+                            createErrorAction(
+                                PaymentMethodActionType.LoadPaymentMethodFailed,
+                                response,
+                                { methodId },
+                            ),
+                        );
+                    });
+            });
+    }
+
     private _filterApplePay(methods: PaymentMethod[]): PaymentMethod[] {
         return filter(methods, (method) => {
             if (method.id === APPLEPAYID && !isApplePayWindow(window)) {

packages/core/src/payment/payment-method-request-sender.spec.ts

@@ -6,8 +6,10 @@ import {
 } from '@bigcommerce/request-sender';
 
 import { ContentType, INTERNAL_USE_ONLY, SDK_VERSION_HEADERS } from '../common/http-request';
-import { getResponse } from '../common/http-request/responses.mock';
+import { getHeadlessPaymentResponse, getResponse } from '../common/http-request/responses.mock';
 
+import { HeadlessPaymentMethodResponse } from './headless-payment';
+import { getHeadlessPaymentMethod, initializationData } from './headless-payment-methods.mock';
 import PaymentMethod from './payment-method';
 import PaymentMethodRequestSender from './payment-method-request-sender';
 import { getPaymentMethod, getPaymentMethods } from './payment-methods.mock';
@@ -136,4 +138,47 @@ describe('PaymentMethodRequestSender', () => {
             });
         });
     });
+
+    describe('#loadPaymentWalletWithInitializationData()', () => {
+        let response: Response<HeadlessPaymentMethodResponse>;
+
+        beforeEach(() => {
+            response = getHeadlessPaymentResponse(getHeadlessPaymentMethod());
+            jest.spyOn(requestSender, 'post').mockReturnValue(Promise.resolve(response));
+        });
+
+        it('loads headless payment method', async () => {
+            const host = 'https://test.com';
+            const path = 'get-initialization-data';
+
+            const walletInitData =
+                await paymentMethodRequestSender.loadPaymentWalletWithInitializationData(
+                    'paypalcommerce',
+                    host,
+                );
+
+            expect(requestSender.post).toHaveBeenCalledWith(
+                `${host}/${path}`,
+                expect.objectContaining({
+                    body: {
+                        entityId: 'paypalcommerce.paypal',
+                    },
+                }),
+            );
+
+            expect(walletInitData).toEqual(
+                expect.objectContaining({
+                    body: {
+                        initializationData,
+                        clientToken: 'clientToken',
+                        id: 'paypalcommerce',
+                        config: {},
+                        method: '',
+                        supportedCards: [],
+                        type: 'PAYMENT_TYPE_API',
+                    },
+                }),
+            );
+        });
+    });
 });