feat(payment): PAYPAL-6645 Tech PoC [FE]: Pay by Invoice checkout — frontend implementation approach

packages/bigcommerce-payments-integration/src/bigcommerce-payments-invoices/bigcommerce-payments-invoices-payment-initialize-options.ts

@@ -0,0 +1,32 @@
+import {
+    PayPalButtonStyleOptions,
+    PayPalBuyNowInitializeOptions,
+} from '../bigcommerce-payments-types';
+
+export default interface BigCommercePaymentsInvoicesPaymentInitializeOptions {
+    /**
+     * A set of styling options for the checkout button.
+     */
+    style?: PayPalButtonStyleOptions;
+
+    /**
+     * The option that used to initialize a PayPal script with provided currency code.
+     */
+    currencyCode?: string;
+
+    /**
+     * The options that required to initialize Buy Now functionality.
+     */
+    buyNowInitializeOptions?: PayPalBuyNowInitializeOptions;
+
+    /**
+     *
+     *  A callback that gets called when PayPal SDK restricts to render PayPal component.
+     *
+     */
+    onEligibilityFailure?(): void;
+}
+
+export interface WithBigCommercePaymentsInvoicesPaymentInitializeOptions {
+    bigcommerce_payments_invoices?: BigCommercePaymentsInvoicesPaymentInitializeOptions;
+}

packages/bigcommerce-payments-integration/src/bigcommerce-payments-invoices/bigcommerce-payments-invoices-payment-strategy.ts

@@ -0,0 +1,59 @@
+import {
+    InvalidArgumentError,
+    OrderFinalizationNotRequiredError,
+    OrderRequestBody,
+    Payment,
+    PaymentArgumentInvalidError,
+    PaymentInitializeOptions,
+    PaymentIntegrationService,
+    PaymentRequestOptions,
+    PaymentStrategy,
+} from '@bigcommerce/checkout-sdk/payment-integration-api';
+
+import { WithBigCommercePaymentsInvoicesPaymentInitializeOptions } from './bigcommerce-payments-invoices-payment-initialize-options';
+
+export default class BigCommercePaymentsInvoicesPaymentStrategy implements PaymentStrategy {
+    constructor(private paymentIntegrationService: PaymentIntegrationService) {}
+
+    async initialize(
+        options?: PaymentInitializeOptions &
+            WithBigCommercePaymentsInvoicesPaymentInitializeOptions,
+    ): Promise<void> {
+        const { methodId } = options || {};
+
+        if (!methodId) {
+            throw new InvalidArgumentError(
+                'Unable to initialize payment because "options.methodId" argument is not provided.',
+            );
+        }
+
+        await this.paymentIntegrationService.loadPaymentMethods();
+    }
+
+    async execute(payload: OrderRequestBody, options?: PaymentRequestOptions): Promise<void> {
+        const { payment, ...order } = payload;
+        const { methodId } = payment || {};
+
+        if (!payment || !methodId) {
+            throw new PaymentArgumentInvalidError(['payment']);
+        }
+
+        const submitPaymentPayload: Payment = {
+            methodId,
+            paymentData: {
+                formattedPayload: {},
+            },
+        };
+
+        await this.paymentIntegrationService.submitOrder(order, options);
+        await this.paymentIntegrationService.submitPayment(submitPaymentPayload);
+    }
+
+    finalize(): Promise<void> {
+        return Promise.reject(new OrderFinalizationNotRequiredError());
+    }
+
+    deinitialize(): Promise<void> {
+        return Promise.resolve();
+    }
+}

packages/bigcommerce-payments-integration/src/bigcommerce-payments-invoices/create-bigcommerce-payments-invoices-payment-strategy.ts

@@ -0,0 +1,15 @@
+import {
+    PaymentStrategyFactory,
+    toResolvableModule,
+} from '@bigcommerce/checkout-sdk/payment-integration-api';
+
+import BigCommercePaymentsInvoicesPaymentStrategy from './bigcommerce-payments-invoices-payment-strategy';
+
+const createBigCommercePaymentsInvoicesPaymentStrategy: PaymentStrategyFactory<
+    BigCommercePaymentsInvoicesPaymentStrategy
+> = (paymentIntegrationService) =>
+    new BigCommercePaymentsInvoicesPaymentStrategy(paymentIntegrationService);
+
+export default toResolvableModule(createBigCommercePaymentsInvoicesPaymentStrategy, [
+    { id: 'bigcommerce_payments_invoices' },
+]);

packages/bigcommerce-payments-integration/src/index.ts

@@ -86,3 +86,11 @@ export { WithBigCommercePaymentsVenmoCustomerInitializeOptions } from './bigcomm
 
 export { default as createBigCommercePaymentsVenmoPaymentStrategy } from './bigcommerce-payments-venmo/create-bigcommerce-payments-venmo-payment-strategy';
 export { WithBigCommercePaymentsVenmoPaymentInitializeOptions } from './bigcommerce-payments-venmo/bigcommerce-payments-venmo-payment-initialize-options';
+
+/**
+ *
+ * BigCommercePayments Invoices strategies
+ *
+ */
+export { default as createBigCommercePaymentsInvoicesPaymentStrategy } from './bigcommerce-payments-invoices/create-bigcommerce-payments-invoices-payment-strategy';
+export { WithBigCommercePaymentsInvoicesPaymentInitializeOptions } from './bigcommerce-payments-invoices/bigcommerce-payments-invoices-payment-initialize-options';

packages/core/src/payment/payment-request-transformer.spec.ts

@@ -140,6 +140,19 @@ describe('PaymentRequestTransformer', () => {
         );
     });
 
+    it('remaps bigcommerce_payments_invoices id to the bigcommerce_payments provider gateway', () => {
+        const paymentMethod = { ...getAuthorizenet(), id: 'bigcommerce_payments_invoices' };
+
+        jest.spyOn(selectors.paymentMethods, 'getPaymentMethod').mockReturnValue(paymentMethod);
+
+        const paymentRequestBodyResponse = paymentRequestTransformer.transform(payment, selectors);
+
+        expect(paymentRequestBodyResponse.paymentMethod).toEqual({
+            ...paymentMethod,
+            id: 'bigcommerce_payments',
+        });
+    });
+
     it('transforms from hosted form data', () => {
         const result = paymentRequestTransformer.transformWithHostedFormData(
             {

packages/core/src/payment/payment-request-transformer.ts

@@ -172,6 +172,15 @@ export default class PaymentRequestTransformer {
             return { ...paymentMethod, id: CheckoutButtonMethodType.BRAINTREE_PAYPAL };
         }
 
+        // BigCommerce Payments Invoices: the method is registered as
+        // `bigcommerce_payments_invoices`, but BigPay expects the provider gateway
+        // `bigcommerce_payments` with `method: 'invoice'`. The BigPay client's id mapper
+        // doesn't recognise this method, so it would otherwise fall through and send the
+        // raw method id as the gateway. Remap the id to the provider here.
+        if (paymentMethod.id === 'bigcommerce_payments_invoices') {
+            return { ...paymentMethod, id: 'bigcommerce_payments' };
+        }
+
         return paymentMethod;
     }