@stigg/react-sdk 6.9.1 → 6.11.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.9.1",
+  "version": "6.11.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -114,7 +114,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.12.0",
-    "@stigg/js-client-sdk": "3.60.0",
+    "@stigg/js-client-sdk": "3.60.2",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/components/checkout/CheckoutContainer.tsx

@@ -33,7 +33,12 @@ const getStepProps = (
     onBillingAddressChange,
     onChangePlan,
     collectPhoneNumber,
-  }: Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'onChangePlan' | 'collectPhoneNumber'>,
+    onCheckout,
+    onCheckoutCompleted,
+  }: Pick<
+    CheckoutContainerProps,
+    'onBillingAddressChange' | 'onChangePlan' | 'collectPhoneNumber' | 'onCheckout' | 'onCheckoutCompleted'
+  >,
 ): StepProps => {
   switch (currentStep.key) {
     case CheckoutStepKey.PLAN:
@@ -43,7 +48,12 @@ const getStepProps = (
     case CheckoutStepKey.PAYMENT:
       return {
         content: (
-          <PaymentStep onBillingAddressChange={onBillingAddressChange} collectPhoneNumber={collectPhoneNumber} />
+          <PaymentStep
+            onBillingAddressChange={onBillingAddressChange}
+            collectPhoneNumber={collectPhoneNumber}
+            onCheckout={onCheckout}
+            onCheckoutCompleted={onCheckoutCompleted}
+          />
         ),
       };
     default:
@@ -96,7 +106,13 @@ export function CheckoutContainer({
     !!activeSubscription &&
     activeSubscription.pricingType !== PricingType.Free;
 
-  const { content } = getStepProps(currentStep, { onBillingAddressChange, onChangePlan, collectPhoneNumber });
+  const { content } = getStepProps(currentStep, {
+    onBillingAddressChange,
+    onChangePlan,
+    collectPhoneNumber,
+    onCheckout,
+    onCheckoutCompleted,
+  });
 
   const checkoutContent = (
     <>

package/src/components/checkout/CheckoutProvider.tsx

@@ -36,6 +36,7 @@ export interface CheckoutContextState {
   paymentStep: PaymentStepState;
   widgetState: WidgetState;
   isWidgetWatermarkEnabled: boolean;
+  checkoutSuccess: boolean;
 }
 
 export const CheckoutContext = React.createContext<
@@ -154,6 +155,7 @@ export function CheckoutProvider({
       resourceId: checkout?.resource?.id,
       widgetState: { readOnly: false, isValid: true, isLoadingCheckoutData: isLoading },
       isWidgetWatermarkEnabled,
+      checkoutSuccess: false,
     };
 
     return initialState;

package/src/components/checkout/hooks/useCheckoutModel.ts

@@ -7,8 +7,8 @@ export type WidgetState = {
 };
 
 function useCheckoutState() {
-  const [{ checkout, widgetState, checkoutLocalization }] = useCheckoutContext();
-  return { checkoutState: checkout, widgetState, checkoutLocalization };
+  const [{ checkout, widgetState, checkoutLocalization, checkoutSuccess }] = useCheckoutContext();
+  return { checkoutState: checkout, widgetState, checkoutLocalization, checkoutSuccess };
 }
 
 function useSetWidgetReadonly() {
@@ -29,14 +29,25 @@ function useSetIsValid() {
     });
 }
 
+function useSetCheckoutSuccess() {
+  const [, setState] = useCheckoutContext();
+
+  return (checkoutSuccess: boolean) =>
+    setState((draft) => {
+      draft.checkoutSuccess = checkoutSuccess;
+    });
+}
+
 export function useCheckoutModel() {
-  const { checkoutState, widgetState, checkoutLocalization } = useCheckoutState();
+  const { checkoutState, widgetState, checkoutLocalization, checkoutSuccess } = useCheckoutState();
 
   return {
     checkoutState,
     widgetState,
     checkoutLocalization,
+    checkoutSuccess,
     setWidgetReadOnly: useSetWidgetReadonly(),
     setIsValid: useSetIsValid(),
+    setCheckoutSuccess: useSetCheckoutSuccess(),
   };
 }

package/src/components/checkout/steps/payment/PaymentMethods.tsx

@@ -13,6 +13,8 @@ import {
   PaymentMethodTextContainer,
 } from './PaymentMethods.style';
 import { StripePaymentForm } from './stripe';
+import { ZuoraPaymentForm } from './zuora/ZuoraPaymentForm';
+import { useZuoraIntegration } from './zuora/useZuoraIntegration';
 import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { CheckoutContainerProps } from '../../CheckoutContainer';
 
@@ -30,7 +32,10 @@ export type NewPaymentMethodProps = Pick<PaymentMethodLayoutProps, 'checked' | '
   onSelect: () => void;
   checkoutLocalization: CheckoutLocalization;
   hasExistingPaymentMethod: boolean;
-} & Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'collectPhoneNumber'>;
+} & Pick<
+    CheckoutContainerProps,
+    'onBillingAddressChange' | 'collectPhoneNumber' | 'onCheckout' | 'onCheckoutCompleted'
+  >;
 
 function PaymentMethodLayout({ checked, text, subtitle, readOnly }: PaymentMethodLayoutProps) {
   return (
@@ -77,7 +82,11 @@ export function NewPaymentMethod({
   checkoutLocalization,
   onBillingAddressChange,
   collectPhoneNumber,
+  onCheckout,
+  onCheckoutCompleted,
 }: NewPaymentMethodProps) {
+  const { isZuoraIntegration } = useZuoraIntegration();
+
   return (
     <NewPaymentMethodContainer item $hideBorders={!hasExistingPaymentMethod} onClick={onSelect} $disabled={readOnly}>
       {hasExistingPaymentMethod && (
@@ -88,7 +97,11 @@ export function NewPaymentMethod({
         />
       )}
       <Collapse in={checked}>
-        <StripePaymentForm onBillingAddressChange={onBillingAddressChange} collectPhoneNumber={collectPhoneNumber} />
+        {isZuoraIntegration ? (
+          <ZuoraPaymentForm onCheckout={onCheckout} onCheckoutCompleted={onCheckoutCompleted} />
+        ) : (
+          <StripePaymentForm onBillingAddressChange={onBillingAddressChange} collectPhoneNumber={collectPhoneNumber} />
+        )}
       </Collapse>
     </NewPaymentMethodContainer>
   );

package/src/components/checkout/steps/payment/PaymentStep.tsx

@@ -16,7 +16,12 @@ const PaymentContainer = styled(Grid)`
 export function PaymentStep({
   onBillingAddressChange,
   collectPhoneNumber,
-}: Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'collectPhoneNumber'>) {
+  onCheckout,
+  onCheckoutCompleted,
+}: Pick<
+  CheckoutContainerProps,
+  'onBillingAddressChange' | 'collectPhoneNumber' | 'onCheckout' | 'onCheckoutCompleted'
+>) {
   const { checkoutState, checkoutLocalization, widgetState } = useCheckoutModel();
   const { customer } = checkoutState || {};
   const { errorMessage, useNewPaymentMethod, setUseNewPaymentMethod } = usePaymentStepModel();
@@ -51,6 +56,8 @@ export function PaymentStep({
         onSelect={() => handleOnSelect(true)}
         onBillingAddressChange={onBillingAddressChange}
         collectPhoneNumber={collectPhoneNumber}
+        onCheckout={onCheckout}
+        onCheckoutCompleted={onCheckoutCompleted}
       />
     </PaymentContainer>
   );

package/src/components/checkout/steps/payment/zuora/ZuoraPaymentForm.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { Currency, ZuoraCheckoutCredentialsFragment } from '@stigg/js-client-sdk';
+import { useZuoraIntegration } from './useZuoraIntegration';
+import { createZuoraPaymentFormConfig, ZuoraPaymentResult } from './zuora.utils';
+import { useZuoraSubmit } from './useZuoraSubmit';
+import { useCheckoutModel, usePaymentStepModel, usePlanStepModel } from '../../../hooks';
+import { CheckoutContainerProps } from '../../../CheckoutContainer';
+
+const Container = styled(Box)`
+  position: relative;
+  max-width: 500px;
+`;
+
+const PaymentContainer = styled(Box)<{ $showLoading: boolean }>`
+  opacity: ${({ $showLoading }) => ($showLoading ? 0.6 : 1)};
+  pointer-events: ${({ $showLoading }) => ($showLoading ? 'none' : 'auto')};
+`;
+
+const LoadingOverlay = styled(Box)`
+  position: absolute;
+  top: 40px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  z-index: 10;
+`;
+
+const LoadingContent = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+`;
+
+export function ZuoraPaymentForm({
+  onCheckout,
+  onCheckoutCompleted,
+}: Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted'>) {
+  const { isZuoraIntegration, isInitialized, createPaymentSession } = useZuoraIntegration();
+  const { setErrorMessage } = usePaymentStepModel();
+  const { billingCountryCode } = usePlanStepModel();
+  const { checkoutState, widgetState } = useCheckoutModel();
+  const { handleZuoraSubmit } = useZuoraSubmit({ onCheckout, onCheckoutCompleted });
+  const hasRenderedRef = useRef(false);
+  const [paymentFormLoading, setPaymentFormLoading] = React.useState(false);
+
+  const currency = checkoutState?.plan?.pricePoints?.[0]?.currency || Currency.Usd;
+  const { publishableKey } = checkoutState?.billingIntegration.billingCredentials as ZuoraCheckoutCredentialsFragment;
+
+  const handleZuoraComplete = useCallback(
+    async (result: ZuoraPaymentResult) => {
+      if (!result.success || !result.paymentMethodId) {
+        const errorMessage = result.error?.message || 'Payment failed';
+        setErrorMessage(errorMessage);
+        await onCheckoutCompleted({ success: false, error: errorMessage });
+        return;
+      }
+
+      await handleZuoraSubmit(result.paymentMethodId);
+    },
+    [handleZuoraSubmit, setErrorMessage, onCheckoutCompleted],
+  );
+
+  useEffect(() => {
+    const renderZuoraForm = async () => {
+      if (!isInitialized || hasRenderedRef.current) {
+        return;
+      }
+
+      setPaymentFormLoading(true);
+      setErrorMessage(undefined);
+
+      try {
+        hasRenderedRef.current = true;
+
+        const zuora = window.Zuora(publishableKey);
+        const config = createZuoraPaymentFormConfig(
+          createPaymentSession,
+          handleZuoraComplete,
+          currency,
+          billingCountryCode,
+        );
+
+        const paymentForm = await zuora.createPaymentForm(config);
+        paymentForm.mount('#zuora_payment');
+      } catch (err) {
+        hasRenderedRef.current = false;
+        setErrorMessage('Failed to render Zuora payment form');
+      } finally {
+        setPaymentFormLoading(false);
+      }
+    };
+
+    void renderZuoraForm();
+
+    return () => {
+      hasRenderedRef.current = false;
+    };
+    // Only depend on isInitialized to prevent multiple form renders
+    // createPaymentSession and handleZuoraComplete are intentionally omitted
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isInitialized]);
+
+  if (!isZuoraIntegration) {
+    return null;
+  }
+
+  return (
+    <Container>
+      <PaymentContainer id="zuora_payment" $showLoading={widgetState.readOnly || paymentFormLoading} />
+      {(widgetState.readOnly || paymentFormLoading) && (
+        <LoadingOverlay>
+          <LoadingContent>
+            <CircularProgress size={28} />
+          </LoadingContent>
+        </LoadingOverlay>
+      )}
+    </Container>
+  );
+}

package/src/components/checkout/steps/payment/zuora/index.ts

@@ -0,0 +1,11 @@
+export { ZuoraPaymentForm } from './ZuoraPaymentForm';
+export { useZuoraIntegration } from './useZuoraIntegration';
+export {
+  isZuoraLibraryAvailable,
+  loadZuoraLibrary,
+  createZuoraPaymentFormConfig,
+  ZuoraInstance,
+  ZuoraPaymentFormConfig,
+  ZuoraPaymentForm as ZuoraPaymentFormType,
+  ZuoraPaymentResult,
+} from './zuora.utils';

package/src/components/checkout/steps/payment/zuora/useZuoraIntegration.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useCheckoutModel, usePaymentStepModel, usePlanStepModel } from '../../../hooks';
+import { isZuoraLibraryAvailable, loadZuoraLibrary } from './zuora.utils';
+import { BillingVendorIdentifier, useStiggContext } from '../../../../..';
+
+export function useZuoraIntegration() {
+  const { stigg } = useStiggContext();
+  const { setErrorMessage } = usePaymentStepModel();
+  const { billingCountryCode } = usePlanStepModel();
+  const [isInitialized, setIsInitialized] = useState(false);
+  const { checkoutState } = useCheckoutModel();
+  const { billingIntegration } = checkoutState || {};
+
+  const createPaymentSession = useCallback(async () => {
+    if (!checkoutState?.customer.id || !checkoutState?.plan.id) {
+      throw new Error('Customer and plan are required');
+    }
+
+    const { token } = await stigg.createPaymentSession({
+      planId: checkoutState.plan.id,
+      billingCountryCode,
+    });
+
+    return token;
+  }, [checkoutState, stigg, billingCountryCode]);
+
+  const initializeZuora = useCallback(() => {
+    try {
+      if (!isZuoraLibraryAvailable()) {
+        loadZuoraLibrary();
+      }
+
+      setIsInitialized(true);
+    } catch (err) {
+      setErrorMessage('Failed to initialize Zuora');
+    }
+  }, [setIsInitialized, setErrorMessage]);
+
+  useEffect(() => {
+    if (billingIntegration) {
+      const { billingIdentifier } = billingIntegration;
+
+      if (billingIdentifier === BillingVendorIdentifier.Zuora) {
+        void initializeZuora();
+      }
+    }
+  }, [billingIntegration, initializeZuora]);
+
+  const isZuoraIntegration = billingIntegration?.billingIdentifier === BillingVendorIdentifier.Zuora;
+
+  return {
+    isZuoraIntegration,
+    isInitialized,
+    createPaymentSession,
+  };
+}

package/src/components/checkout/steps/payment/zuora/useZuoraSubmit.ts

@@ -0,0 +1,125 @@
+import { useCallback } from 'react';
+import { ApplySubscription } from '@stigg/js-client-sdk';
+import { useStiggContext } from '../../../../..';
+import { useSubscriptionState } from '../../../hooks/useSubscriptionState';
+import { useCheckoutModel, usePaymentStepModel } from '../../../hooks';
+import { CheckoutContainerProps } from '../../../CheckoutContainer';
+import { ANIMATION_DURATION } from '../../../summary/CheckoutSuccess';
+
+const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
+export type ZuoraSubmitResult = {
+  success: boolean;
+  errorMessage?: string;
+};
+
+export type UseZuoraSubmitProps = {
+  onSuccess?: () => void;
+} & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted' | 'disableSuccessAnimation'>;
+
+export function useZuoraSubmit({
+  onCheckout,
+  onCheckoutCompleted,
+  onSuccess,
+  disableSuccessAnimation,
+}: UseZuoraSubmitProps) {
+  const { stigg } = useStiggContext();
+  const subscriptionState = useSubscriptionState();
+  const { checkoutState, setWidgetReadOnly, setCheckoutSuccess } = useCheckoutModel();
+  const { setErrorMessage } = usePaymentStepModel();
+
+  const handleZuoraSubmit = useCallback(
+    async (paymentMethodId?: string): Promise<ZuoraSubmitResult> => {
+      setWidgetReadOnly(true);
+
+      let success = true;
+      let errorMessage: string | undefined;
+
+      const currentSubscriptionState = subscriptionState;
+      if (!currentSubscriptionState) {
+        success = false;
+        errorMessage = 'Unexpected error, please contact support.';
+      } else {
+        const checkoutParams: ApplySubscription = {
+          ...currentSubscriptionState,
+          paymentMethodId,
+        };
+
+        const checkoutAction = async (params: ApplySubscription) => {
+          try {
+            const applySubscriptionResults = await stigg.applySubscription(params);
+            return {
+              success: true,
+              results: applySubscriptionResults,
+            };
+          } catch (e) {
+            console.error(e);
+            return {
+              success: false,
+              errorMessage: (e as any)?.message || 'Failed to apply subscription',
+            };
+          }
+        };
+
+        try {
+          if (onCheckout) {
+            const externalCheckoutResults = await onCheckout({
+              customerId: checkoutState!.customer.id,
+              checkoutParams,
+              checkoutAction,
+            });
+
+            if (externalCheckoutResults.errorMessage) {
+              errorMessage = externalCheckoutResults.errorMessage;
+            }
+
+            success = success && externalCheckoutResults.success && !errorMessage;
+          } else {
+            const checkoutActionResults = await checkoutAction(checkoutParams);
+            if (!checkoutActionResults.success && checkoutActionResults.errorMessage) {
+              errorMessage = checkoutActionResults.errorMessage;
+            }
+            success = checkoutActionResults.success && !errorMessage;
+          }
+        } catch (err) {
+          success = false;
+          errorMessage = (err as Error).message || 'Failed to process checkout';
+        }
+      }
+
+      if (success) {
+        setCheckoutSuccess(true);
+
+        if (onSuccess) {
+          onSuccess();
+
+          if (!disableSuccessAnimation) {
+            await delay(ANIMATION_DURATION);
+          }
+        }
+      } else {
+        setErrorMessage(errorMessage);
+      }
+
+      setWidgetReadOnly(false);
+
+      await onCheckoutCompleted({ success, error: errorMessage });
+
+      return { success, errorMessage };
+    },
+    [
+      stigg,
+      subscriptionState,
+      checkoutState,
+      onCheckout,
+      onCheckoutCompleted,
+      onSuccess,
+      disableSuccessAnimation,
+      setWidgetReadOnly,
+      setCheckoutSuccess,
+      setErrorMessage,
+    ],
+  );
+
+  return { handleZuoraSubmit };
+}

package/src/components/checkout/steps/payment/zuora/zuora.utils.ts

@@ -0,0 +1,72 @@
+import { Currency } from '@stigg/js-client-sdk';
+
+// Zuora Payment Form v3 API types
+declare global {
+  interface Window {
+    Zuora: (publishableKey: string) => ZuoraInstance;
+  }
+}
+
+export type ZuoraInstance = {
+  createPaymentForm: (config: ZuoraPaymentFormConfig) => Promise<ZuoraPaymentForm>;
+};
+
+export type ZuoraPaymentFormConfig = {
+  locale?: string;
+  region?: string;
+  currency?: string;
+  amount?: string;
+  profile?: string;
+  createPaymentSession: () => Promise<string>;
+  onComplete: (result: ZuoraPaymentResult) => Promise<void>;
+};
+
+export type ZuoraPaymentForm = {
+  mount: (containerId: string) => void;
+};
+
+export type ZuoraPaymentResult = {
+  success: boolean;
+  paymentMethodId?: string;
+  paymentId?: string;
+  error?: {
+    type: string;
+    code: string;
+    message: string;
+  };
+};
+
+export function isZuoraLibraryAvailable(): boolean {
+  return !!window.Zuora;
+}
+
+export function loadZuoraLibrary() {
+  const script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = 'https://js.zuora.com/payment/v3/zuora.js';
+  script.async = true;
+
+  script.onerror = () => {
+    throw new Error('Failed to load Zuora library');
+  };
+
+  document.head.appendChild(script);
+}
+
+export function createZuoraPaymentFormConfig(
+  createPaymentSession: () => Promise<string>,
+  onComplete: (result: ZuoraPaymentResult) => Promise<void>,
+  currency: Currency,
+  billingCountryCode?: string,
+): ZuoraPaymentFormConfig {
+  const AUTH_AMOUNT = '1';
+
+  return {
+    locale: billingCountryCode || 'en',
+    region: billingCountryCode?.toUpperCase() || 'US',
+    currency,
+    amount: AUTH_AMOUNT,
+    createPaymentSession,
+    onComplete,
+  };
+}