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

packages/bigcommerce-payments-integration/src/BigCommercePaymentsInvoices/BigCommercePaymentsInvoicesPaymentMethod.tsx

@@ -0,0 +1,57 @@
+import { createBigCommercePaymentsInvoicesPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
+import { type FunctionComponent, useEffect } from 'react';
+
+import {
+    type PaymentMethodProps,
+    type PaymentMethodResolveId,
+    PaymentMethodId,
+    toResolvableComponent,
+} from '@bigcommerce/checkout/payment-integration-api';
+
+const BigCommercePaymentsInvoicesPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
+    method,
+    checkoutService,
+    onUnhandledError,
+}) => {
+    useEffect(() => {
+        const initializePayment = async () => {
+            try {
+                await checkoutService.initializePayment({
+                    gatewayId: method.gateway,
+                    methodId: method.id,
+                    integrations: [createBigCommercePaymentsInvoicesPaymentStrategy],
+                });
+            } catch (error) {
+                if (error instanceof Error) {
+                    onUnhandledError(error);
+                }
+            }
+        };
+
+        void initializePayment();
+
+        return () => {
+            const deinitializePayment = async () => {
+                try {
+                    await checkoutService.deinitializePayment({
+                        gatewayId: method.gateway,
+                        methodId: method.id,
+                    });
+                } catch (error) {
+                    if (error instanceof Error) {
+                        onUnhandledError(error);
+                    }
+                }
+            };
+
+            void deinitializePayment();
+        };
+    }, [checkoutService, method.gateway, method.id, onUnhandledError]);
+
+    return null;
+};
+
+export default toResolvableComponent<PaymentMethodProps, PaymentMethodResolveId>(
+    BigCommercePaymentsInvoicesPaymentMethod,
+    [{ id: PaymentMethodId.BigCommercePaymentsInvoices }],
+);

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

@@ -48,3 +48,10 @@ export { default as BigCommercePaymentsVenmoPaymentMethod } from './BigCommerceP
  *
  * */
 export { default as BigCommercePaymentsRatePayPaymentMethod } from './BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod';
+
+/**
+ *
+ * BigCommerce Payments Invoice
+ *
+ * */
+export { default as BigCommercePaymentsInvoicesPaymentMethod } from './BigCommercePaymentsInvoices/BigCommercePaymentsInvoicesPaymentMethod';

packages/payment-integration-api/src/PaymentMethodId.ts

@@ -54,6 +54,7 @@ enum PaymentMethodId {
     BigCommercePaymentsVenmo = 'bigcommerce_payments_venmo',
     BigCommercePaymentsFastLane = 'bigcommerce_payments_fastlane',
     BigCommercePaymentsGooglePay = 'googlepay_bigcommerce_payments',
+    BigCommercePaymentsInvoices = 'bigcommerce_payments_invoices',
     Qpay = 'qpay',
     Quadpay = 'quadpay',
     Ratepay = 'ratepay',