fix(checkout-button): PAYMENTS-3071 Use the specified endpoint for paypal payment creation

Author: lord2800

src/checkout-buttons/create-checkout-button-initializer.ts

@@ -43,7 +43,7 @@ export default function createCheckoutButtonInitializer(
     return new CheckoutButtonInitializer(
         store,
         new CheckoutButtonStrategyActionCreator(
-            createCheckoutButtonRegistry(store, requestSender, formPoster),
+            createCheckoutButtonRegistry(store, requestSender, formPoster, host),
             new PaymentMethodActionCreator(new PaymentMethodRequestSender(requestSender))
         )
     );

src/checkout-buttons/create-checkout-button-registry.ts

@@ -19,7 +19,8 @@ import { PaypalButtonStrategy } from './strategies/paypal';
 export default function createCheckoutButtonRegistry(
     store: CheckoutStore,
     requestSender: RequestSender,
-    formPoster: FormPoster
+    formPoster: FormPoster,
+    host?: string
 ): Registry<CheckoutButtonStrategy, CheckoutButtonMethodType> {
     const registry = new Registry<CheckoutButtonStrategy, CheckoutButtonMethodType>();
     const scriptLoader = getScriptLoader();
@@ -87,8 +88,10 @@ export default function createCheckoutButtonRegistry(
     registry.register(CheckoutButtonMethodType.PAYPALEXPRESS, () =>
         new PaypalButtonStrategy(
             store,
+            checkoutActionCreator,
             new PaypalScriptLoader(scriptLoader),
-            formPoster
+            formPoster,
+            host
         )
     );
 

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

@@ -1,11 +1,15 @@
+import { createAction } from '@bigcommerce/data-store';
 import { createFormPoster, FormPoster } from '@bigcommerce/form-poster';
+import { createRequestSender } from '@bigcommerce/request-sender';
 import { getScriptLoader } from '@bigcommerce/script-loader';
 import { EventEmitter } from 'events';
 import { merge } from 'lodash';
+import { from } from 'rxjs';
 
-import { createCheckoutStore, CheckoutStore } from '../../../checkout';
-import { getCheckoutStoreState } from '../../../checkout/checkouts.mock';
+import { createCheckoutStore, CheckoutActionCreator, CheckoutActionType, CheckoutRequestSender, CheckoutStore } from '../../../checkout';
+import { getCheckout, getCheckoutStoreState } from '../../../checkout/checkouts.mock';
 import { MissingDataError } from '../../../common/error/errors';
+import { ConfigActionCreator, ConfigRequestSender } from '../../../config';
 import { getPaypalExpress } from '../../../payment/payment-methods.mock';
 import { PaypalActions, PaypalButtonOptions, PaypalScriptLoader, PaypalSDK } from '../../../payment/strategies/paypal';
 import { getPaypalMock } from '../../../payment/strategies/paypal/paypal.mock';
@@ -16,6 +20,8 @@ import { PaypalButtonInitializeOptions } from './paypal-button-options';
 import PaypalButtonStrategy from './paypal-button-strategy';
 
 describe('PaypalButtonStrategy', () => {
+    let actionsMock: PaypalActions;
+    let checkoutActionCreator: CheckoutActionCreator;
     let eventEmitter: EventEmitter;
     let formPoster: FormPoster;
     let options: CheckoutButtonInitializeOptions;
@@ -24,10 +30,13 @@ describe('PaypalButtonStrategy', () => {
     let paypalScriptLoader: PaypalScriptLoader;
     let store: CheckoutStore;
     let strategy: PaypalButtonStrategy;
-    let actionsMock: PaypalActions;
 
     beforeEach(() => {
         store = createCheckoutStore(getCheckoutStoreState());
+        checkoutActionCreator = new CheckoutActionCreator(
+            new CheckoutRequestSender(createRequestSender()),
+            new ConfigActionCreator(new ConfigRequestSender(createRequestSender()))
+        );
         formPoster = createFormPoster();
         paypalScriptLoader = new PaypalScriptLoader(getScriptLoader());
 
@@ -63,7 +72,11 @@ describe('PaypalButtonStrategy', () => {
         jest.spyOn(paypal.Button, 'render')
             .mockImplementation((options: PaypalButtonOptions) => {
                 eventEmitter.on('payment', () => {
-                    options.payment().catch(() => {});
+                    options.payment({
+                        payerId: 'PAYER_ID',
+                        paymentID: 'PAYMENT_ID',
+                        payerID: 'PAYER_ID',
+                    }, actionsMock).catch(() => {});
                 });
 
                 eventEmitter.on('authorize', () => {
@@ -75,6 +88,12 @@ describe('PaypalButtonStrategy', () => {
                 });
             });
 
+        jest.spyOn(checkoutActionCreator, 'loadDefaultCheckout')
+            .mockReturnValue(() => from([
+                createAction(CheckoutActionType.LoadCheckoutRequested),
+                createAction(CheckoutActionType.LoadCheckoutSucceeded, getCheckout()),
+            ]));
+
         jest.spyOn(paypalScriptLoader, 'loadPaypal')
             .mockReturnValue(Promise.resolve(paypal));
 
@@ -83,6 +102,7 @@ describe('PaypalButtonStrategy', () => {
 
         strategy = new PaypalButtonStrategy(
             store,
+            checkoutActionCreator,
             paypalScriptLoader,
             formPoster
         );
@@ -93,6 +113,7 @@ describe('PaypalButtonStrategy', () => {
             store = createCheckoutStore();
             strategy = new PaypalButtonStrategy(
                 store,
+                checkoutActionCreator,
                 paypalScriptLoader,
                 formPoster
             );
@@ -193,6 +214,7 @@ describe('PaypalButtonStrategy', () => {
 
         strategy = new PaypalButtonStrategy(
             store,
+            checkoutActionCreator,
             paypalScriptLoader,
             formPoster
         );
@@ -251,4 +273,42 @@ describe('PaypalButtonStrategy', () => {
             }, 'checkout-button');
         });
     });
+
+    it('sends create payment requests to the relative url by default', async () => {
+        await strategy.initialize(options);
+
+        eventEmitter.emit('payment');
+
+        await new Promise(resolve => process.nextTick(resolve));
+
+        const expectedBody = { cartId: 'b20deef40f9699e48671bbc3fef6ca44dc80e3c7', merchantId: 'h3hxn44tdd8wxkzd' };
+
+        expect(actionsMock.request.post)
+            .toHaveBeenCalledWith('/api/storefront/payment/paypalexpress', expectedBody, expect.any(Object));
+    });
+
+    describe('with a supplied host', () => {
+        beforeEach(() => {
+            strategy = new PaypalButtonStrategy(
+                store,
+                checkoutActionCreator,
+                paypalScriptLoader,
+                formPoster,
+                'https://example.com'
+            );
+        });
+
+        it('sends create payment requests to the supplied host', async () => {
+            await strategy.initialize(options);
+
+            eventEmitter.emit('payment');
+
+            await new Promise(resolve => process.nextTick(resolve));
+
+            const expectedBody = { cartId: 'b20deef40f9699e48671bbc3fef6ca44dc80e3c7', merchantId: 'h3hxn44tdd8wxkzd' };
+
+            expect(actionsMock.request.post)
+                .toHaveBeenCalledWith('https://example.com/api/storefront/payment/paypalexpress', expectedBody, expect.any(Object));
+        });
+    });
 });

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

@@ -1,22 +1,24 @@
 import { FormPoster } from '@bigcommerce/form-poster';
 import { pick } from 'lodash';
 
-import { CheckoutStore } from '../../../checkout';
+import { CheckoutActionCreator, CheckoutStore } from '../../../checkout';
 import { InvalidArgumentError, MissingDataError, MissingDataErrorType, NotInitializedError, NotInitializedErrorType, StandardError } from '../../../common/error/errors';
+import { INTERNAL_USE_ONLY } from '../../../common/http-request';
 import { PaymentMethod } from '../../../payment';
-import { PaypalScriptLoader } from '../../../payment/strategies/paypal';
 import { PaypalActions, PaypalAuthorizeData, PaypalClientToken } from '../../../payment/strategies/paypal';
+import { PaypalScriptLoader } from '../../../payment/strategies/paypal';
 import { CheckoutButtonInitializeOptions } from '../../checkout-button-options';
-
 import CheckoutButtonStrategy from '../checkout-button-strategy';
 
 export default class PaypalButtonStrategy implements CheckoutButtonStrategy {
     private _paymentMethod?: PaymentMethod;
 
     constructor(
         private _store: CheckoutStore,
+        private _checkoutActionCreator: CheckoutActionCreator,
         private _paypalScriptLoader: PaypalScriptLoader,
-        private _formPoster: FormPoster
+        private _formPoster: FormPoster,
+        private _host: string = ''
     ) {}
 
     initialize(options: CheckoutButtonInitializeOptions): Promise<void> {
@@ -76,7 +78,17 @@ export default class PaypalButtonStrategy implements CheckoutButtonStrategy {
             throw new NotInitializedError(NotInitializedErrorType.CheckoutButtonNotInitialized);
         }
 
-        return actions.request.post('/api/storefront/paypal-payment/', { merchantId })
+        return this._store.dispatch(this._checkoutActionCreator.loadDefaultCheckout())
+            .then(state => {
+                const cart = state.cart.getCart();
+                const cartId = cart ? cart.id : '';
+
+                return actions.request.post(`${this._host}/api/storefront/payment/paypalexpress`, { merchantId, cartId }, {
+                    headers: {
+                        'X-API-INTERNAL': INTERNAL_USE_ONLY,
+                    },
+                });
+            })
             .then(res => res.id)
             .catch(error => {
                 if (onError) {

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

@@ -53,7 +53,7 @@ export interface PaypalPaymentActions {
 }
 
 export interface PaypalRequestActions {
-    post(url: string, payload?: object): Promise<{ id: string }>;
+    post(url: string, payload?: object, options?: object): Promise<{ id: string }>;
 }
 
 export interface PaypalTransaction {