Paypal 159

src/checkout-buttons/checkout-button-options.ts

@@ -4,6 +4,7 @@ import { CheckoutButtonMethodType } from './strategies';
 import { BraintreePaypalButtonInitializeOptions } from './strategies/braintree';
 import { GooglePayButtonInitializeOptions } from './strategies/googlepay';
 import { PaypalButtonInitializeOptions } from './strategies/paypal';
+import { PaypalCommerceButtonInitializeOptions } from './strategies/paypalCommerce';
 
 /**
  * The set of options for configuring the checkout button.
@@ -34,6 +35,12 @@ export interface CheckoutButtonInitializeOptions extends CheckoutButtonOptions {
      */
     paypal?: PaypalButtonInitializeOptions;
 
+    /**
+     * The options that are required to facilitate PayPal Commerce. They can be omitted
+     * unless you need to support Paypal.
+     */
+    paypalCommerce?: PaypalCommerceButtonInitializeOptions;
+
     /**
      * The ID of a container which the checkout button should be inserted.
      */

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

@@ -9,12 +9,14 @@ import { BraintreeScriptLoader, BraintreeSDKCreator } from '../payment/strategie
 import { createGooglePayPaymentProcessor, GooglePayBraintreeInitializer, GooglePayStripeInitializer } from '../payment/strategies/googlepay';
 import { MasterpassScriptLoader } from '../payment/strategies/masterpass';
 import { PaypalScriptLoader } from '../payment/strategies/paypal';
+import { PaypalCommerceScriptLoader } from '../payment/strategies/paypalCommerce';
 
 import { CheckoutButtonMethodType, CheckoutButtonStrategy } from './strategies';
 import { BraintreePaypalButtonStrategy } from './strategies/braintree';
 import { GooglePayButtonStrategy } from './strategies/googlepay';
 import { MasterpassButtonStrategy } from './strategies/masterpass';
 import { PaypalButtonStrategy } from './strategies/paypal';
+import { PaypalCommerceButtonStrategy } from './strategies/paypalCommerce';
 
 export default function createCheckoutButtonRegistry(
     store: CheckoutStore,
@@ -95,5 +97,15 @@ export default function createCheckoutButtonRegistry(
         )
     );
 
+    registry.register(CheckoutButtonMethodType.PAYPALCOMMERCE, () =>
+        new PaypalCommerceButtonStrategy(
+            store,
+            checkoutActionCreator,
+            new PaypalCommerceScriptLoader(scriptLoader),
+            formPoster,
+            requestSender
+        )
+    );
+
     return registry;
 }

src/checkout-buttons/strategies/checkout-button-method-type.ts

@@ -5,6 +5,7 @@ enum CheckoutButtonMethodType {
     GOOGLEPAY_STRIPE = 'googlepaystripe',
     MASTERPASS = 'masterpass',
     PAYPALEXPRESS = 'paypalexpress',
+    PAYPALCOMMERCE = 'paypalcommerce',
 }
 
 export default CheckoutButtonMethodType;

src/checkout-buttons/strategies/paypalCommerce/index.ts

@@ -0,0 +1,2 @@
+export { PaypalCommerceButtonInitializeOptions } from './paypalCommerce-button-options';
+export { default as PaypalCommerceButtonStrategy } from './paypalCommerce-button-strategy';

src/checkout-buttons/strategies/paypalCommerce/paypalCommerce-button-options.ts

@@ -0,0 +1,6 @@
+export interface PaypalCommerceButtonInitializeOptions {
+    /**
+     * The Client ID of the Paypal App
+     */
+    clientId: string;
+}

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

@@ -0,0 +1,80 @@
+import { FormPoster } from '@bigcommerce/form-poster';
+import { RequestSender } from '@bigcommerce/request-sender';
+
+import { CheckoutActionCreator, CheckoutStore } from '../../../checkout';
+import { InvalidArgumentError, MissingDataError, MissingDataErrorType } from '../../../common/error/errors';
+import { INTERNAL_USE_ONLY } from '../../../common/http-request';
+import { PaypalCommerceScriptLoader } from '../../../payment/strategies/paypalCommerce';
+import { CheckoutButtonInitializeOptions } from '../../checkout-button-options';
+import CheckoutButtonStrategy from '../checkout-button-strategy';
+
+export default class PaypalCommerceButtonStrategy implements CheckoutButtonStrategy {
+
+    constructor(
+        private _store: CheckoutStore,
+        private _checkoutActionCreator: CheckoutActionCreator,
+        private _paypalScriptLoader: PaypalCommerceScriptLoader,
+        private _formPoster: FormPoster,
+        private _requestSender: RequestSender
+    ) {}
+
+    initialize(options: CheckoutButtonInitializeOptions): Promise<void> {
+        const state = this._store.getState();
+        const paymentMethod = state.paymentMethods.getPaymentMethod(options.methodId);
+        const paypalOptions = options.paypalCommerce;
+
+        if (!paypalOptions) {
+            throw new InvalidArgumentError();
+        }
+
+        if (!paymentMethod) {
+            throw new MissingDataError(MissingDataErrorType.MissingPaymentMethod);
+        }
+
+        return this._paypalScriptLoader.loadPaypalCommerce(paypalOptions.clientId)
+            .then(paypal => {
+                if (!paymentMethod || !paymentMethod.config.merchantId) {
+                    throw new MissingDataError(MissingDataErrorType.MissingPaymentMethod);
+                }
+
+                return paypal.Buttons({
+                    createOrder: () => this._setupPayment(),
+                    onApprove: data => {
+                        this._formPoster.postForm('/checkout.php', {
+                            payment_type: 'paypal',
+                            provider: paymentMethod.id,
+                            action: 'set_external_checkout',
+                            order_id: data.orderID,
+                        });
+                    },
+                }).render(`#${options.containerId}`);
+            });
+    }
+
+    deinitialize(): Promise<void> {
+        return Promise.resolve();
+    }
+
+    private _setupPayment(): Promise<string> {
+
+        return this._store.dispatch(this._checkoutActionCreator.loadDefaultCheckout())
+            .then(state => {
+                const url = '/api/storefront/payment/paypalcommerce';
+                const headers = {
+                    'X-API-INTERNAL': INTERNAL_USE_ONLY,
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                };
+                const cart = state.cart.getCart();
+                const currentCartId = cart ? cart.id : '';
+
+                return this._requestSender.post(url, {
+                    headers,
+                    body: {cartId: currentCartId},
+                });
+            })
+            .then(res => res.body.orderId)
+            .catch(error => {
+                throw error;
+            });
+    }
+}

src/payment/strategies/paypalCommerce/index.ts

@@ -0,0 +1,2 @@
+export { PaypalCommerceSDK } from './paypalCommerce-sdk';
+export { default as PaypalCommerceScriptLoader } from './paypalCommerce-script-loader';

src/payment/strategies/paypalCommerce/paypalCommerce-script-loader.ts

@@ -0,0 +1,27 @@
+import { ScriptLoader } from '@bigcommerce/script-loader';
+
+import { PaymentMethodClientUnavailableError } from '../../errors';
+
+import { PaypalCommerceHostWindow, PaypalCommerceSDK } from './paypalCommerce-sdk';
+
+export default class PaypalCommerceScriptLoader {
+    private _window: PaypalCommerceHostWindow;
+
+    constructor(
+        private _scriptLoader: ScriptLoader
+    ) {
+        this._window = window;
+    }
+
+    async loadPaypalCommerce(clientId: string = '', currency: string = 'USD'): Promise<PaypalCommerceSDK> {
+        const scriptSrc = `https://www.paypal.com/sdk/js?currency=${currency}&client-id=${clientId}`;
+
+        await this._scriptLoader.loadScript(scriptSrc, { async: true, attributes: {} });
+
+        if (!this._window.paypal) {
+            throw new PaymentMethodClientUnavailableError();
+        }
+
+        return this._window.paypal;
+    }
+}

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

@@ -0,0 +1,20 @@
+
+interface ApproveDataOptions {
+    orderID: string;
+}
+
+interface ButtonsOptions {
+    enableStandardCardFields?: boolean;
+    createOrder(data: any): void;
+    onApprove(data: ApproveDataOptions): void;
+}
+
+export interface PaypalCommerceSDK {
+    Buttons({createOrder, onApprove}: ButtonsOptions): {
+        render(id: string): void;
+    };
+}
+
+export interface PaypalCommerceHostWindow extends Window {
+    paypal?: PaypalCommerceSDK;
+}