@stigg/react-sdk 4.4.0-beta.1 → 4.4.0-beta.11

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.1",
+  "version": "4.4.0-beta.11",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -101,7 +101,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.10.13",
-    "@stigg/js-client-sdk": "2.21.0",
+    "@stigg/js-client-sdk": "2.23.0",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@types/styled-components": "^5.1.26",

package/src/assets/payment-method.svg

@@ -1,11 +1,4 @@
-<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_239_13697)">
-<path d="M22 0H2C0.89543 0 0 0.89543 0 2V14C0 15.1046 0.89543 16 2 16H22C23.1046 16 24 15.1046 24 14V2C24 0.89543 23.1046 0 22 0Z" fill="#C6C6C7"/>
-</g>
-<path opacity="0.3" d="M18.75 12.4286H16.5C16.0125 12.4286 15.75 12.2 15.75 11.6667C15.75 11.1334 16.0125 10.9048 16.5 10.9048H18.75C19.2375 10.9048 19.5 11.1334 19.5 11.6667C19.5 12.2 19.2375 12.4286 18.75 12.4286ZM14.25 12.4286H12C11.5125 12.4286 11.25 12.2 11.25 11.6667C11.25 11.1334 11.5125 10.9048 12 10.9048H14.25C14.7375 10.9048 15 11.1334 15 11.6667C15 12.2 14.7375 12.4286 14.25 12.4286ZM9.75 12.4286H7.5C7.0125 12.4286 6.75 12.2 6.75 11.6667C6.75 11.1334 7.0125 10.9048 7.5 10.9048H9.75C10.2375 10.9048 10.5 11.1334 10.5 11.6667C10.5 12.2 10.2375 12.4286 9.75 12.4286ZM5.25 12.4286H3C2.5125 12.4286 2.25 12.2 2.25 11.6667C2.25 11.1334 2.5125 10.9048 3 10.9048H5.25C5.7375 10.9048 6 11.1334 6 11.6667C6 12.2 5.7375 12.4286 5.25 12.4286Z" fill="black"/>
-<defs>
-<clipPath id="clip0_239_13697">
-<rect width="24" height="16" fill="white"/>
-</clipPath>
-</defs>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.1667 4H2.83333C1.82081 4 1 4.89543 1 6V18C1 19.1046 1.82081 20 2.83333 20H21.1667C22.1792 20 23 19.1046 23 18V6C23 4.89543 22.1792 4 21.1667 4Z" fill="#C6C6C7"/>
+<path opacity="0.3" d="M19.75 16.4286H17.5C17.0125 16.4286 16.75 16.2 16.75 15.6667C16.75 15.1334 17.0125 14.9048 17.5 14.9048H19.75C20.2375 14.9048 20.5 15.1334 20.5 15.6667C20.5 16.2 20.2375 16.4286 19.75 16.4286ZM15.25 16.4286H13C12.5125 16.4286 12.25 16.2 12.25 15.6667C12.25 15.1334 12.5125 14.9048 13 14.9048H15.25C15.7375 14.9048 16 15.1334 16 15.6667C16 16.2 15.7375 16.4286 15.25 16.4286ZM10.75 16.4286H8.5C8.0125 16.4286 7.75 16.2 7.75 15.6667C7.75 15.1334 8.0125 14.9048 8.5 14.9048H10.75C11.2375 14.9048 11.5 15.1334 11.5 15.6667C11.5 16.2 11.2375 16.4286 10.75 16.4286ZM6.25 16.4286H4C3.5125 16.4286 3.25 16.2 3.25 15.6667C3.25 15.1334 3.5125 14.9048 4 14.9048H6.25C6.7375 14.9048 7 15.1334 7 15.6667C7 16.2 6.7375 16.4286 6.25 16.4286Z" fill="black"/>
 </svg>

package/src/components/checkout/Checkout.tsx

@@ -12,6 +12,7 @@ export const Checkout = ({
   preferredBillingPeriod,
   billingCountryCode,
   billableFeatures,
+  billingInformation,
   ...containerProps
 }: CheckoutProps) => {
   return (
@@ -23,7 +24,7 @@ export const Checkout = ({
       preferredBillingPeriod={preferredBillingPeriod}
       billingCountryCode={billingCountryCode}
       billableFeatures={billableFeatures}
-    >
+      billingInformation={billingInformation}>
       <CheckoutContainer {...containerProps} />
     </CheckoutProvider>
   );

package/src/components/checkout/CheckoutContainer.style.ts

@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 export const CheckoutLayout = styled.div`
   margin: auto;
   width: 100%;
+  min-height: 760px;
   max-width: 920px;
   display: flex;
   position: relative;

package/src/components/checkout/CheckoutContainer.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Elements } from '@stripe/react-stripe-js';
-import { ApplySubscription, CheckoutStatePlan } from '@stigg/js-client-sdk';
+import { ApplySubscription, BillingAddress, CheckoutStatePlan, PricingType } from '@stigg/js-client-sdk';
 import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
 import { CheckoutProgressBar } from './progressBar/CheckoutProgressBar';
 import { CheckoutSummary, CheckoutSummarySkeleton } from './summary';
-import { useProgressBarModel } from './hooks';
+import { CheckoutStep, CheckoutStepKey, useCheckoutModel, useProgressBarModel } from './hooks';
 import { PlanHeader } from './planHeader';
 import { CheckoutAddonsStep } from './steps/addons';
 import { PaymentStep } from './steps/payment';
@@ -12,22 +12,24 @@ import { useStripeIntegration } from './steps/payment/stripe';
 import { CheckoutPlanStep } from './steps/plan';
 import { useCheckoutContext } from './CheckoutProvider';
 import { ContentLoadingSkeleton } from './components';
-
-// import { SurpriseStep } from './steps/surprise/SurpriseStep';
+import { DowngradeToFreePlan } from './components/DowngradeToFreeContainer';
 
 type StepProps = {
   allowChangePlan?: boolean;
   content: React.ReactNode;
 };
 
-const getStepProps = (step: number): StepProps => {
-  switch (step) {
-    case 0:
+const getStepProps = (
+  currentStep: CheckoutStep,
+  { onBillingAddressChange }: Pick<CheckoutContainerProps, 'onBillingAddressChange'>,
+): StepProps => {
+  switch (currentStep.key) {
+    case CheckoutStepKey.PLAN:
       return { allowChangePlan: true, content: <CheckoutPlanStep /> };
-    case 1:
+    case CheckoutStepKey.ADDONS:
       return { content: <CheckoutAddonsStep /> };
-    case 2:
-      return { content: <PaymentStep /> };
+    case CheckoutStepKey.PAYMENT:
+      return { content: <PaymentStep onBillingAddressChange={onBillingAddressChange} /> };
     default:
       return { content: null };
   }
@@ -43,26 +45,51 @@ export type CheckoutContainerProps = {
   onCheckout?: (params: OnCheckoutParams) => Promise<CheckoutResult>;
   onCheckoutCompleted: (params: OnCheckoutCompletedParams) => Promise<void>;
   onChangePlan?: (params: { currentPlan: CheckoutStatePlan | undefined }) => void;
+  onBillingAddressChange?: (params: { billingAddress: BillingAddress }) => Promise<void>;
+  disablePromotionCode?: boolean;
+  disableSuccessAnimation?: boolean;
 };
 
-export function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePlan }: CheckoutContainerProps) {
+export function CheckoutContainer({
+  onCheckout,
+  onCheckoutCompleted,
+  onChangePlan,
+  onBillingAddressChange,
+  disablePromotionCode,
+  disableSuccessAnimation,
+}: CheckoutContainerProps) {
   const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
   const [{ stiggTheme, widgetState }] = useCheckoutContext();
-  const { progressBarState } = useProgressBarModel();
-  const { activeStep } = progressBarState;
+  const { currentStep } = useProgressBarModel();
+
   const { isLoadingCheckoutData } = widgetState;
 
-  // uncomment for fun!
-  // if (activeStep > 2) {
-  //   return <SurpriseStep />;
-  // }
+  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { plan, activeSubscription } = checkoutState || {};
+  const isFreeDowngrade =
+    !!plan &&
+    plan.pricingType === PricingType.Free &&
+    !!activeSubscription &&
+    activeSubscription.pricingType !== PricingType.Free;
 
-  const { content, allowChangePlan } = getStepProps(activeStep);
+  const { content, allowChangePlan } = getStepProps(currentStep, { onBillingAddressChange });
 
   const checkoutContent = (
     <>
-      <PlanHeader allowChangePlan={allowChangePlan} onChangePlan={onChangePlan} />
-      {content}
+      {isFreeDowngrade ? (
+        <DowngradeToFreePlan
+          checkoutLocalization={checkoutLocalization}
+          freePlan={plan!}
+          activeSubscription={activeSubscription!}
+          allowChangePlan={allowChangePlan}
+          onChangePlan={onChangePlan}
+        />
+      ) : (
+        <>
+          <PlanHeader allowChangePlan={allowChangePlan} onChangePlan={onChangePlan} />
+          {content}
+        </>
+      )}
     </>
   );
 
@@ -82,15 +109,19 @@ export function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePla
         },
       }}>
       <CheckoutLayout className="stigg-checkout-layout">
-        <CheckoutProgressBar />
+        {!isFreeDowngrade && <CheckoutProgressBar />}
         <CheckoutContent>
-          <CheckoutPanel>
-            {isLoadingCheckoutData && <ContentLoadingSkeleton />}
-            {!isLoadingCheckoutData && checkoutContent}
-          </CheckoutPanel>
-          {isLoadingCheckoutData && <CheckoutSummarySkeleton />}
-          {!isLoadingCheckoutData && (
-            <CheckoutSummary onCheckout={onCheckout} onCheckoutCompleted={onCheckoutCompleted} />
+          <CheckoutPanel>{isLoadingCheckoutData ? <ContentLoadingSkeleton /> : checkoutContent}</CheckoutPanel>
+          {isLoadingCheckoutData ? (
+            <CheckoutSummarySkeleton />
+          ) : (
+            <CheckoutSummary
+              disablePromotionCode={disablePromotionCode}
+              disableSuccessAnimation={disableSuccessAnimation}
+              onCheckout={onCheckout}
+              onCheckoutCompleted={onCheckoutCompleted}
+              isFreeDowngrade={isFreeDowngrade}
+            />
           )}
         </CheckoutContent>
       </CheckoutLayout>

package/src/components/checkout/CheckoutProvider.tsx

@@ -1,8 +1,6 @@
 import { produce } from 'immer';
-import React, { useCallback, useContext, useMemo, useState } from 'react';
-
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { BillableFeature, BillingPeriod, GetCheckoutStateResults } from '@stigg/js-client-sdk';
-
 import { CustomizedTheme, SdkThemeProvider, useStiggTheme } from '../../theme/Theme';
 import { DeepPartial } from '../../types';
 import { mapCheckoutConfiguration } from '../common/mapExternalTheme';
@@ -21,6 +19,7 @@ import {
 import { CheckoutLocalization, getResolvedCheckoutLocalize } from './textOverrides';
 import { CheckoutTheme, getResolvedCheckoutTheme } from './theme';
 import { StiggTheme } from '../../theme/types';
+import { BillingInformation } from './types';
 
 export interface CheckoutContextState {
   checkout?: GetCheckoutStateResults | null;
@@ -58,12 +57,16 @@ const CheckoutContextProvider: React.FC<{ children: React.ReactNode; initialStat
 }) => {
   const [state, innerSetState] = useState(initialState);
 
+  useEffect(() => {
+    innerSetState(initialState);
+  }, [initialState]);
+
   const setState = useCallback(
     (updater: (state: CheckoutContextState) => void) => innerSetState((old) => produce(old, (draft) => updater(draft))),
     [innerSetState],
   );
 
-  const [contextValue, setContextValue] = useMemo(() => [state, setState], [state]);
+  const [contextValue, setContextValue] = useMemo(() => [state, setState], [setState, state]);
 
   return <CheckoutContext.Provider value={[contextValue, setContextValue]}>{children}</CheckoutContext.Provider>;
 };
@@ -76,17 +79,19 @@ export type CheckoutProviderProps = {
   preferredBillingPeriod?: BillingPeriod;
   billingCountryCode?: string;
   billableFeatures?: BillableFeature[];
+  billingInformation?: BillingInformation;
 };
 
 export function CheckoutProvider({
   children,
   textOverrides,
   theme,
+  preferredBillingPeriod,
+  billableFeatures,
   resourceId,
   planId,
-  preferredBillingPeriod,
   billingCountryCode,
-  billableFeatures,
+  billingInformation,
 }: {
   children: React.ReactNode;
 } & CheckoutProviderProps) {
@@ -111,7 +116,10 @@ export function CheckoutProvider({
       billingPeriod: planStep.billingPeriod,
       activeSubscription: checkout?.activeSubscription,
     });
-    const paymentStep = getPaymentStepInitialState({ customer: checkout?.customer });
+    const paymentStep = getPaymentStepInitialState({
+      customer: checkout?.customer,
+      taxPercentage: billingInformation?.taxDetails?.taxPercentage,
+    });
     const progressBar = getProgressBarInitialState({
       availableAddons: isLoading ? undefined : addonsStep.availableAddons,
     });
@@ -126,20 +134,12 @@ export function CheckoutProvider({
       addonsStep,
       paymentStep,
       resourceId: checkout?.resource?.id,
-      widgetState: { readOnly: false, isLoadingCheckoutData: isLoading },
+      widgetState: { readOnly: false, isValid: true, isLoadingCheckoutData: isLoading },
     };
 
     return initialState;
-  }, [
-    theme,
-    textOverrides,
-    preferredBillingPeriod,
-    billingCountryCode,
-    billableFeatures,
-    globalTheme,
-    checkout,
-    isLoading,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preferredBillingPeriod, billingCountryCode, checkout, isLoading, billingInformation?.taxDetails?.taxPercentage]);
 
   return (
     <SdkThemeProvider key={checkout?.plan.id} componentTheme={configuration}>

package/src/components/checkout/components/Button.tsx

@@ -1,49 +1,33 @@
 import React from 'react';
 
 import styled from '@emotion/styled/macro';
-import { Button as MuiButton, ButtonProps, css } from '@mui/material';
+import { Button as MuiButton, ButtonProps } from '@mui/material';
 
-export type StyledButtonProps = { $isLoading?: boolean; $success?: boolean; $error?: boolean };
+export type StyledButtonProps = { $success?: boolean; $error?: boolean };
 
-const StyledButton = styled(MuiButton)<StyledButtonProps>`
+const StyledButton = styled(MuiButton, { shouldForwardProp: (prop) => !prop.startsWith('$') })<StyledButtonProps>`
   border-radius: 10px;
   text-transform: none;
 
-  ${({ theme, $isLoading, $success, $error }) => {
-    if ($isLoading) {
-      return css`
-        background-color: ${theme.stigg.palette.primaryDark};
-        cursor: no-drop;
-
-        &:hover {
-          background-color: ${theme.stigg.palette.primaryDark};
-        }
-      `;
-    }
-
+  background-color: ${({ theme, $success, $error }) => {
     if ($success) {
-      return css`
-        background-color: ${theme.stigg.palette.success};
-        cursor: 'default';
-
-        &:hover {
-          background-color: ${theme.stigg.palette.successDark};
-        }
-      `;
+      return theme.stigg.palette.success;
+    } else if ($error) {
+      return theme.stigg.palette.error;
     }
-
-    if ($error) {
-      return css`
-        background-color: ${theme.stigg.palette.error};
-
-        &:hover {
-          background-color: ${theme.stigg.palette.errorDark};
-        }
-      `;
-    }
-
     return '';
-  }}
+  }};
+
+  &:hover {
+    background-color: ${({ theme, $success, $error }) => {
+      if ($success) {
+        return theme.stigg.palette.successDark;
+      } else if ($error) {
+        return theme.stigg.palette.errorDark;
+      }
+      return '';
+    }};
+  }
 `;
 
 export const Button = ({ variant = 'outlined', ...props }: ButtonProps & StyledButtonProps) => {

package/src/components/checkout/components/ChangePlanButton.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@mui/material';
+import { Typography } from '../../common/Typography';
+import React from 'react';
+import { CheckoutLocalization } from '../textOverrides';
+import { ButtonProps } from '@mui/material/Button';
+
+export const ChangePlanButton = ({
+  onClick,
+  checkoutLocalization,
+  size,
+}: {
+  onClick: () => void;
+  checkoutLocalization: CheckoutLocalization;
+  size: ButtonProps['size'];
+}) => {
+  return (
+    <Button
+      className="stigg-checkout-change-plan-button"
+      sx={{ textTransform: 'none' }}
+      variant="text"
+      size={size}
+      onClick={onClick}>
+      <Typography
+        className="stigg-checkout-change-plan-button-text"
+        color="primary.main"
+        variant="body1"
+        style={{ lineHeight: '24px' }}>
+        {checkoutLocalization.changePlan}
+      </Typography>
+    </Button>
+  );
+};

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import { StyledArrowRightIcon } from './StyledArrow';
+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 { CheckoutLocalization } from '../textOverrides';
+import { CheckoutContainerProps } from '../CheckoutContainer';
+import { ChangePlanButton } from './ChangePlanButton';
+
+const DowngradeToFreePlansContainer = styled(Box)`
+  display: flex;
+`;
+
+const DowngradeToFreeAlert = styled(Alert)`
+  margin-bottom: 16px;
+`;
+
+export const DowngradeToFreePlanBox = styled(Box)`
+  padding: 16px;
+  border-radius: 10px;
+  width: 100%;
+  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
+`;
+
+export const DowngradeToFreeContent = ({
+  headerText,
+  planName,
+  priceText,
+}: {
+  headerText: string;
+  planName: string;
+  priceText: string;
+}) => {
+  return (
+    <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>
+      <Typography className="stigg-checkout-downgrade-to-free-price-text" color="secondary">
+        {priceText}
+      </Typography>
+    </DowngradeToFreePlanBox>
+  );
+};
+
+type DowngradeToFreePlanProps = {
+  checkoutLocalization: CheckoutLocalization;
+  activeSubscription: Subscription;
+  freePlan: CheckoutStatePlan;
+  allowChangePlan?: boolean;
+} & Pick<CheckoutContainerProps, 'onChangePlan'>;
+
+export const DowngradeToFreePlan = ({
+  checkoutLocalization,
+  activeSubscription,
+  freePlan,
+  allowChangePlan = false,
+  onChangePlan,
+}: DowngradeToFreePlanProps) => {
+  let alertAction;
+  if (allowChangePlan && onChangePlan) {
+    alertAction = (
+      <ChangePlanButton
+        onClick={() => {
+          onChangePlan({ currentPlan: freePlan });
+        }}
+        checkoutLocalization={checkoutLocalization}
+        size="small"
+      />
+    );
+  }
+
+  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.downgradeToFree.alertText({ plan: activeSubscription.plan })}
+        </Typography>
+      </DowngradeToFreeAlert>
+
+      <DowngradeToFreePlansContainer className="stigg-checkout-downgrade-to-free-plans-container">
+        <DowngradeToFreeContent
+          headerText={checkoutLocalization.downgradeToFree.paidPlanHeader({ plan: activeSubscription.plan })}
+          planName={checkoutLocalization.downgradeToFree.paidPlanName({ plan: activeSubscription.plan })}
+          priceText={checkoutLocalization.downgradeToFree.paidPlanPriceText({
+            plan: activeSubscription.plan,
+            billingPeriod: paidBillingPeriod,
+          })}
+        />
+
+        <StyledArrowRightIcon
+          className="stigg-checkout-downgrade-to-free-arrow"
+          style={{ margin: 'auto 16px', minWidth: '16px' }}
+        />
+
+        <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/Skeletons.style.ts

@@ -2,7 +2,10 @@ import styled from '@emotion/styled/macro';
 import { Grid } from '@mui/material';
 import ReactSkeleton from 'react-loading-skeleton';
 
-export const SkeletonsContainer = styled(Grid)<{ $gap: number; $flexDirection?: 'row' | 'column' }>`
+export const SkeletonsContainer = styled(Grid, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $gap: number;
+  $flexDirection?: 'row' | 'column';
+}>`
   display: flex;
   flex-direction: ${({ $flexDirection }) => $flexDirection || 'row'};
   gap: ${({ $gap }) => $gap}px;

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/usePaymentStepModel.ts

@@ -1,18 +1,27 @@
-import { Customer } from '@stigg/js-client-sdk';
+import { BillingAddress, Customer } from '@stigg/js-client-sdk';
 
 import { useCheckoutContext } from '../CheckoutProvider';
 
 export type PaymentStepState = {
   useNewPaymentMethod: boolean;
   errorMessage?: string;
+  billingAddress?: BillingAddress;
+  taxPercentage?: number;
 };
 
 type GetPaymentStepInitialStateProps = {
   customer?: Customer;
+  taxPercentage?: number;
 };
 
-export function getPaymentStepInitialState({ customer }: GetPaymentStepInitialStateProps): PaymentStepState {
-  return { useNewPaymentMethod: !customer?.paymentMethodDetails };
+export function getPaymentStepInitialState({
+  customer,
+  taxPercentage,
+}: GetPaymentStepInitialStateProps): PaymentStepState {
+  return {
+    useNewPaymentMethod: !customer?.paymentMethodDetails,
+    taxPercentage,
+  };
 }
 
 function useSetUseNewPaymentMethod() {
@@ -33,6 +42,15 @@ function useSetErrorMessage() {
     });
 }
 
+function useSetBillingAddress() {
+  const [, setState] = useCheckoutContext();
+
+  return (billingAddress?: BillingAddress) =>
+    setState((draft) => {
+      draft.paymentStep.billingAddress = billingAddress;
+    });
+}
+
 function usePaymentState() {
   const [{ paymentStep }] = useCheckoutContext();
   return paymentStep;
@@ -45,5 +63,6 @@ export function usePaymentStepModel() {
     ...state,
     setUseNewPaymentMethod: useSetUseNewPaymentMethod(),
     setErrorMessage: useSetErrorMessage(),
+    setBillingAddress: useSetBillingAddress(),
   };
 }