feat(payment): headless wallet button integration service + paypal strategy

Author: bc-nick

packages/core/auto-export.config.json

@@ -14,6 +14,11 @@
             "inputPath": "packages/*/src/index.ts",
             "outputPath": "packages/core/src/generated/checkout-button-strategies.ts",
             "memberPattern": "^create.+ButtonStrategy$"
+        },
+        {
+            "inputPath": "packages/*/src/index.ts",
+            "outputPath": "packages/core/src/generated/wallet-button-strategies.ts",
+            "memberPattern": "^create.+WalletStrategy$"
         }
     ]
 }

packages/core/extend-interface.config.json

@@ -23,6 +23,14 @@
             "memberPattern": "^With.+ButtonInitializeOptions$",
             "targetPath": "packages/core/src/checkout-buttons/index.ts",
             "targetMemberName": "BaseCheckoutButtonInitializeOptions"
+        },
+        {
+            "inputPath": "packages/*/src/index.ts",
+            "outputPath": "packages/core/src/generated/wallet-button-initialize-options.ts",
+            "outputMemberName": "WalletButtonInitializeOptions",
+            "memberPattern": "^With.+WalletInitializeOptions$",
+            "targetPath": "packages/core/src/wallet-buttons/index.ts",
+            "targetMemberName": "BaseWalletButtonInitializeOptions"
         }
     ]
 }

packages/core/src/bundles/wallet-button.ts

@@ -0,0 +1,3 @@
+export { createTimeout } from '@bigcommerce/request-sender';
+
+export { createWalletButtonInitializer } from '../wallet-buttons';

packages/core/src/loader-cdn.ts

@@ -5,15 +5,20 @@ import * as checkoutButtonBundle from './bundles/checkout-button';
 import * as mainBundle from './bundles/checkout-sdk';
 import * as embeddedCheckoutBundle from './bundles/embedded-checkout';
 import * as hostedFormBundle from './bundles/hosted-form';
+import * as walletButtonBundle from './bundles/wallet-button';
 import { parseUrl } from './common/url';
 
 export type CheckoutButtonBundle = typeof checkoutButtonBundle & { version: string };
+export type WalletButtonBundle = typeof walletButtonBundle & {
+    version: string;
+};
 export type EmbeddedCheckoutBundle = typeof embeddedCheckoutBundle & { version: string };
 export type HostedFormBundle = typeof hostedFormBundle & { version: string };
 export type MainBundle = typeof mainBundle & { version: string };
 
 export enum BundleType {
     CheckoutButton = 'checkout-button',
+    WalletButton = 'wallet-payment-button',
     EmbeddedCheckout = 'embedded-checkout',
     HostedForm = 'hosted-form',
     Main = 'checkout-sdk',
@@ -25,12 +30,19 @@ const scriptOrigin = isScriptElement(document.currentScript)
 
 export function load(moduleName?: BundleType.Main): Promise<MainBundle>;
 export function load(moduleName: BundleType.CheckoutButton): Promise<CheckoutButtonBundle>;
+export function load(moduleName: BundleType.WalletButton): Promise<WalletButtonBundle>;
 export function load(moduleName: BundleType.EmbeddedCheckout): Promise<EmbeddedCheckoutBundle>;
 export function load(moduleName: BundleType.HostedForm): Promise<HostedFormBundle>;
 
 export async function load(
     moduleName: string = BundleType.Main,
-): Promise<MainBundle | CheckoutButtonBundle | EmbeddedCheckoutBundle | HostedFormBundle> {
+): Promise<
+    | MainBundle
+    | CheckoutButtonBundle
+    | WalletButtonBundle
+    | EmbeddedCheckoutBundle
+    | HostedFormBundle
+> {
     const { version, js } = MANIFEST_JSON;
     const manifestPath = js.find((path) => path.indexOf(moduleName) !== -1);
 

packages/core/src/loader.ts

@@ -4,27 +4,39 @@ import * as checkoutButtonBundle from './bundles/checkout-button';
 import * as mainBundle from './bundles/checkout-sdk';
 import * as embeddedCheckoutBundle from './bundles/embedded-checkout';
 import * as hostedFormBundle from './bundles/hosted-form';
+import * as walletButtonBundle from './bundles/wallet-button';
 
 export type CheckoutButtonBundle = typeof checkoutButtonBundle & { version: string };
+export type WalletPaymentButtonBundle = typeof walletButtonBundle & {
+    version: string;
+};
 export type EmbeddedCheckoutBundle = typeof embeddedCheckoutBundle & { version: string };
 export type HostedFormBundle = typeof hostedFormBundle & { version: string };
 export type MainBundle = typeof mainBundle & { version: string };
 
 export enum BundleType {
     CheckoutButton = 'checkout-button',
+    WalletButton = 'wallet-button',
     EmbeddedCheckout = 'embedded-checkout',
     HostedForm = 'hosted-form',
     Main = 'checkout-sdk',
 }
 
 export function load(moduleName?: BundleType.Main): Promise<MainBundle>;
 export function load(moduleName: BundleType.CheckoutButton): Promise<CheckoutButtonBundle>;
+export function load(moduleName: BundleType.WalletButton): Promise<WalletPaymentButtonBundle>;
 export function load(moduleName: BundleType.EmbeddedCheckout): Promise<EmbeddedCheckoutBundle>;
 export function load(moduleName: BundleType.HostedForm): Promise<HostedFormBundle>;
 
 export async function load(
     moduleName: string = BundleType.Main,
-): Promise<MainBundle | CheckoutButtonBundle | EmbeddedCheckoutBundle | HostedFormBundle> {
+): Promise<
+    | MainBundle
+    | CheckoutButtonBundle
+    | WalletPaymentButtonBundle
+    | EmbeddedCheckoutBundle
+    | HostedFormBundle
+> {
     const { version, js } = MANIFEST_JSON;
     const manifestPath = js.find((path) => path.indexOf(moduleName) !== -1);
 

packages/core/src/wallet-buttons/create-wallet-button-initializer.ts

@@ -0,0 +1,23 @@
+import { createWalletButtonIntegrationService } from '@bigcommerce/checkout-sdk/wallet-button-integration';
+
+import * as walletButtonStrategyFactories from '../generated/wallet-button-strategies';
+
+import createWalletButtonStrategyRegistry from './create-wallet-button-strategy-registry';
+import WalletButtonInitializer from './wallet-button-initializer';
+import { WalletButtonInitializerOptions } from './wallet-buttons';
+
+export default function createWalletButtonInitializer(
+    options: WalletButtonInitializerOptions,
+): WalletButtonInitializer {
+    const { graphQLEndpoint } = options;
+
+    const walletPaymentButtonIntegrationService =
+        createWalletButtonIntegrationService(graphQLEndpoint);
+
+    const registryV2 = createWalletButtonStrategyRegistry(
+        walletPaymentButtonIntegrationService,
+        walletButtonStrategyFactories,
+    );
+
+    return new WalletButtonInitializer(registryV2);
+}

packages/core/src/wallet-buttons/create-wallet-button-strategy-registry.ts

@@ -0,0 +1,44 @@
+import {
+    CheckoutButtonStrategy,
+    CheckoutButtonStrategyResolveId,
+    isResolvableModule,
+} from '@bigcommerce/checkout-sdk/payment-integration-api';
+import {
+    WalletButtonIntegrationService,
+    WalletButtonStrategyFactory,
+} from '@bigcommerce/checkout-sdk/wallet-button-integration';
+
+import { ResolveIdRegistry } from '../common/registry';
+
+export interface WalletButtonStrategyFactories {
+    [key: string]: WalletButtonStrategyFactory<CheckoutButtonStrategy>;
+}
+
+export default function createWalletButtonStrategyRegistry(
+    walletButtonIntegrationService: WalletButtonIntegrationService,
+    walletButtonStrategyFactories: WalletButtonStrategyFactories,
+): ResolveIdRegistry<CheckoutButtonStrategy, CheckoutButtonStrategyResolveId> {
+    const registry = new ResolveIdRegistry<
+        CheckoutButtonStrategy,
+        CheckoutButtonStrategyResolveId
+    >();
+
+    for (const [, createCheckoutButtonStrategy] of Object.entries(walletButtonStrategyFactories)) {
+        if (
+            !isResolvableModule<
+                WalletButtonStrategyFactory<CheckoutButtonStrategy>,
+                CheckoutButtonStrategyResolveId
+            >(createCheckoutButtonStrategy)
+        ) {
+            continue;
+        }
+
+        for (const resolverId of createCheckoutButtonStrategy.resolveIds) {
+            registry.register(resolverId, () =>
+                createCheckoutButtonStrategy(walletButtonIntegrationService),
+            );
+        }
+    }
+
+    return registry;
+}

packages/core/src/wallet-buttons/index.ts

@@ -0,0 +1,2 @@
+export { default as createWalletButtonInitializer } from './create-wallet-button-initializer';
+export { BaseWalletButtonInitializeOptions } from './wallet-button-options';

packages/core/src/wallet-buttons/wallet-button-initializer.ts

@@ -0,0 +1,33 @@
+import { bindDecorator as bind } from '@bigcommerce/checkout-sdk/utility';
+
+import { isElementId, setUniqueElementId } from '../common/dom';
+
+import { BaseWalletButtonInitializeOptions, WalletButtonOptions } from './wallet-button-options';
+import WalletButtonRegistryV2 from './wallet-button-strategy-registry-v2';
+
+@bind
+export default class WalletButtonInitializer {
+    constructor(private _registryV2: WalletButtonRegistryV2) {}
+
+    initializeWalletButton(options: BaseWalletButtonInitializeOptions): Promise<void[]> {
+        const containerIds = this.getContainerIds(options);
+
+        return Promise.all(
+            containerIds.map(async (containerId) => {
+                const strategy = this._registryV2.get({ id: options.methodId });
+
+                return strategy.initialize({ ...options, containerId });
+            }),
+        );
+    }
+
+    deinitializeWalletButton(options: WalletButtonOptions): Promise<void> {
+        return this._registryV2.get({ id: options.methodId }).deinitialize();
+    }
+
+    private getContainerIds(options: BaseWalletButtonInitializeOptions) {
+        return isElementId(options.containerId)
+            ? [options.containerId]
+            : setUniqueElementId(options.containerId, `${options.methodId}-container`);
+    }
+}

packages/core/src/wallet-buttons/wallet-button-options.ts

@@ -0,0 +1,19 @@
+import { RequestOptions } from '../common/http-request';
+
+export { WalletButtonInitializeOptions } from '../generated/wallet-button-initialize-options';
+
+enum CheckoutButtonMethodType {
+    PAYPALCOMMERCE = 'paypalcommercepaypal',
+    PAYPLCOMMERCEVENMO = 'paypalcommercevenmo',
+    PAYPALCOMMERCEPAYPALCREDIT = 'paypalcommercepaypalcredit',
+}
+
+export interface WalletButtonOptions extends RequestOptions {
+    methodId: CheckoutButtonMethodType;
+}
+
+export interface BaseWalletButtonInitializeOptions extends WalletButtonOptions {
+    [key: string]: unknown;
+
+    containerId: string;
+}