@stigg/react-sdk 4.4.0-beta.9 → 4.4.1

package/dist/stories/mocks/checkout/consts.d.ts

@@ -0,0 +1,11 @@
+export declare const BASE_FEE_MONTHLY = 200;
+export declare const BASE_FEE_YEARLY: number;
+export declare const TIERS: number[];
+export declare const TIERS_PRICE_MONTHLY: number[];
+export declare const TIERS_PRICE_YEARLY: number[];
+export declare const PER_UNIT_PRICE_MONTHLY = 12;
+export declare const PER_UNIT_PRICE_YEARLY: number;
+export declare const ADDON_PRICE_MONTHLY = 50;
+export declare const ADDON_PRICE_YEARLY: number;
+export declare const STRIPE_MOCK_ACCOUNT_ID = "acct_1NnHoQG6EyqgvTaj";
+export declare const STRIPE_MOCK_ACCOUNT_PK = "pk_test_51NnHoQG6EyqgvTajznajopWC01AozNtq7zgySeQ1qx4PH9TAXvMj0TnbZvYT3yOt46jbQAcCDs1EU2QKcfG8eEoO00tlW0Jp3r";

package/dist/stories/mocks/checkout/mockCheckoutPreview.d.ts

@@ -0,0 +1,2 @@
+import { PreviewSubscription, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
+export declare function mockPreviewSubscription(input: PreviewSubscription): SubscriptionPreviewV2;

package/dist/stories/mocks/checkout/mockCheckoutState.d.ts

@@ -0,0 +1,2 @@
+import { GetCheckoutState, GetCheckoutStateResults } from '../../../../../js-client-sdk';
+export declare function mockCheckoutState(params: GetCheckoutState): GetCheckoutStateResults;

package/dist/theme/getResolvedTheme.d.ts

@@ -4,6 +4,7 @@ export declare const getResolvedTheme: (customizedTheme?: {
     palette?: {
         primary?: string | undefined;
         primaryDark?: string | undefined;
+        primaryLight?: string | undefined;
         backgroundPaper?: string | undefined;
         backgroundHighlight?: string | undefined;
         backgroundSection?: string | undefined;

package/dist/theme/types.d.ts

@@ -9,6 +9,7 @@ export declare type StiggTheme = {
     palette: {
         primary: string;
         primaryDark: string;
+        primaryLight: string;
         backgroundPaper: string;
         backgroundHighlight: string;
         backgroundSection: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.0-beta.9",
+  "version": "4.4.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -20,6 +20,7 @@
     "analyze": "size-limit --why",
     "storybook": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
     "build-storybook": "build-storybook",
+    "prepare": "husky install",
     "docs": "typedoc",
     "link-sdk": "yarn link && cd node_modules/react && yarn link && cd ../../node_modules/react-dom && yarn link && cd ../../",
     "publish-storybook": "export NODE_OPTIONS=--openssl-legacy-provider && yarn build-storybook && npx chromatic --project-token=cbd1660d8132"
@@ -32,6 +33,12 @@
       "pre-commit": "yarn lint"
     }
   },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "prettier --check",
+      "eslint --cache --max-warnings=0 --fix"
+    ]
+  },
   "name": "@stigg/react-sdk",
   "author": "Stigg",
   "module": "dist/react-sdk.esm.js",
@@ -51,6 +58,7 @@
     "@commitlint/config-conventional": "^17.0.3",
     "@rollup/plugin-image": "^2.1.1",
     "@size-limit/preset-small-lib": "^7.0.8",
+    "@stigg/eslint-config-stigg": "^0.0.7",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-interactions": "^6.5.9",
@@ -64,14 +72,29 @@
     "@types/color": "^3.0.3",
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
-    "@types/react-lottie":"^1.2.6",
+    "@types/react-lottie": "^1.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "autoprefixer": "^10.4.14",
     "babel-jest": "^28.1.2",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.11.4",
     "cssnano": "^6.0.1",
+    "eslint": "^7.11.0",
+    "eslint-config-airbnb": "^18.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^25.3.2",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^7.0.4",
+    "lint-staged": "^14.0.1",
     "postcss": "^8.4.24",
+    "prettier": "^3.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rollup-plugin-postcss": "^4.0.2",
@@ -80,28 +103,13 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typedoc": "^0.23.7",
-    "typescript": "^4.6.3",
-    "prettier": "^3.0.2",
-    "eslint": "^7.11.0",
-    "@stigg/eslint-config-stigg": "^0.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
-    "eslint-config-airbnb": "^18.0.4",
-    "eslint-config-airbnb-typescript": "^16.1.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^25.3.2",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-unused-imports": "^2.0.0"
+    "typescript": "^4.6.3"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.10.13",
-    "@stigg/js-client-sdk": "2.22.0",
+    "@stigg/js-client-sdk": "2.23.1",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",
@@ -121,5 +129,5 @@
     "styled-typography": "^1.0.3"
   },
   "readme": "ERROR: No README data found!",
-  "_id": "@stigg/react-sdk@1.0.0"
+  "_id": "@stigg/react-sdk@0.18.0"
 }

package/src/assets/coupon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="tag--tags-bookmark-favorite">
+<path id="Vector" d="M1.26995 11.9426L6.05743 16.7301C6.2305 16.903 6.4651 17.0001 6.7097 17.0001C6.95431 17.0001 7.18891 16.903 7.36198 16.7301L16.8631 7.22895C16.9108 7.18332 16.9478 7.12758 16.9712 7.06583C16.9946 7.00408 17.0039 6.93787 16.9985 6.87205L16.2724 2.15839C16.2664 2.04607 16.2192 1.93992 16.1396 1.86038C16.0601 1.78085 15.9539 1.73357 15.8416 1.72764L11.128 1.00152C11.0622 0.996055 10.9959 1.00538 10.9342 1.0288C10.8724 1.05222 10.8167 1.08916 10.7711 1.1369L1.26995 10.638C1.09709 10.8111 1 11.0457 1 11.2903C1 11.5349 1.09709 11.7695 1.26995 11.9426Z" stroke="#327EEE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M12.5548 6.05884C12.3916 6.05884 12.2351 5.99401 12.1197 5.87861C12.0043 5.76321 11.9395 5.60669 11.9395 5.44348C11.9395 5.28028 12.0043 5.12376 12.1197 5.00836C12.2351 4.89296 12.3916 4.82812 12.5548 4.82812C12.718 4.82812 12.8745 4.89296 12.9899 5.00836C13.1053 5.12376 13.1702 5.28028 13.1702 5.44348C13.1702 5.60669 13.1053 5.76321 12.9899 5.87861C12.8745 5.99401 12.718 6.05884 12.5548 6.05884Z" stroke="#327EEE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/pay-as-you-go-charge.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1889_12169)">
+<path d="M11.4286 7.42578L8 13.1401" stroke="#7586B0" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.857 13.1412C15.3274 12.0123 15.5118 10.7848 15.3938 9.56751C15.2758 8.35027 14.8592 7.18097 14.1808 6.16341C13.5024 5.14585 12.5833 4.31152 11.5051 3.73446C10.4268 3.1574 9.22281 2.85547 7.99986 2.85547C6.77691 2.85547 5.57288 3.1574 4.49463 3.73446C3.41639 4.31152 2.49729 5.14585 1.81892 6.16341C1.14055 7.18097 0.723889 8.35027 0.605928 9.56751C0.487968 10.7848 0.672354 12.0123 1.14272 13.1412H14.857Z" stroke="#7586B0" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1889_12169">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/checkout/Checkout.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { CheckoutProvider, CheckoutProviderProps } from './CheckoutProvider';
 import { CheckoutContainer, CheckoutContainerProps } from './CheckoutContainer';
+import { CheckoutMockProps } from './types';
 
-export type CheckoutProps = CheckoutProviderProps & CheckoutContainerProps;
+export type CheckoutProps = CheckoutProviderProps & CheckoutContainerProps & CheckoutMockProps;
 
 export const Checkout = ({
   textOverrides,
@@ -13,6 +14,7 @@ export const Checkout = ({
   billingCountryCode,
   billableFeatures,
   billingInformation,
+  onMockCheckoutState,
   ...containerProps
 }: CheckoutProps) => {
   return (
@@ -24,7 +26,8 @@ export const Checkout = ({
       preferredBillingPeriod={preferredBillingPeriod}
       billingCountryCode={billingCountryCode}
       billableFeatures={billableFeatures}
-      billingInformation={billingInformation}>
+      billingInformation={billingInformation}
+      onMockCheckoutState={onMockCheckoutState}>
       <CheckoutContainer {...containerProps} />
     </CheckoutProvider>
   );

package/src/components/checkout/CheckoutContainer.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Elements } from '@stripe/react-stripe-js';
-import { ApplySubscription, BillingAddress, CheckoutStatePlan, PricingType } from '@stigg/js-client-sdk';
+import { PricingType, BillingAddress, ApplySubscription, CheckoutStatePlan } from '@stigg/js-client-sdk';
 import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
 import { CheckoutProgressBar } from './progressBar/CheckoutProgressBar';
 import { CheckoutSummary, CheckoutSummarySkeleton } from './summary';
 import { CheckoutStep, CheckoutStepKey, useCheckoutModel, useProgressBarModel } from './hooks';
-import { PlanHeader } from './planHeader';
 import { CheckoutAddonsStep } from './steps/addons';
 import { PaymentStep } from './steps/payment';
 import { useStripeIntegration } from './steps/payment/stripe';
@@ -13,19 +12,22 @@ import { CheckoutPlanStep } from './steps/plan';
 import { useCheckoutContext } from './CheckoutProvider';
 import { ContentLoadingSkeleton } from './components';
 import { DowngradeToFreePlan } from './components/DowngradeToFreeContainer';
+import { MockCheckoutPreviewCallback } from './types';
 
 type StepProps = {
-  allowChangePlan?: boolean;
   content: React.ReactNode;
 };
 
+type StripeClientSecret = { clientSecret: string };
+type StripeManualMode = { mode: 'setup' | 'payment' | 'subscription'; currency: string };
+
 const getStepProps = (
   currentStep: CheckoutStep,
-  { onBillingAddressChange }: Pick<CheckoutContainerProps, 'onBillingAddressChange'>,
+  { onBillingAddressChange, onChangePlan }: Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'onChangePlan'>,
 ): StepProps => {
   switch (currentStep.key) {
     case CheckoutStepKey.PLAN:
-      return { allowChangePlan: true, content: <CheckoutPlanStep /> };
+      return { content: <CheckoutPlanStep onChangePlan={onChangePlan} /> };
     case CheckoutStepKey.ADDONS:
       return { content: <CheckoutAddonsStep /> };
     case CheckoutStepKey.PAYMENT:
@@ -48,6 +50,7 @@ export type CheckoutContainerProps = {
   onBillingAddressChange?: (params: { billingAddress: BillingAddress }) => Promise<void>;
   disablePromotionCode?: boolean;
   disableSuccessAnimation?: boolean;
+  onMockCheckoutPreview?: MockCheckoutPreviewCallback;
 };
 
 export function CheckoutContainer({
@@ -57,6 +60,7 @@ export function CheckoutContainer({
   onBillingAddressChange,
   disablePromotionCode,
   disableSuccessAnimation,
+  onMockCheckoutPreview,
 }: CheckoutContainerProps) {
   const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
   const [{ stiggTheme, widgetState }] = useCheckoutContext();
@@ -72,7 +76,7 @@ export function CheckoutContainer({
     !!activeSubscription &&
     activeSubscription.pricingType !== PricingType.Free;
 
-  const { content, allowChangePlan } = getStepProps(currentStep, { onBillingAddressChange });
+  const { content } = getStepProps(currentStep, { onBillingAddressChange, onChangePlan });
 
   const checkoutContent = (
     <>
@@ -81,23 +85,25 @@ export function CheckoutContainer({
           checkoutLocalization={checkoutLocalization}
           freePlan={plan!}
           activeSubscription={activeSubscription!}
-          allowChangePlan={allowChangePlan}
+          allowChangePlan
           onChangePlan={onChangePlan}
         />
       ) : (
-        <>
-          <PlanHeader allowChangePlan={allowChangePlan} onChangePlan={onChangePlan} />
-          {content}
-        </>
+        <>{content}</>
       )}
     </>
   );
 
+  const stripeElementsMode: StripeClientSecret | StripeManualMode = useMemo(
+    () => (setupIntentClientSecret ? { clientSecret: setupIntentClientSecret } : { mode: 'setup', currency: 'usd' }),
+    [setupIntentClientSecret],
+  );
+
   return (
     <Elements
       stripe={stripePromise}
       options={{
-        clientSecret: setupIntentClientSecret,
+        ...stripeElementsMode,
         appearance: {
           theme: 'stripe',
           variables: {
@@ -121,6 +127,7 @@ export function CheckoutContainer({
               onCheckout={onCheckout}
               onCheckoutCompleted={onCheckoutCompleted}
               isFreeDowngrade={isFreeDowngrade}
+              onMockCheckoutPreview={onMockCheckoutPreview}
             />
           )}
         </CheckoutContent>

package/src/components/checkout/CheckoutProvider.tsx

@@ -19,7 +19,7 @@ import {
 import { CheckoutLocalization, getResolvedCheckoutLocalize } from './textOverrides';
 import { CheckoutTheme, getResolvedCheckoutTheme } from './theme';
 import { StiggTheme } from '../../theme/types';
-import { BillingInformation } from './types';
+import { BillingInformation, MockCheckoutStateCallback } from './types';
 
 export interface CheckoutContextState {
   checkout?: GetCheckoutStateResults | null;
@@ -80,6 +80,7 @@ export type CheckoutProviderProps = {
   billingCountryCode?: string;
   billableFeatures?: BillableFeature[];
   billingInformation?: BillingInformation;
+  onMockCheckoutState?: MockCheckoutStateCallback;
 };
 
 export function CheckoutProvider({
@@ -92,10 +93,11 @@ export function CheckoutProvider({
   planId,
   billingCountryCode,
   billingInformation,
+  onMockCheckoutState,
 }: {
   children: React.ReactNode;
 } & CheckoutProviderProps) {
-  const { checkout, isLoading } = useLoadCheckout({ resourceId, planId, billingCountryCode });
+  const { checkout, isLoading } = useLoadCheckout({ resourceId, planId, billingCountryCode, onMockCheckoutState });
   const configuration: CustomizedTheme | undefined = checkout?.configuration
     ? mapCheckoutConfiguration(checkout.configuration)
     : undefined;
@@ -134,7 +136,7 @@ export function CheckoutProvider({
       addonsStep,
       paymentStep,
       resourceId: checkout?.resource?.id,
-      widgetState: { readOnly: false, isLoadingCheckoutData: isLoading },
+      widgetState: { readOnly: false, isValid: true, isLoadingCheckoutData: isLoading },
     };
 
     return initialState;

package/src/components/checkout/components/DowngradeToFreeContainer.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { StyledArrowRightIcon } from '../planHeader/PlanHeader.style';
 import styled from '@emotion/styled/macro';
 import { Alert, Box } from '@mui/material';
-import { Typography } from '../../common/Typography';
 import { CheckoutStatePlan, Subscription } from '@stigg/js-client-sdk';
-import { Currency, BillingPeriod } from '@stigg/js-client-sdk';
-import { currencyPriceFormatter } from '../../utils/currencyUtils';
+import { StyledArrowRightIcon } from './StyledArrow';
+import { Typography } from '../../common/Typography';
 import { CheckoutLocalization } from '../textOverrides';
 import { CheckoutContainerProps } from '../CheckoutContainer';
 import { ChangePlanButton } from './ChangePlanButton';
@@ -26,40 +24,29 @@ export const DowngradeToFreePlanBox = styled(Box)`
 `;
 
 export const DowngradeToFreeContent = ({
+  headerText,
   planName,
-  totalPrice,
-  billingPeriod,
+  priceText,
 }: {
+  headerText: string;
   planName: string;
-  totalPrice?: {
-    amount: number;
-    currency: Currency;
-  };
-  billingPeriod?: BillingPeriod;
+  priceText: string;
 }) => {
-  const priceText = totalPrice
-    ? currencyPriceFormatter({ amount: totalPrice.amount, currency: totalPrice.currency })
-    : 'Free';
-
-  const billingPeriodText = billingPeriod ? ` / Paid ${billingPeriod.toLowerCase()}` : '';
   return (
-    <DowngradeToFreePlanBox className="stigg-checkout-free-downgrade-plan-box">
-      <Typography className="stigg-checkout-downgrade-to-free-text-plan" color="secondary">
+    <DowngradeToFreePlanBox className="stigg-checkout-downgrade-to-free-container">
+      <Typography
+        className="stigg-checkout-downgrade-to-free-text-header"
+        style={{ opacity: 0.8 }}
+        variant="caption"
+        color="disabled">
+        {headerText}
+      </Typography>
+      <Typography className="stigg-checkout-downgrade-to-free-plan-name" bold variant="h3" color="primary">
         {planName}
       </Typography>
-      <div>
-        <Typography
-          className="stigg-checkout-downgrade-to-free-text-price"
-          span
-          bold={true}
-          variant="h3"
-          color="primary">
-          {priceText}
-        </Typography>
-        <Typography className="stigg-checkout-downgrade-to-free-text-billing-period" span color="secondary">
-          {billingPeriodText}
-        </Typography>
-      </div>
+      <Typography className="stigg-checkout-downgrade-to-free-price-text" color="secondary">
+        {priceText}
+      </Typography>
     </DowngradeToFreePlanBox>
   );
 };
@@ -91,19 +78,25 @@ export const DowngradeToFreePlan = ({
     );
   }
 
+  const paidBillingPeriod =
+    activeSubscription.prices.length > 0 ? activeSubscription.prices[0].billingPeriod : undefined;
+
   return (
     <>
       <DowngradeToFreeAlert action={alertAction} className="stigg-checkout-downgrade-to-free-alert" severity="info">
         <Typography span color="secondary">
-          {checkoutLocalization.downgradeToFreeAlertText({ plan: activeSubscription.plan })}
+          {checkoutLocalization.downgradeToFree.alertText({ plan: activeSubscription.plan })}
         </Typography>
       </DowngradeToFreeAlert>
 
       <DowngradeToFreePlansContainer className="stigg-checkout-downgrade-to-free-plans-container">
         <DowngradeToFreeContent
-          planName={activeSubscription.plan.displayName}
-          totalPrice={activeSubscription.totalPrice?.total}
-          billingPeriod={activeSubscription.prices[0].billingPeriod}
+          headerText={checkoutLocalization.downgradeToFree.paidPlanHeader({ plan: activeSubscription.plan })}
+          planName={checkoutLocalization.downgradeToFree.paidPlanName({ plan: activeSubscription.plan })}
+          priceText={checkoutLocalization.downgradeToFree.paidPlanPriceText({
+            plan: activeSubscription.plan,
+            billingPeriod: paidBillingPeriod,
+          })}
         />
 
         <StyledArrowRightIcon
@@ -111,7 +104,11 @@ export const DowngradeToFreePlan = ({
           style={{ margin: 'auto 16px', minWidth: '16px' }}
         />
 
-        <DowngradeToFreeContent planName={freePlan.displayName} />
+        <DowngradeToFreeContent
+          headerText={checkoutLocalization.downgradeToFree.freePlanHeader({ plan: freePlan })}
+          planName={checkoutLocalization.downgradeToFree.freePlanName({ plan: freePlan })}
+          priceText={checkoutLocalization.downgradeToFree.freePlanPriceText({ plan: freePlan })}
+        />
       </DowngradeToFreePlansContainer>
     </>
   );

package/src/components/checkout/components/InputField.tsx

@@ -19,4 +19,7 @@ export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => (
     color: theme.stigg.palette.text.primary,
     ...theme.stigg.typography.body,
   },
+  '& .Mui-error': {
+    fontFamily: theme.stigg.typography.fontFamily,
+  },
 }));

package/src/components/checkout/components/StyledArrow.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled/macro';
+
+import ArrowRightIcon from '../../../assets/arrow-right.svg';
+
+export const StyledArrowRightIcon = styled(ArrowRightIcon)`
+  path {
+    stroke: ${({ theme }) => theme.stigg.palette.text.secondary};
+  }
+`;

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

@@ -3,6 +3,7 @@ import { useCheckoutContext } from '../CheckoutProvider';
 export type WidgetState = {
   readOnly?: boolean;
   isLoadingCheckoutData?: boolean;
+  isValid?: boolean;
 };
 
 function useCheckoutState() {
@@ -19,14 +20,23 @@ function useSetWidgetReadonly() {
     });
 }
 
+function useSetIsValid() {
+  const [, setState] = useCheckoutContext();
+
+  return (isValid: boolean) =>
+    setState((draft) => {
+      draft.widgetState.isValid = isValid;
+    });
+}
+
 export function useCheckoutModel() {
   const { checkoutState, widgetState, checkoutLocalization } = useCheckoutState();
-  const setWidgetReadOnly = useSetWidgetReadonly();
 
   return {
     checkoutState,
     widgetState,
     checkoutLocalization,
-    setWidgetReadOnly,
+    setWidgetReadOnly: useSetWidgetReadonly(),
+    setIsValid: useSetIsValid(),
   };
 }

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

@@ -2,14 +2,16 @@ import { GetCheckoutStateResults } from '@stigg/js-client-sdk';
 import { useEffect, useState } from 'react';
 import logger from '../../../services/logger';
 import { useStiggContext } from '../../StiggProvider';
+import { MockCheckoutStateCallback } from '../types';
 
 type UseLoadCheckoutProps = {
   planId: string;
   resourceId?: string;
   billingCountryCode?: string;
+  onMockCheckoutState?: MockCheckoutStateCallback;
 };
 
-export function useLoadCheckout({ planId, resourceId, billingCountryCode }: UseLoadCheckoutProps) {
+export function useLoadCheckout({ planId, resourceId, billingCountryCode, onMockCheckoutState }: UseLoadCheckoutProps) {
   const { stigg } = useStiggContext();
   const [isLoading, setIsLoading] = useState(true);
   const [checkout, setCheckout] = useState<GetCheckoutStateResults | null>();
@@ -26,11 +28,17 @@ export function useLoadCheckout({ planId, resourceId, billingCountryCode }: UseL
       }
     };
 
+    if (onMockCheckoutState) {
+      setIsLoading(false);
+      setCheckout(onMockCheckoutState({ planId, resourceId, billingCountryCode }));
+      return;
+    }
+
     if (stigg.isCustomerLoaded) {
       setIsLoading(true);
       void loadCheckout();
     }
-  }, [stigg, stigg.isCustomerLoaded, resourceId, planId, billingCountryCode]);
+  }, [stigg, stigg.isCustomerLoaded, resourceId, planId, billingCountryCode, onMockCheckoutState]);
 
   return {
     checkout,