From 5b74b45449c73436fab007b649aa54e9bcb7d83f Mon Sep 17 00:00:00 2001
From: SerhiiFilkovskyi <serhii.filkovskiy@bigcommerce.com>
Date: Fri, 12 Jun 2026 11:35:31 +0300
Subject: [PATCH] feat(payment): PAYPAL-6645 draft

---
 ...gCommercePaymentsInvoicesPaymentMethod.tsx | 57 +++++++++++++++++++
 .../src/index.ts                              |  7 +++
 .../src/PaymentMethodId.ts                    |  1 +
 3 files changed, 65 insertions(+)
 create mode 100644 packages/bigcommerce-payments-integration/src/BigCommercePaymentsInvoices/BigCommercePaymentsInvoicesPaymentMethod.tsx

diff --git a/packages/bigcommerce-payments-integration/src/BigCommercePaymentsInvoices/BigCommercePaymentsInvoicesPaymentMethod.tsx b/packages/bigcommerce-payments-integration/src/BigCommercePaymentsInvoices/BigCommercePaymentsInvoicesPaymentMethod.tsx
new file mode 100644
index 0000000000..ccd8c06b6a
--- /dev/null
+++ b/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 }],
+);
diff --git a/packages/bigcommerce-payments-integration/src/index.ts b/packages/bigcommerce-payments-integration/src/index.ts
index 6f58e3d267..ee8093916d 100644
--- a/packages/bigcommerce-payments-integration/src/index.ts
+++ b/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';
diff --git a/packages/payment-integration-api/src/PaymentMethodId.ts b/packages/payment-integration-api/src/PaymentMethodId.ts
index a39acb5479..b3d2edd85c 100644
--- a/packages/payment-integration-api/src/PaymentMethodId.ts
+++ b/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',