feat(payment): Stripe Link V2 digital products handle

Author: bc-dronov

packages/stripe-integration/src/index.ts

@@ -2,7 +2,7 @@ export { default as createStripeV3PaymentStrategy } from './stripev3/create-stri
 export { default as createStripeUPEPaymentStrategy } from './stripe-upe/create-stripe-upe-payment-strategy';
 export { default as createStripeUPECustomerStrategy } from './stripe-upe/create-stripe-upe-customer-strategy';
 export { default as createStripeOCSPaymentStrategy } from './stripe-ocs/create-stripe-ocs-payment-strategy';
-export { default as createStripeLinkV2CustomerStrategy } from './stripe-link-v2/create-stripe-link-v2-customer-strategy';
+export { default as createStripeLinkV2CustomerStrategy } from './stripe-ocs/create-stripe-link-v2-customer-strategy';
 
 export { default as StripeScriptLoader } from './stripev3/stripev3-script-loader';
 

packages/stripe-integration/src/stripe-link-v2/types.ts

@@ -5,7 +5,7 @@ import {
     toResolvableModule,
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
 
-import StripeUPEScriptLoader from '../stripe-upe/stripe-upe-script-loader';
+import StripeUPEScriptLoader from '../stripe-utils/stripe-script-loader';
 
 import StripeLinkV2CustomerStrategy from './stripe-link-v2-customer-strategy';
 

packages/stripe-integration/src/stripe-link-v2/constants.ts renamed to packages/stripe-integration/src/stripe-ocs/constants.ts

@@ -6,22 +6,22 @@ import {
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
 import { PaymentIntegrationServiceMock } from '@bigcommerce/checkout-sdk/payment-integrations-test-utils';
 
-import { StripeStringConstants } from '../stripe-upe/stripe-upe';
-import StripeUPEScriptLoader from '../stripe-upe/stripe-upe-script-loader';
-import { getStripeUPEJsMock } from '../stripe-upe/stripe-upe.mock';
-
-import StripeLinkV2CustomerStrategy from './stripe-link-v2-customer-strategy';
 import {
     StripeLinkV2Client,
     StripeLinkV2Element,
     StripeLinkV2ElementEvent,
     StripeLinkV2Elements,
-} from './types';
+    StripeStringConstants,
+} from '../stripe-utils/stripe';
+import StripeScriptLoader from '../stripe-utils/stripe-script-loader';
+
+import StripeLinkV2CustomerStrategy from './stripe-link-v2-customer-strategy';
+import { getStripeOCSMock } from './stripe-ocs.mock';
 
 describe('StripeLinkV2CustomerStrategy', () => {
     let strategy: StripeLinkV2CustomerStrategy;
     let paymentIntegrationService: PaymentIntegrationService;
-    let scriptLoader: jest.Mocked<StripeUPEScriptLoader>;
+    let scriptLoader: jest.Mocked<StripeScriptLoader>;
     let stripeClient: jest.Mocked<StripeLinkV2Client>;
     let elements: jest.Mocked<StripeLinkV2Elements>;
     let element: jest.Mocked<StripeLinkV2Element>;
@@ -61,7 +61,7 @@ describe('StripeLinkV2CustomerStrategy', () => {
         } as any;
 
         stripeClient = {
-            ...getStripeUPEJsMock(),
+            ...getStripeOCSMock(),
             elements: jest.fn().mockReturnValue(elements),
             confirmPayment: jest.fn(),
         } as any;

packages/stripe-integration/src/stripe-link-v2/create-stripe-link-v2-customer-strategy.spec.ts renamed to packages/stripe-integration/src/stripe-ocs/create-stripe-link-v2-customer-strategy.spec.ts

@@ -12,12 +12,9 @@ import {
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
 
 // import { isStripeUPEPaymentMethodLike } from '../stripe-upe/is-stripe-upe-payment-method-like';
-import { StripeElementType, StripeStringConstants } from '../stripe-utils/stripe';
-import StripeScriptLoader from '../stripe-utils/stripe-script-loader';
 import { WithStripeUPECustomerInitializeOptions } from '../stripe-upe/stripeupe-customer-initialize-options';
-
-import { expressCheckoutAllowedCountryCodes } from './constants';
 import {
+    StripeElementType,
     StripeLinkV2Client,
     StripeLinkV2Element,
     StripeLinkV2ElementCreateOptions,
@@ -26,7 +23,11 @@ import {
     StripeLinkV2Event,
     StripeLinkV2Options,
     StripeLinkV2ShippingRate,
-} from './types';
+    StripeStringConstants,
+} from '../stripe-utils/stripe';
+import StripeScriptLoader from '../stripe-utils/stripe-script-loader';
+
+import { expressCheckoutAllowedCountryCodes } from './constants';
 
 export default class StripeLinkV2CustomerStrategy implements CustomerStrategy {
     private _stripeLinkV2Client?: StripeLinkV2Client;
@@ -63,7 +64,7 @@ export default class StripeLinkV2CustomerStrategy implements CustomerStrategy {
             }
         });
 
-        const stripePublishableKey = undefined;
+        const stripePublishableKey = 'key';
         // TODO uncomment below lines on finalizing
 
         // const state = this.paymentIntegrationService.getState();
@@ -78,8 +79,7 @@ export default class StripeLinkV2CustomerStrategy implements CustomerStrategy {
         // } = paymentMethod;
 
         // TODO remove mock below on finalizing
-        this._stripePublishableKey =
-            stripePublishableKey || 'pk_test_iyRKkVUt0YWpJ3Lq7mfsw3VW008KiFDH4s';
+        this._stripePublishableKey = stripePublishableKey;
 
         this._stripeLinkV2Client = await this.scriptLoader.getStripeLinkV2Client(
             this._stripePublishableKey,
@@ -114,10 +114,15 @@ export default class StripeLinkV2CustomerStrategy implements CustomerStrategy {
         container: string,
         stripeExpressCheckoutClient: StripeLinkV2Client,
     ) {
+        const shouldRequireShippingAddress = this.shouldRequireShippingAddress();
         const expressCheckoutOptions: StripeLinkV2ElementCreateOptions = {
-            allowedShippingCountries: await this.getAvailableCountries(),
-            shippingAddressRequired: true,
-            shippingRates: [{ id: '_', amount: 0, displayName: 'Pending rates' }],
+            shippingAddressRequired: shouldRequireShippingAddress,
+            ...(shouldRequireShippingAddress
+                ? { allowedShippingCountries: await this.getAvailableCountries() }
+                : {}),
+            ...(shouldRequireShippingAddress
+                ? { shippingRates: [{ id: '_', amount: 0, displayName: 'Pending rates' }] }
+                : {}),
             billingAddressRequired: true,
             emailRequired: true,
             phoneNumberRequired: true,
@@ -153,12 +158,19 @@ export default class StripeLinkV2CustomerStrategy implements CustomerStrategy {
     /** Events * */
 
     private initializeEvents(expressCheckoutElement: StripeLinkV2Element): void {
-        expressCheckoutElement.on(StripeLinkV2ElementEvent.SHIPPING_ADDRESS_CHANGE, async (event) =>
-            this.onShippingAddressChange(event),
-        );
-        expressCheckoutElement.on(StripeLinkV2ElementEvent.SHIPPING_RATE_CHANGE, async (event) =>
-            this.onShippingRateChange(event),
-        );
+        const shouldRequireShippingAddress = this.shouldRequireShippingAddress();
+
+        if (shouldRequireShippingAddress) {
+            expressCheckoutElement.on(
+                StripeLinkV2ElementEvent.SHIPPING_ADDRESS_CHANGE,
+                async (event) => this.onShippingAddressChange(event),
+            );
+            expressCheckoutElement.on(
+                StripeLinkV2ElementEvent.SHIPPING_RATE_CHANGE,
+                async (event) => this.onShippingRateChange(event),
+            );
+        }
+
         expressCheckoutElement.on(StripeLinkV2ElementEvent.CONFIRM, async (event) =>
             this.onConfirm(event),
         );
@@ -267,6 +279,13 @@ export default class StripeLinkV2CustomerStrategy implements CustomerStrategy {
 
     /** Utils * */
 
+    private shouldRequireShippingAddress() {
+        const { getCartOrThrow } = this.paymentIntegrationService.getState();
+        const { lineItems } = getCartOrThrow();
+
+        return !!lineItems.physicalItems.length;
+    }
+
     private async updateDisplayedPrice() {
         if (this._stripeElements) {
             this._stripeElements.update({

packages/stripe-integration/src/stripe-link-v2/create-stripe-link-v2-customer-strategy.ts renamed to packages/stripe-integration/src/stripe-ocs/create-stripe-link-v2-customer-strategy.ts

@@ -2,14 +2,13 @@ import { ScriptLoader } from '@bigcommerce/script-loader';
 
 import { PaymentMethodClientUnavailableError } from '@bigcommerce/checkout-sdk/payment-integration-api';
 
-import { StripeLinkV2Client } from '../stripe-link-v2/types';
-
 import {
     StripeClient,
     StripeConfigurationOptions,
     StripeElements,
     StripeElementsOptions,
     StripeHostWindow,
+    StripeLinkV2Client,
 } from './stripe';
 
 export default class StripeScriptLoader {

packages/stripe-integration/src/stripe-link-v2/stripe-link-v2-customer-strategy.spec.ts renamed to packages/stripe-integration/src/stripe-ocs/stripe-link-v2-customer-strategy.spec.ts

@@ -1,5 +1,4 @@
 import { PaymentMethod } from '@bigcommerce/checkout-sdk/payment-integration-api';
-import { StripeLinkV2Client } from '../stripe-link-v2/types';
 
 /**
  * Initialization options.
@@ -511,11 +510,11 @@ export interface StripeResult {
 export interface StripeHostWindow extends Window {
     bcStripeClient?: StripeClient;
     bcStripeElements?: StripeElements;
+    bcStripeLinkV2Client?: StripeLinkV2Client;
     Stripe?<T = StripeClient>(
         stripePublishableKey: string,
         options?: StripeConfigurationOptions,
     ): T;
-    bcStripeLinkV2Client?: StripeLinkV2Client;
 }
 
 export enum StripePaymentMethodType {
@@ -584,3 +583,94 @@ export interface StripeAdditionalActionResponseBody {
         token?: string;
     };
 }
+
+export enum StripeLinkV2ElementEvent {
+    CLICK = 'click',
+    READY = 'ready',
+    SHIPPING_ADDRESS_CHANGE = 'shippingaddresschange',
+    SHIPPING_RATE_CHANGE = 'shippingratechange',
+    CONFIRM = 'confirm',
+}
+
+export interface StripeLinkV2Client extends Omit<StripeClient, 'elements' | 'confirmPayment'> {
+    elements(options: StripeLinkV2Options): StripeLinkV2Elements;
+    confirmPayment(options: StripeLinkV2ConfirmPaymentData): Promise<StripeResult>;
+}
+
+export interface StripeLinkV2ConfirmPaymentData extends Omit<StripeConfirmPaymentData, 'elements'> {
+    elements: StripeLinkV2Elements;
+    clientSecret?: string;
+}
+
+export interface StripeLinkV2Elements extends Omit<StripeElements, 'create' | 'update'> {
+    create(
+        elementType: StripeElementType,
+        options?: StripeLinkV2ElementCreateOptions,
+    ): StripeLinkV2Element;
+    update(options?: StripeLinkV2Options): StripeLinkV2Element;
+}
+
+export interface StripeLinkV2Element extends Omit<StripeElement, 'on' | 'update'> {
+    on(event: StripeLinkV2ElementEvent, handler: (event: StripeLinkV2Event) => void): void;
+
+    update(options?: StripeLinkV2ElementCreateOptions): void;
+}
+
+export interface LineItem {
+    name: string;
+    amount: number;
+}
+
+export interface StripeLinkV2ElementCreateOptions {
+    lineItems?: LineItem[];
+    allowedShippingCountries?: string[];
+    shippingAddressRequired?: boolean;
+    shippingRates?: StripeLinkV2ShippingRate[];
+    billingAddressRequired?: boolean;
+    emailRequired?: boolean;
+    phoneNumberRequired?: boolean;
+    paymentMethods?: {
+        link: StripeStringConstants.AUTO;
+        applePay: StripeStringConstants.NEVER;
+        googlePay: StripeStringConstants.NEVER;
+        amazonPay: StripeStringConstants.NEVER;
+        paypal: StripeStringConstants.NEVER;
+    };
+    buttonHeight?: number;
+}
+
+export interface StripeLinkV2Event {
+    address?: {
+        city?: string;
+        country?: string;
+        postal_code?: string;
+        state?: string;
+    };
+    shippingRate?: StripeLinkV2ShippingRate;
+    elementType: string;
+    expressPaymentType: string;
+    resolve(data: StripeLinkV2EventResolveData): void;
+}
+
+export interface StripeLinkV2EventResolveData {
+    lineItems?: LineItem[];
+    allowedShippingCountries?: string[];
+    shippingAddressRequired?: boolean;
+    shippingRates?: StripeLinkV2ShippingRate[];
+    billingAddressRequired?: boolean;
+    emailRequired?: boolean;
+    phoneNumberRequired?: boolean;
+}
+
+export interface StripeLinkV2ShippingRate {
+    id: string;
+    amount: number;
+    displayName: string;
+}
+
+export interface StripeLinkV2Options {
+    clientSecret?: string;
+    mode?: string;
+    currency?: string;
+    amount?: number;
+}