@stigg/react-sdk 4.4.0-beta.3 → 4.4.0-beta.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.0-beta.3",
+  "version": "4.4.0-beta.5",
   "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.22.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 (
@@ -22,7 +23,8 @@ export const Checkout = ({
       planId={planId}
       preferredBillingPeriod={preferredBillingPeriod}
       billingCountryCode={billingCountryCode}
-      billableFeatures={billableFeatures}>
+      billableFeatures={billableFeatures}
+      billingInformation={billingInformation}>
       <CheckoutContainer {...containerProps} />
     </CheckoutProvider>
   );

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 { CheckoutStep, CheckoutStepKey, 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 = (currentStep: CheckoutStep): StepProps => {
+const getStepProps = (
+  currentStep: CheckoutStep,
+  { onBillingAddressChange }: Pick<CheckoutContainerProps, 'onBillingAddressChange'>,
+): StepProps => {
   switch (currentStep.key) {
     case CheckoutStepKey.PLAN:
       return { allowChangePlan: true, content: <CheckoutPlanStep /> };
     case CheckoutStepKey.ADDONS:
       return { content: <CheckoutAddonsStep /> };
     case CheckoutStepKey.PAYMENT:
-      return { content: <PaymentStep /> };
+      return { content: <PaymentStep onBillingAddressChange={onBillingAddressChange} /> };
     default:
       return { content: null };
   }
@@ -43,26 +45,47 @@ 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;
 };
 
-export function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePlan }: CheckoutContainerProps) {
+export function CheckoutContainer({
+  onCheckout,
+  onCheckoutCompleted,
+  onChangePlan,
+  onBillingAddressChange,
+  disablePromotionCode,
+}: CheckoutContainerProps) {
   const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
   const [{ stiggTheme, widgetState }] = useCheckoutContext();
   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(currentStep);
+  const { content, allowChangePlan } = getStepProps(currentStep, { onBillingAddressChange });
 
   const checkoutContent = (
     <>
-      <PlanHeader allowChangePlan={allowChangePlan} onChangePlan={onChangePlan} />
-      {content}
+      {isFreeDowngrade ? (
+        <DowngradeToFreePlan
+          checkoutLocalization={checkoutLocalization}
+          freePlan={plan!}
+          activeSubscription={activeSubscription!}
+        />
+      ) : (
+        <>
+          <PlanHeader allowChangePlan={allowChangePlan} onChangePlan={onChangePlan} />
+          {content}
+        </>
+      )}
     </>
   );
 
@@ -82,15 +105,18 @@ 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}
+              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, 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;
@@ -80,6 +79,7 @@ export type CheckoutProviderProps = {
   preferredBillingPeriod?: BillingPeriod;
   billingCountryCode?: string;
   billableFeatures?: BillableFeature[];
+  billingInformation?: BillingInformation;
 };
 
 export function CheckoutProvider({
@@ -91,6 +91,7 @@ export function CheckoutProvider({
   resourceId,
   planId,
   billingCountryCode,
+  billingInformation,
 }: {
   children: React.ReactNode;
 } & CheckoutProviderProps) {
@@ -115,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,
     });
@@ -135,7 +139,7 @@ export function CheckoutProvider({
 
     return initialState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preferredBillingPeriod, billingCountryCode, checkout, isLoading]);
+  }, [preferredBillingPeriod, billingCountryCode, checkout, isLoading, billingInformation?.taxDetails?.taxPercentage]);
 
   return (
     <SdkThemeProvider key={checkout?.plan.id} componentTheme={configuration}>

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

@@ -0,0 +1,98 @@
+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 { CheckoutLocalization } from '../textOverrides';
+
+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 = ({
+  planName,
+  totalPrice,
+  billingPeriod,
+}: {
+  planName: string;
+  totalPrice?: {
+    amount: number;
+    currency: Currency;
+  };
+  billingPeriod?: BillingPeriod;
+}) => {
+  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">
+        {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>
+    </DowngradeToFreePlanBox>
+  );
+};
+
+export const DowngradeToFreePlan = ({
+  checkoutLocalization,
+  activeSubscription,
+  freePlan,
+}: {
+  checkoutLocalization: CheckoutLocalization;
+  activeSubscription: Subscription;
+  freePlan: CheckoutStatePlan;
+}) => {
+  return (
+    <>
+      <DowngradeToFreeAlert className="stigg-checkout-downgrade-to-free-alert" severity="info">
+        <Typography color="secondary">
+          {checkoutLocalization.downgradeToFreeAlertText({ 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}
+        />
+
+        <StyledArrowRightIcon
+          className="stigg-checkout-downgrade-to-free-arrow"
+          style={{ margin: 'auto 16px', minWidth: '16px' }}
+        />
+
+        <DowngradeToFreeContent planName={freePlan.displayName} />
+      </DowngradeToFreePlansContainer>
+    </>
+  );
+};

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(),
   };
 }

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

@@ -88,11 +88,6 @@ function resolveBillingPeriod({
   const hasMonthlyPrices = plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Monthly);
   const hasAnnualPrices = plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Annually);
 
-  const isUpdate = activeSubscription?.plan?.id === plan?.id;
-  if (isUpdate) {
-    return activeSubscription?.price?.billingPeriod || BillingPeriod.Monthly;
-  }
-
   if (preferredBillingPeriod) {
     if (preferredBillingPeriod === BillingPeriod.Monthly && hasMonthlyPrices) {
       return BillingPeriod.Monthly;
@@ -102,6 +97,11 @@ function resolveBillingPeriod({
     }
   }
 
+  const isUpdate = activeSubscription?.plan?.id === plan?.id;
+  if (isUpdate) {
+    return activeSubscription?.price?.billingPeriod || BillingPeriod.Monthly;
+  }
+
   if (activeSubscription?.price?.billingPeriod) {
     return activeSubscription?.price?.billingPeriod;
   }

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

@@ -1,10 +1,29 @@
 import { useCallback, useEffect, useState } from 'react';
-import { PreviewSubscription, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { BillingAddress, PreviewSubscription, SubscriptionPreview } from '@stigg/js-client-sdk';
 import { useStiggContext } from '../../StiggProvider';
 import { useCheckoutContext } from '../CheckoutProvider';
 import { useCheckoutModel } from './useCheckoutModel';
 import { useSubscriptionModel } from './useSubscriptionModel';
 
+function mapBillingInformation({
+  billingAddress,
+  taxPercentage,
+}: {
+  billingAddress?: BillingAddress;
+  taxPercentage?: number;
+}): Pick<PreviewSubscription, 'billingInformation'> {
+  if (!billingAddress && !taxPercentage) {
+    return {};
+  }
+
+  return {
+    billingInformation: {
+      ...(billingAddress ? { billingAddress } : {}),
+      ...(taxPercentage ? { taxPercentage } : {}),
+    },
+  };
+}
+
 export const usePreviewSubscriptionAction = () => {
   const { stigg } = useStiggContext();
   const subscription = useSubscriptionModel();
@@ -18,6 +37,11 @@ export const usePreviewSubscriptionAction = () => {
       let subscriptionPreview: SubscriptionPreview | null = null;
       let errorMessage: string | null = null;
 
+      const isValid = !subscription.billableFeatures.some(({ quantity }) => quantity === null);
+      if (!isValid) {
+        return { subscriptionPreview };
+      }
+
       try {
         if (customer?.id && plan?.id) {
           const previewSubscriptionProps: PreviewSubscription = {
@@ -29,8 +53,10 @@ export const usePreviewSubscriptionAction = () => {
             promotionCode: promotionCode ?? subscription.promotionCode,
             resourceId,
             billingCountryCode: planStep.billingCountryCode,
-            // TODO: Add billing information
-            // billingInformation, // TaxId / Tax percentage
+            ...mapBillingInformation({
+              billingAddress: subscription.billingAddress,
+              taxPercentage: subscription.taxPercentage,
+            }),
           };
           subscriptionPreview = await stigg.previewSubscription(previewSubscriptionProps);
         }
@@ -51,6 +77,8 @@ export const usePreviewSubscriptionAction = () => {
       subscription.billingPeriod,
       subscription.billableFeatures,
       subscription.promotionCode,
+      subscription.billingAddress,
+      subscription.taxPercentage,
       planStep.billingCountryCode,
     ],
   );
@@ -69,7 +97,9 @@ export const usePreviewSubscription = () => {
       setIsFetchingSubscriptionPreview(true);
 
       const { subscriptionPreview } = await previewSubscriptionAction();
-      setSubscriptionPreview(subscriptionPreview);
+      if (subscriptionPreview) {
+        setSubscriptionPreview(subscriptionPreview);
+      }
 
       setIsFetchingSubscriptionPreview(false);
     };

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

@@ -22,12 +22,14 @@ export type ProgressBarState = {
   activeStep: number;
   completedSteps: number[];
   steps: CheckoutStep[];
+  isDisabled: boolean;
 };
 
 const INITIAL_STATE: ProgressBarState = {
   activeStep: 0,
   completedSteps: [],
   steps: CHECKOUT_STEPS,
+  isDisabled: false,
 };
 
 export function getProgressBarInitialState({ availableAddons }: { availableAddons?: Addon[] }) {
@@ -66,6 +68,10 @@ function useGoNext() {
   const [, setState] = useCheckoutContext();
   return () =>
     setState(({ progressBar }) => {
+      if (progressBar.isDisabled) {
+        return;
+      }
+
       if (!progressBar.completedSteps.includes(progressBar.activeStep)) {
         progressBar.completedSteps.push(progressBar.activeStep);
       }
@@ -76,6 +82,14 @@ function useGoNext() {
     });
 }
 
+function useSetIsDisabled() {
+  const [, setState] = useCheckoutContext();
+  return (isDisabled?: boolean) =>
+    setState(({ progressBar }) => {
+      progressBar.isDisabled = !!isDisabled;
+    });
+}
+
 export function useProgressBarModel() {
   const progressBarState = useProgressBarState();
   const currentStep = progressBarState.steps[progressBarState.activeStep];
@@ -88,5 +102,6 @@ export function useProgressBarModel() {
     setActiveStep: useSetActiveStep(),
     markStepAsCompleted: useMarkStepAsCompleted(),
     goNext: useGoNext(),
+    setIsDisabled: useSetIsDisabled(),
   };
 }

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

@@ -1,16 +1,22 @@
 import { useCheckoutContext } from '../CheckoutProvider';
 import { AddonsStepState } from './useAddonsStepModel';
 import { PromotionCodeState } from './useCouponModel';
+import { PaymentStepState } from './usePaymentStepModel';
 import { PlanStepState } from './usePlanStepModel';
 
-export type SubscriptionState = PlanStepState & PromotionCodeState & Pick<AddonsStepState, 'addons'>;
+export type SubscriptionState = PlanStepState &
+  PromotionCodeState &
+  Pick<AddonsStepState, 'addons'> &
+  Pick<PaymentStepState, 'billingAddress' | 'taxPercentage'>;
 
 export function useSubscriptionModel(): SubscriptionState {
-  const [{ planStep, addonsStep, promotionCode }] = useCheckoutContext();
+  const [{ planStep, addonsStep, promotionCode, paymentStep }] = useCheckoutContext();
 
   return {
     ...planStep,
     addons: addonsStep.addons,
     promotionCode,
+    billingAddress: paymentStep.billingAddress,
+    taxPercentage: paymentStep.taxPercentage,
   };
 }

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

@@ -11,7 +11,7 @@ export function useSubscriptionState(): ApplySubscription | undefined {
   const addons = subscription.addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
 
   if (!plan?.id) {
-    return;
+    return undefined;
   }
 
   return {
@@ -22,5 +22,6 @@ export function useSubscriptionState(): ApplySubscription | undefined {
     addons,
     promotionCode: subscription.promotionCode,
     billingCountryCode: subscription.billingCountryCode,
+    ...(subscription.taxPercentage ? { billingInformation: { taxPercentage: subscription.taxPercentage } } : {}),
   };
 }

package/src/components/checkout/index.ts

@@ -2,3 +2,4 @@ export { CheckoutTheme } from './theme';
 export { Checkout, CheckoutProps } from './Checkout';
 export { OnCheckoutCompletedParams, OnCheckoutParams, CheckoutResult } from './CheckoutContainer';
 export { CheckoutLocalization } from './textOverrides';
+export * from './types';

package/src/components/checkout/progressBar/CheckoutProgressBar.tsx

@@ -24,8 +24,9 @@ export const CheckoutProgressBar = () => {
 
           return (
             <Grid key={key} item display="flex" flexDirection="row" flex={1} justifyContent="flex-start">
-              {isLoadingCheckoutData && <Skeleton width={120} height={20} style={{ marginTop: 8 }} />}
-              {!isLoadingCheckoutData && (
+              {isLoadingCheckoutData ? (
+                <Skeleton width={120} height={20} style={{ marginTop: 8 }} />
+              ) : (
                 <StyledStepButton onClick={() => setActiveStep(index)} fullWidth disabled={isDisabled}>
                   <Grid item display="flex" flexDirection="row" alignItems="center" gap={1}>
                     <StepIcon

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

@@ -13,6 +13,7 @@ import {
 } from './PaymentMethods.style';
 import { StripePaymentForm } from './stripe';
 import { CheckoutLocalization } from '../../textOverrides';
+import { CheckoutContainerProps } from '../../CheckoutContainer';
 
 export type PaymentMethodLayoutProps = {
   checked: boolean;
@@ -28,13 +29,13 @@ export type PaymentMethodProps = Pick<Customer, 'paymentMethodDetails'> &
 export type NewPaymentMethodProps = Pick<PaymentMethodLayoutProps, 'checked' | 'readOnly'> & {
   onSelect: () => void;
   checkoutLocalization: CheckoutLocalization;
-};
+} & Pick<CheckoutContainerProps, 'onBillingAddressChange'>;
 
 function PaymentMethodLayout({ checked, icon, text, subtitle, readOnly }: PaymentMethodLayoutProps) {
   return (
     <PaymentMethodLayoutContainer>
       <Radio checked={checked} disabled={readOnly} />
-      <Icon icon={icon} style={{ display: 'contents' }} />
+      <Icon icon={icon} style={{ display: 'flex' }} />
       <PaymentMethodTextContainer container>
         <Grid item>{text}</Grid>
         {subtitle && <Grid item>{subtitle}</Grid>}
@@ -55,11 +56,11 @@ export function ExistingPaymentMethod({ checked, paymentMethodDetails, readOnly,
         checked={checked}
         readOnly={readOnly}
         icon="PaymentMethod"
-        text={<Typography variant="h6">{`Ending in ${last4Digits}`}</Typography>}
+        text={<Typography variant="h6">{`Card ending in ${last4Digits}`}</Typography>}
         subtitle={
           !!expirationMonth &&
           !!expirationYear && (
-            <Typography variant="body1">{`Exp. ${expirationMonth
+            <Typography variant="body1">{`Expires ${expirationMonth
               .toString()
               .padStart(2, '0')}/${expirationYear}`}</Typography>
           )
@@ -69,7 +70,13 @@ export function ExistingPaymentMethod({ checked, paymentMethodDetails, readOnly,
   );
 }
 
-export function NewPaymentMethod({ checked, onSelect, readOnly, checkoutLocalization }: NewPaymentMethodProps) {
+export function NewPaymentMethod({
+  checked,
+  onSelect,
+  readOnly,
+  checkoutLocalization,
+  onBillingAddressChange,
+}: NewPaymentMethodProps) {
   return (
     <NewPaymentMethodContainer item onClick={onSelect} $disabled={readOnly}>
       <PaymentMethodLayout
@@ -79,7 +86,7 @@ export function NewPaymentMethod({ checked, onSelect, readOnly, checkoutLocaliza
         text={<Typography variant="h6">{checkoutLocalization.newPaymentMethodText}</Typography>}
       />
       <Collapse in={checked}>
-        <StripePaymentForm />
+        <StripePaymentForm onBillingAddressChange={onBillingAddressChange} />
       </Collapse>
     </NewPaymentMethodContainer>
   );