feat(payment): PAYPAL-4937 Update PaymentRequestSender with new GQL API

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,8 @@
+import { HeadlessPaymentMethodType } from './headless-payment-method-type';
+
+const HeadlessPaymentMethodConfig: Record<string, HeadlessPaymentMethodType> = {
+    paypalcommerce: HeadlessPaymentMethodType.PAYPALCOMMERCE,
+    paypalcommercecredit: HeadlessPaymentMethodType.PAYPALCOMMERCECREDIT,
+};
+
+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,4 @@
+export enum HeadlessPaymentMethodType {
+    PAYPALCOMMERCE = 'paypalcommerce.paypal',
+    PAYPALCOMMERCECREDIT = 'paypalcommerce.paypalcredit',
+}

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,6 @@
+import { RequestOptions } from '../../common/http-request';
+
+export default interface HeadlessPaymentRequestOptions extends RequestOptions {
+    body?: { query: string };
+    headers: { Authorization: string; [key: string]: 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-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,46 @@ describe('PaymentMethodRequestSender', () => {
             });
         });
     });
+
+    describe('#loadPaymentWalletWithInitializationData()', () => {
+        let response: Response<HeadlessPaymentMethodResponse>;
+        const authorization = 'authorization-1234';
+
+        beforeEach(() => {
+            response = getHeadlessPaymentResponse(getHeadlessPaymentMethod());
+            jest.spyOn(requestSender, 'post').mockReturnValue(Promise.resolve(response));
+        });
+
+        it('loads headless payment method', async () => {
+            const walletInitData =
+                await paymentMethodRequestSender.loadPaymentWalletWithInitializationData(
+                    'paypalcommerce',
+                    { headers: { Authorization: authorization } },
+                );
+
+            expect(requestSender.post).toHaveBeenCalledWith(
+                '/graphql',
+                expect.objectContaining({
+                    headers: {
+                        Authorization: authorization,
+                        'Content-Type': 'application/json',
+                    },
+                }),
+            );
+
+            expect(walletInitData).toEqual(
+                expect.objectContaining({
+                    body: {
+                        initializationData,
+                        clientToken: 'clientToken',
+                        id: 'paypalcommerce',
+                        config: {},
+                        method: '',
+                        supportedCards: [],
+                        type: 'PAYMENT_TYPE_API',
+                    },
+                }),
+            );
+        });
+    });
 });

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

@@ -7,6 +7,12 @@ import {
     SDK_VERSION_HEADERS,
 } from '../common/http-request';
 
+import {
+    HeadlessPaymentMethodConfig,
+    HeadlessPaymentMethodResponse,
+    HeadlessPaymentMethodType,
+    HeadlessPaymentRequestOptions,
+} from './headless-payment';
 import PaymentMethod from './payment-method';
 
 export default class PaymentMethodRequestSender {
@@ -44,4 +50,79 @@ export default class PaymentMethodRequestSender {
             params,
         });
     }
+
+    /**
+     * GraphQL payment requests
+     */
+    loadPaymentWalletWithInitializationData(
+        methodId: string,
+        options: HeadlessPaymentRequestOptions,
+    ): Promise<Response<PaymentMethod>> {
+        const entityId = this.getPaymentEntityId(methodId);
+
+        const graphQLQuery = `
+            query {
+                site {
+                    paymentWalletWithInitializationData(filter: {paymentWalletEntityId: "${entityId}"}) {
+                        clientToken
+                        initializationData
+                    }
+                }
+            }
+        `;
+
+        const requestOptions: HeadlessPaymentRequestOptions = {
+            headers: {
+                ...options.headers,
+                'Content-Type': 'application/json',
+            },
+            body: {
+                query: graphQLQuery,
+            },
+        };
+
+        return this._requestSender
+            .post<HeadlessPaymentMethodResponse>('/graphql', requestOptions)
+            .then((response) => this.transformToPaymentMethodResponse(response, methodId));
+    }
+
+    private transformToPaymentMethodResponse(
+        response: Response<HeadlessPaymentMethodResponse>,
+        methodId: string,
+    ): Response<PaymentMethod> {
+        const {
+            body: {
+                data: {
+                    site: {
+                        paymentWalletWithInitializationData: { clientToken, initializationData },
+                    },
+                },
+            },
+        } = response;
+
+        return {
+            ...response,
+            body: {
+                initializationData: initializationData
+                    ? JSON.parse(atob(initializationData))
+                    : null,
+                clientToken,
+                id: methodId,
+                config: {},
+                method: '',
+                supportedCards: [],
+                type: 'PAYMENT_TYPE_API',
+            },
+        };
+    }
+
+    private getPaymentEntityId(methodId: string): HeadlessPaymentMethodType {
+        const entityId = HeadlessPaymentMethodConfig[methodId];
+
+        if (!entityId) {
+            throw new Error('Unable to get payment entity id.');
+        }
+
+        return entityId;
+    }
 }