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

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>
   );

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

@@ -4,6 +4,7 @@ import { Alert, Grid } from '@mui/material';
 import { useCheckoutModel, usePaymentStepModel } from '../../hooks';
 import { ExistingPaymentMethod, NewPaymentMethod } from './PaymentMethods';
 import { Typography } from '../../../common/Typography';
+import { CheckoutContainerProps } from '../../CheckoutContainer';
 
 const PaymentContainer = styled(Grid)`
   display: flex;
@@ -12,7 +13,7 @@ const PaymentContainer = styled(Grid)`
   margin: 32px 0;
 `;
 
-export function PaymentStep() {
+export function PaymentStep({ onBillingAddressChange }: Pick<CheckoutContainerProps, 'onBillingAddressChange'>) {
   const { checkoutState, checkoutLocalization, widgetState } = useCheckoutModel();
   const { customer } = checkoutState || {};
   const { errorMessage, useNewPaymentMethod, setUseNewPaymentMethod } = usePaymentStepModel();
@@ -44,6 +45,7 @@ export function PaymentStep() {
         checked={useNewPaymentMethod}
         checkoutLocalization={checkoutLocalization}
         onSelect={() => handleOnSelect(true)}
+        onBillingAddressChange={onBillingAddressChange}
       />
     </PaymentContainer>
   );

package/src/components/checkout/steps/payment/stripe/StripePaymentForm.tsx

@@ -1,22 +1,53 @@
 import React from 'react';
+import { StripeAddressElementChangeEvent } from '@stripe/stripe-js';
 import { Grid } from '@mui/material';
+import { BillingAddress } from '@stigg/js-client-sdk';
 import { AddressElement, PaymentElement } from '@stripe/react-stripe-js';
 import { Typography } from '../../../../common/Typography';
-import { useCheckoutModel } from '../../../hooks';
+import { useCheckoutModel, usePaymentStepModel } from '../../../hooks';
+import { CheckoutContainerProps } from '../../../CheckoutContainer';
 
-export function StripePaymentForm() {
-  const { checkoutState, checkoutLocalization, widgetState } = useCheckoutModel();
+export function StripePaymentForm({ onBillingAddressChange }: Pick<CheckoutContainerProps, 'onBillingAddressChange'>) {
+  const { checkoutState, checkoutLocalization, widgetState, setWidgetReadOnly } = useCheckoutModel();
+  const { setBillingAddress } = usePaymentStepModel();
   const { customer, configuration } = checkoutState || {};
   const { readOnly } = widgetState;
 
+  const handleAddressChange = (args: StripeAddressElementChangeEvent) => {
+    if (!args.complete) {
+      return;
+    }
+
+    const { postal_code: postalCode, ...addressFields } = args.value.address;
+    const billingAddress: BillingAddress = {
+      postalCode,
+      ...addressFields,
+    };
+
+    setWidgetReadOnly(true);
+    setBillingAddress(billingAddress);
+
+    if (onBillingAddressChange) {
+      const callExternalBillingAddressChanged = async () => {
+        await onBillingAddressChange({ billingAddress });
+        setWidgetReadOnly(false);
+      };
+
+      void callExternalBillingAddressChanged();
+    } else {
+      setWidgetReadOnly(false);
+    }
+  };
+
   return (
     <Grid flexDirection="column" container gap={3} padding="16px" sx={{ pointerEvents: readOnly ? 'none' : undefined }}>
       <Grid flexDirection="column" container gap={2}>
         <Typography variant="h6">{checkoutLocalization.newPaymentMethodBillingAddressTitle}</Typography>
         <AddressElement
+          onChange={handleAddressChange}
           options={{
             mode: 'billing',
-            fields: { phone: !!configuration?.content?.collectPhoneNumber ? 'always' : 'auto' },
+            fields: { phone: configuration?.content?.collectPhoneNumber ? 'always' : 'auto' },
             defaultValues: {
               ...(customer?.name && { name: customer.name }),
             },

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

@@ -8,15 +8,16 @@ type StripeElementsProps = {
 
 export async function handleStripeFormValidations({ elements }: Pick<StripeElementsProps, 'elements'>) {
   if (!elements) {
-    console.error('Stripe elements not initialized');
-    return { success: false };
+    const errorMessage = 'Stripe elements not initialized';
+    console.error(errorMessage);
+    return { success: false, errorMessage };
   }
 
   const { error: elementsError } = await elements.submit();
 
   if (elementsError) {
     console.log(elementsError.message);
-    return { success: false };
+    return { success: false, errorMessage: elementsError.message || '' };
   }
 
   return { success: true };

package/src/components/checkout/steps/payment/stripe/useSubmit.ts

@@ -8,15 +8,15 @@ import { CheckoutContainerProps, CheckoutResult } from '../../../CheckoutContain
 import { handleNewPaymentMethod, handleStripeFormValidations, handleStripeNextAction } from './stripe.utils';
 import { ANIMATION_DURATION } from '../../../summary/CheckoutSuccess';
 
-const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
+const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
 
-export type HandleSubmitResult = { results?: ApplySubscriptionResults; errorMessage?: string } | undefined;
+export type HandleSubmitResult = { results?: ApplySubscriptionResults; success: boolean; errorMessage?: string };
 
 export type UseSubmitProps = {
   onSuccess?: () => void;
-} & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted'>;
+} & Pick<CheckoutContainerProps, 'onCheckout' | 'onCheckoutCompleted' | 'disableSuccessAnimation'>;
 
-export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess }: UseSubmitProps) {
+export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess, disableSuccessAnimation }: UseSubmitProps) {
   const { stigg } = useStiggContext();
   const { useNewPaymentMethod } = usePaymentStepModel();
   const subscriptionState = useSubscriptionState();
@@ -29,75 +29,88 @@ export function useSubmit({ onCheckout, onCheckoutCompleted, onSuccess }: UseSub
     e.preventDefault();
 
     if (!subscriptionState) {
-      return;
+      return { success: false, errorMessage: 'Unexpected error, please contact support.' };
     }
 
+    let checkoutParams: ApplySubscription = { ...subscriptionState };
     let checkoutResults: ApplySubscriptionResults | undefined;
     let errorMessage: string | undefined;
     let paymentMethodId: string | undefined;
 
-    setWidgetReadOnly(true);
+    const checkoutAction = async (): Promise<CheckoutResult> => {
+      if (useNewPaymentMethod) {
+        const { success, errorMessage: stripeValidationsErrorMessage } = await handleStripeFormValidations({
+          elements,
+        });
+
+        if (!success) {
+          return { success: false, errorMessage: stripeValidationsErrorMessage };
+        }
+
+        const paymentMethodResults = await handleNewPaymentMethod({ elements, stripe, setupIntentClientSecret });
+        if (!paymentMethodResults.success) {
+          errorMessage = paymentMethodResults.errorMessage;
+        }
 
-    if (useNewPaymentMethod) {
-      const { success } = await handleStripeFormValidations({ elements });
-      if (!success) {
-        setWidgetReadOnly(false);
-        return;
+        paymentMethodId = paymentMethodResults.paymentMethodId;
       }
 
-      const paymentMethodResults = await handleNewPaymentMethod({ elements, stripe, setupIntentClientSecret });
-      if (!paymentMethodResults.success) {
-        errorMessage = paymentMethodResults.errorMessage;
+      if (errorMessage) {
+        return { success: false, errorMessage };
       }
 
-      paymentMethodId = paymentMethodResults.paymentMethodId;
-    }
+      checkoutParams = { ...checkoutParams, paymentMethodId };
 
-    if (!errorMessage) {
-      const checkoutParams: ApplySubscription = { ...subscriptionState, paymentMethodId };
-
-      const checkoutAction = async (): Promise<CheckoutResult> => {
-        try {
-          const applySubscriptionResults = await stigg.applySubscription(checkoutParams);
-          const nextActionResults = await handleStripeNextAction({
-            applySubscriptionResults,
-            stripe,
-          });
-
-          checkoutResults = nextActionResults;
-          if (nextActionResults.errorMessage) {
-            errorMessage = nextActionResults.errorMessage;
-          }
-
-          return { success: !nextActionResults.errorMessage, errorMessage: nextActionResults.errorMessage };
-        } catch (e) {
-          console.error(e);
-          errorMessage = (e as any)?.message;
-          return { success: false, errorMessage };
-        }
-      };
+      try {
+        const applySubscriptionResults = await stigg.applySubscription(checkoutParams);
+        const nextActionResults = await handleStripeNextAction({
+          applySubscriptionResults,
+          stripe,
+        });
 
-      if (onCheckout) {
-        const externalCheckoutResults = await onCheckout({ checkoutParams, checkoutAction });
-        if (!externalCheckoutResults.success && externalCheckoutResults.errorMessage) {
-          errorMessage = externalCheckoutResults.errorMessage;
+        checkoutResults = nextActionResults;
+        if (nextActionResults.errorMessage) {
+          errorMessage = nextActionResults.errorMessage;
         }
-      } else {
-        await checkoutAction();
+
+        return { success: !nextActionResults.errorMessage, errorMessage: nextActionResults.errorMessage };
+      } catch (e) {
+        console.error(e);
+        errorMessage = (e as any)?.message;
+        return { success: false, errorMessage };
       }
+    };
+
+    setWidgetReadOnly(true);
+
+    let success = false;
+    if (onCheckout) {
+      const externalCheckoutResults = await onCheckout({ checkoutParams, checkoutAction });
+      if (!externalCheckoutResults.success && externalCheckoutResults.errorMessage) {
+        errorMessage = externalCheckoutResults.errorMessage;
+      }
+      success = externalCheckoutResults.success && !errorMessage;
+    } else {
+      const checkoutActionResults = await checkoutAction();
+      if (!checkoutActionResults.success && checkoutActionResults.errorMessage) {
+        errorMessage = checkoutActionResults.errorMessage;
+      }
+      success = checkoutActionResults.success && !errorMessage;
     }
 
     setWidgetReadOnly(false);
 
-    const success = !errorMessage && !!checkoutResults?.subscription;
     if (success && onSuccess) {
       onSuccess();
+
+      if (!disableSuccessAnimation) {
+        await delay(ANIMATION_DURATION); // Wait for animation to finish
+      }
     }
 
-    await delay(ANIMATION_DURATION); // Wait for animation to finish
     await onCheckoutCompleted({ success, error: errorMessage });
 
-    return { results: checkoutResults, errorMessage };
+    return { results: checkoutResults, success: !errorMessage, errorMessage };
   };
 
   return { handleSubmit, isLoading: !!widgetState?.readOnly };

package/src/components/checkout/steps/plan/BillingPeriodPicker.style.tsx

@@ -5,19 +5,40 @@ export const BillingPeriodPickerContainer = styled(Box)`
   margin: 16px 0;
 `;
 
-export const BillingPeriodButton = styled.button<{ $isActive?: boolean; $disabled?: boolean }>`
-  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+export const BillingPeriodButton = styled.button<{
+  $isActive?: boolean;
+  $disabled?: boolean;
+  $isOnlyBillingPeriod?: boolean;
+}>`
+  cursor: ${({ $disabled, $isOnlyBillingPeriod }) =>
+    $disabled ? 'default' : $isOnlyBillingPeriod ? 'default' : 'pointer'};
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 8px 8px 8px 4px;
+  padding: 2px 8px;
   border-radius: 10px;
-  border: ${({ theme, $isActive }) =>
-    `1px solid ${$isActive ? theme.stigg.palette.outlinedRestingBorder : theme.stigg.palette.outlinedBorder}`};
-  background: ${({ theme, $isActive }) => ($isActive ? theme.stigg.palette.backgroundSection : 'transparent')};
+  border: ${({ theme, $isActive, $isOnlyBillingPeriod }) => {
+    let borderColor = theme.stigg.palette.outlinedBorder;
+    if ($isOnlyBillingPeriod) {
+      borderColor = 'transparent';
+    } else if ($isActive) {
+      borderColor = theme.stigg.palette.outlinedRestingBorder;
+    }
+    return `1px solid ${borderColor}`;
+  }};
+  background: ${({ theme, $isActive, $isOnlyBillingPeriod }) => {
+    if ($isOnlyBillingPeriod) {
+      return 'transparent';
+    }
+    if ($isActive) {
+      return theme.stigg.palette.primaryLight;
+    }
+    return 'transparent';
+  }};
   text-transform: none;
   text-align: start;
+  height: 36px;
 
   &.MuiButton-root {
     padding: 0 16px 0 8px;

package/src/components/checkout/steps/plan/BillingPeriodPicker.tsx

@@ -11,21 +11,32 @@ import { usePlanStepModel } from '../../hooks/usePlanStepModel';
 import { BillingPeriodButton, BillingPeriodOptions, BillingPeriodPickerContainer } from './BillingPeriodPicker.style';
 import { CheckoutLocalization } from '../../textOverrides';
 
-const BillingPeriodOption = ({ billingPeriod }: { billingPeriod: BillingPeriod }) => {
+const BillingPeriodOption = ({
+  billingPeriod,
+  isOnlyBillingPeriod,
+}: {
+  billingPeriod: BillingPeriod;
+  isOnlyBillingPeriod: boolean;
+}) => {
   const { billingPeriod: selectedBillingPeriod, setBillingPeriod } = usePlanStepModel();
   const isActive = selectedBillingPeriod === billingPeriod;
 
   return (
-    <BillingPeriodButton onClick={() => setBillingPeriod(billingPeriod)} $isActive={isActive}>
+    <BillingPeriodButton
+      onClick={() => setBillingPeriod(billingPeriod)}
+      $isActive={isActive}
+      $isOnlyBillingPeriod={isOnlyBillingPeriod}>
       <Radio
         checked={isActive}
         onChange={() => setBillingPeriod(billingPeriod)}
         value={billingPeriod}
+        disabled={isOnlyBillingPeriod}
         inputProps={{ 'aria-label': formatBillingPeriod(billingPeriod) }}
+        sx={{ padding: 0, marginRight: '8px' }}
       />
 
       <Box>
-        <Typography variant="h6" color="primary" fontWeight={FontWeight.Medium}>
+        <Typography variant="body1" color="primary">
           {formatBillingPeriod(billingPeriod)}
         </Typography>
       </Box>
@@ -44,6 +55,8 @@ export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPerio
     (price) => price.billingPeriod === BillingPeriod.Monthly,
   );
 
+  const hasBothBillingPeriods = !!monthlyPrices?.length && !!annualPrices?.length;
+
   return (
     <BillingPeriodPickerContainer>
       <Typography variant="h6" color="primary" fontWeight={FontWeight.Medium}>
@@ -52,10 +65,18 @@ export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPerio
 
       <BillingPeriodOptions>
         {!!monthlyPrices?.length && (
-          <BillingPeriodOption key={BillingPeriod.Monthly} billingPeriod={BillingPeriod.Monthly} />
+          <BillingPeriodOption
+            key={BillingPeriod.Monthly}
+            billingPeriod={BillingPeriod.Monthly}
+            isOnlyBillingPeriod={!hasBothBillingPeriods}
+          />
         )}
         {!!annualPrices?.length && (
-          <BillingPeriodOption key={BillingPeriod.Annually} billingPeriod={BillingPeriod.Annually} />
+          <BillingPeriodOption
+            key={BillingPeriod.Annually}
+            billingPeriod={BillingPeriod.Annually}
+            isOnlyBillingPeriod={!hasBothBillingPeriods}
+          />
         )}
       </BillingPeriodOptions>
     </BillingPeriodPickerContainer>

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import styled from '@emotion/styled';
 import { Box } from '@mui/material';
@@ -10,7 +10,7 @@ import { useChargesSort } from '../../../hooks/useChargeSort';
 import { calculateUnitQuantityText } from '../../../paywall/utils/calculateUnitQuantityText';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { InputField } from '../../components';
-import { usePlanStepModel } from '../../hooks';
+import { useCheckoutModel, usePlanStepModel, useProgressBarModel } from '../../hooks';
 import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
 import { getPriceFeatureUnit, getTierByQuantity } from '../../../utils/priceTierUtils';
 import { getValidPriceQuantity } from '../../../utils/priceUtils';
@@ -31,14 +31,31 @@ const StyledPlanCharge = styled.div`
   margin-top: 16px;
 `;
 
+const getValidationText = (charge: Price, quantity?: number) => {
+  const { minUnitQuantity, maxUnitQuantity } = charge;
+  if (!quantity || quantity < (minUnitQuantity || 1)) {
+    return `Minimum ${minUnitQuantity || 1}`;
+  }
+
+  if (maxUnitQuantity && quantity > maxUnitQuantity) {
+    return `Maximum ${maxUnitQuantity}`;
+  }
+
+  return '';
+};
+
 export function PlanCharge({
   charge,
+  isValid,
   setBillableFeature,
   billableFeature,
+  onValidationChange,
 }: {
   charge: Price;
+  isValid: boolean;
   billableFeature?: BillableFeatureInput;
   setBillableFeature: UsePlanStepModel['setBillableFeature'];
+  onValidationChange: ({ featureId, isValid }: { featureId: string; isValid: boolean }) => void;
 }) {
   const featureId = charge.feature?.featureId;
   const isBaseCharge = !featureId;
@@ -49,9 +66,23 @@ export function PlanCharge({
   const handleQuantityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (isBaseCharge || !featureId) return;
 
-    const value = event?.target?.value ? Number(event?.target?.value) : charge.minUnitQuantity || 1;
-    const quantity = getValidPriceQuantity(charge, value || 1);
+    const { minUnitQuantity, maxUnitQuantity } = charge;
+    const value = event?.target?.value ? Number(event?.target?.value) : null;
+    if (
+      !value ||
+      value <= 0 ||
+      (minUnitQuantity && value < minUnitQuantity) ||
+      (maxUnitQuantity && value > maxUnitQuantity)
+    ) {
+      onValidationChange({ featureId, isValid: false });
+      // Reset the input value to null
+      // @ts-ignore
+      setBillableFeature(featureId, value ?? null);
+      return;
+    }
 
+    onValidationChange({ featureId, isValid: true });
+    const quantity = getValidPriceQuantity(charge, value);
     setBillableFeature(featureId, quantity);
   };
 
@@ -77,7 +108,7 @@ export function PlanCharge({
         tierUnits={getPriceFeatureUnit(charge)}
         selectedTier={tier}
         handleTierChange={(tier: PriceTierFragment) => {
-          setBillableFeature(featureId!, tier!.upTo);
+          setBillableFeature(featureId!, tier.upTo);
         }}
       />
     );
@@ -87,11 +118,12 @@ export function PlanCharge({
         sx={{ width: 120 }}
         id={`${featureId}-input`}
         type="number"
-        InputProps={
-          hasQuantityRestrictions ? { inputProps: { min: charge.minUnitQuantity, max: charge.maxUnitQuantity } } : {}
-        }
-        value={billableFeature?.quantity || charge.minUnitQuantity || 1}
+        error={!isValid}
+        helperText={!isValid ? getValidationText(charge, billableFeature?.quantity) : undefined}
+        FormHelperTextProps={{ sx: { margin: '4px' } }}
+        value={billableFeature?.quantity ?? ''}
         onChange={handleQuantityChange}
+        onWheel={(e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur()}
       />
     );
   }
@@ -118,18 +150,36 @@ export function PlanCharge({
 
 export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListProps) {
   const { billableFeatures, setBillableFeature } = usePlanStepModel();
-  const planCharges = useChargesSort(plan?.pricePoints?.filter(p => p.billingPeriod === billingPeriod) || []);
+  const { setIsDisabled } = useProgressBarModel();
+  const { setIsValid } = useCheckoutModel();
+  const planCharges = useChargesSort(plan?.pricePoints?.filter((p) => p.billingPeriod === billingPeriod) || []);
+  const [chargesValidation, setChargesValidation] = useState(
+    planCharges?.reduce<Record<string, boolean>>((acc, curr) => {
+      acc[curr.feature?.featureId || 'base-charge'] = true;
+      return acc;
+    }, {}),
+  );
+
+  useEffect(() => {
+    const isDisabled = Object.values(chargesValidation).some((x) => !x);
+    setIsDisabled(isDisabled);
+    setIsValid(!isDisabled);
+  }, [chargesValidation, setIsDisabled, setIsValid]);
 
   return (
     <div>
-      {planCharges?.map(charge => {
-        const billableFeature = billableFeatures.find(x => x.featureId === charge.feature?.featureId);
+      {planCharges?.map((charge) => {
+        const billableFeature = billableFeatures.find((x) => x.featureId === charge.feature?.featureId);
         return (
           <PlanCharge
             key={charge.feature?.featureId || 'base-charge'}
             charge={charge}
             setBillableFeature={setBillableFeature}
             billableFeature={billableFeature}
+            isValid={chargesValidation[charge.feature?.featureId || 'base-charge']}
+            onValidationChange={({ featureId, isValid }: { featureId: string; isValid: boolean }) =>
+              setChargesValidation((prev) => ({ ...prev, [featureId]: isValid }))
+            }
           />
         );
       })}

package/src/components/checkout/summary/CheckoutSuccess.tsx

@@ -4,27 +4,73 @@ import Color from 'color';
 import React from 'react';
 import Lottie from 'react-lottie';
 import animationData from '../../../assets/lottie/checkout-success.json';
+import { Typography } from '../../common/Typography';
+import { CheckoutLocalization } from '../textOverrides';
 
 export const ANIMATION_DURATION = 5000;
 
-const BACKGROUND_COLOR = Color('#0b2f7a').alpha(0.3).toString();
-
 const CheckoutSuccessContainer = styled(Box)`
+  @keyframes blurFade {
+    0% {
+      background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0).toString()};
+      backdrop-filter: blur(0px);
+    }
+    100% {
+      background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0.9).toString()};
+      backdrop-filter: blur(6.5px);
+    }
+  }
+
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  background-color: ${BACKGROUND_COLOR};
+  z-index: 5;
+  background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0.9).toString()};
+  animation: blurFade 2s ease-in forwards;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
   * rect {
     fill: transparent;
   }
+
+  & path {
+    stroke: ${({ theme }) => theme.stigg.palette.primary};
+  }
+`;
+
+const CheckoutSuccessText = styled(Typography)`
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    75% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  align-self: center;
+  animation: fadeIn 5s ease-in forwards;
 `;
 
-export function CheckoutSuccess() {
+export function CheckoutSuccess({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) {
   return (
-    <CheckoutSuccessContainer>
-      <Lottie width={350} options={{ loop: false, autoplay: true, animationData }} />
+    <CheckoutSuccessContainer className="stigg-checkout-success-container">
+      <Lottie
+        width={350}
+        height="auto"
+        isClickToPauseDisabled
+        options={{ loop: false, autoplay: true, animationData }}
+      />
+      <CheckoutSuccessText variant="h1" color="primary.main">
+        {checkoutLocalization.checkoutSuccessText}
+      </CheckoutSuccessText>
     </CheckoutSuccessContainer>
   );
 }