@schematichq/schematic-components 2.16.2 → 2.17.1

package/README.md

@@ -48,24 +48,34 @@ selection stage.
 initializeWithPlan('plan_VBXv4bHjSf3');
 ```
 
-Passing a config object allows pre-selecting Add-ons as well as hiding
-specific stages.
+Passing a config object allows pre-selecting Add-ons and pay-in-advance
+quantities, as well as hiding specific stages.
 
 ```ts
 const config = {
   planId: 'plan_VBXv4bHjSf3',      // pre-select a Plan
   addOnIds: ['plan_AWv7bPjSx2'],   // pre-select 1 or more Add-ons
   period: 'month',                 // pre-select 'month' or 'year' for the billing period (optional)
+  payInAdvanceQuantities: {        // pre-fill pay-in-advance quantities, keyed by feature id (optional)
+    feat_seats: 3,
+  },
   skipped: {
     planStage: true,               // if true, skip Plan selection
-    addOnStage: true               // if true, skip Add-on selection
-  }
-  hideSkipped:  true               // if true, hide skipped stages from breadcrumb navigation
+    addOnStage: true,              // if true, skip Add-on selection
+    usageStage: true,              // if true, skip the pay-in-advance Quantity stage
+    addOnUsageStage: true,         // if true, skip the add-on Quantity stage
+  },
+  hideSkipped: true,               // if true, hide skipped stages from breadcrumb navigation
 };
 
 initializeWithPlan(config);
 ```
 
+`payInAdvanceQuantities` only applies to entitlements with pay-in-advance
+pricing; entries for other (or unknown) features are ignored. Combine it with
+`skipped.usageStage` / `skipped.addOnUsageStage` to send the customer straight to
+the final checkout step with the quantities already set.
+
 The Plans and Add-ons available to the checkout flows must be live in your
 Schematic account [Catalog configuration](https://docs.schematichq.com/catalog/overview).
 

package/dist/schematic-components.cjs.js

@@ -1866,6 +1866,7 @@ __export(index_exports, {
   UnsubscribeButton: () => UnsubscribeButton,
   UpcomingBill: () => UpcomingBill,
   Viewport: () => Viewport,
+  applyPrefilledQuantities: () => applyPrefilledQuantities,
   cardBoxShadow: () => cardBoxShadow,
   createActiveUsageBasedEntitlementsReducer: () => createActiveUsageBasedEntitlementsReducer,
   defaultSettings: () => defaultSettings,
@@ -8291,6 +8292,7 @@ function FeatureEntitlementFromJSONTyped(json, ignoreDiscriminator) {
   }
   return {
     allocation: json["allocation"] == null ? void 0 : json["allocation"],
+    consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
     creditId: json["credit_id"] == null ? void 0 : json["credit_id"],
     creditRemaining: json["credit_remaining"] == null ? void 0 : json["credit_remaining"],
     creditReserved: json["credit_reserved"] == null ? void 0 : json["credit_reserved"],
@@ -8298,6 +8300,7 @@ function FeatureEntitlementFromJSONTyped(json, ignoreDiscriminator) {
     creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
     creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
     eventName: json["event_name"] == null ? void 0 : json["event_name"],
+    eventSubtype: json["event_subtype"] == null ? void 0 : json["event_subtype"],
     featureId: json["feature_id"],
     featureKey: json["feature_key"],
     metricPeriod: json["metric_period"] == null ? void 0 : MetricPeriodFromJSON(json["metric_period"]),
@@ -13313,18 +13316,26 @@ var reducer = (state, action) => {
       let bypassPlanSelection;
       let bypassAddOnSelection;
       let bypassCreditsSelection;
+      let bypassUsageSelection;
+      let bypassAddOnUsageSelection;
       if (config.skipped !== void 0) {
         bypassPlanSelection = config.skipped.planStage ?? false;
         bypassAddOnSelection = config.skipped.addOnStage ?? false;
         bypassCreditsSelection = config.skipped.creditStage ?? false;
+        bypassUsageSelection = config.skipped.usageStage ?? false;
+        bypassAddOnUsageSelection = config.skipped.addOnUsageStage ?? false;
       } else if (isStringFormat) {
         bypassPlanSelection = true;
         bypassAddOnSelection = false;
         bypassCreditsSelection = false;
+        bypassUsageSelection = false;
+        bypassAddOnUsageSelection = false;
       } else {
         bypassPlanSelection = false;
         bypassAddOnSelection = false;
         bypassCreditsSelection = false;
+        bypassUsageSelection = false;
+        bypassAddOnUsageSelection = false;
       }
       return {
         ...state,
@@ -13335,7 +13346,12 @@ var reducer = (state, action) => {
           bypassPlanSelection,
           bypassAddOnSelection,
           bypassCreditsSelection,
+          bypassUsageSelection,
+          bypassAddOnUsageSelection,
           ...config.addOnIds && { addOnIds: config.addOnIds },
+          ...config.payInAdvanceQuantities && {
+            payInAdvanceQuantities: config.payInAdvanceQuantities
+          },
           ...config.currency && {
             selectedCurrency: config.currency.toUpperCase()
           },
@@ -13371,7 +13387,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.16.2",
+  "X-Schematic-Components-Version": "2.17.1",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -17241,6 +17257,18 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
   }
   return acc;
 };
+var applyPrefilledQuantities = (entitlements, prefill) => {
+  if (!prefill) {
+    return entitlements;
+  }
+  return entitlements.map((entitlement) => {
+    const prefilled = prefill[entitlement.featureId];
+    if (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && typeof prefilled === "number") {
+      return { ...entitlement, quantity: Math.max(0, Math.floor(prefilled)) };
+    }
+    return entitlement;
+  });
+};
 var CheckoutDialog = ({ top }) => {
   const { t: t3 } = useTranslation();
   const {
@@ -17474,9 +17502,12 @@ var CheckoutDialog = ({ top }) => {
     effectiveCurrency
   ]);
   const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react36.useState)(
-    () => (selectedPlan?.entitlements || []).reduce(
-      createActiveUsageBasedEntitlementsReducer(featureUsage, planPeriod),
-      []
+    () => applyPrefilledQuantities(
+      (selectedPlan?.entitlements || []).reduce(
+        createActiveUsageBasedEntitlementsReducer(featureUsage, planPeriod),
+        []
+      ),
+      checkoutState?.payInAdvanceQuantities
     )
   );
   const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = (0, import_react36.useState)(() => {
@@ -17515,7 +17546,10 @@ var CheckoutDialog = ({ top }) => {
         allEntitlements.push(bypassEnt);
       }
     }
-    return allEntitlements;
+    return applyPrefilledQuantities(
+      allEntitlements,
+      checkoutState?.payInAdvanceQuantities
+    );
   });
   const payInAdvanceEntitlements = (0, import_react36.useMemo)(
     () => usageBasedEntitlements.filter(
@@ -17651,7 +17685,7 @@ var CheckoutDialog = ({ top }) => {
     hasInitialPaymentMethod
   ]);
   const [isBypassLoading, setIsBypassLoading] = (0, import_react36.useState)(
-    () => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection
+    () => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection || checkoutState?.bypassUsageSelection || checkoutState?.bypassAddOnUsageSelection
   );
   const [checkoutStage, setCheckoutStage] = (0, import_react36.useState)(() => {
     if (checkoutState?.addOnId) {
@@ -17671,7 +17705,7 @@ var CheckoutDialog = ({ top }) => {
   const effectiveCheckoutStage = (0, import_react36.useMemo)(() => {
     if (isBypassLoading) return checkoutStage;
     let id = checkoutStage;
-    while (id === "plan" && checkoutState?.bypassPlanSelection || id === "addons" && checkoutState?.bypassAddOnSelection || id === "credits" && checkoutState?.bypassCreditsSelection) {
+    while (id === "plan" && checkoutState?.bypassPlanSelection || id === "usage" && checkoutState?.bypassUsageSelection || id === "addons" && checkoutState?.bypassAddOnSelection || id === "addonsUsage" && checkoutState?.bypassAddOnUsageSelection || id === "credits" && checkoutState?.bypassCreditsSelection) {
       const idx = checkoutStages.findIndex((s) => s.id === id);
       const next2 = checkoutStages[idx + 1];
       if (!next2) break;
@@ -17896,9 +17930,12 @@ var CheckoutDialog = ({ top }) => {
     (updates) => {
       const plan = updates.plan;
       const period = showPeriodToggle ? updates.period || planPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
-      const updatedUsageBasedEntitlements = (plan.entitlements ?? []).reduce(
-        createActiveUsageBasedEntitlementsReducer(featureUsage, period),
-        []
+      const updatedUsageBasedEntitlements = applyPrefilledQuantities(
+        (plan.entitlements ?? []).reduce(
+          createActiveUsageBasedEntitlementsReducer(featureUsage, period),
+          []
+        ),
+        checkoutState?.payInAdvanceQuantities
       );
       if (period !== planPeriod || plan.id !== selectedPlan?.id) {
         setUsageBasedEntitlements((prev2) => {
@@ -17948,7 +17985,8 @@ var CheckoutDialog = ({ top }) => {
       featureUsage,
       shouldTrial,
       willTrialWithoutPaymentMethod,
-      handlePreviewCheckout
+      handlePreviewCheckout,
+      checkoutState?.payInAdvanceQuantities
     ]
   );
   const changePlanPeriod = (0, import_react36.useCallback)(
@@ -18176,9 +18214,15 @@ var CheckoutDialog = ({ top }) => {
       if (stage.id === "plan" && checkoutState.bypassPlanSelection) {
         return false;
       }
+      if (stage.id === "usage" && checkoutState.bypassUsageSelection) {
+        return false;
+      }
       if (stage.id === "addons" && checkoutState.bypassAddOnSelection) {
         return false;
       }
+      if (stage.id === "addonsUsage" && checkoutState.bypassAddOnUsageSelection) {
+        return false;
+      }
       if (stage.id === "credits" && checkoutState.bypassCreditsSelection) {
         return false;
       }
@@ -18190,9 +18234,15 @@ var CheckoutDialog = ({ top }) => {
       if (stage.id === "plan" && checkoutState?.bypassPlanSelection) {
         return false;
       }
+      if (stage.id === "usage" && checkoutState?.bypassUsageSelection) {
+        return false;
+      }
       if (stage.id === "addons" && checkoutState?.bypassAddOnSelection) {
         return false;
       }
+      if (stage.id === "addonsUsage" && checkoutState?.bypassAddOnUsageSelection) {
+        return false;
+      }
       if (stage.id === "credits" && checkoutState?.bypassCreditsSelection) {
         return false;
       }
@@ -18201,7 +18251,9 @@ var CheckoutDialog = ({ top }) => {
   }, [
     checkoutStages,
     checkoutState?.bypassPlanSelection,
+    checkoutState?.bypassUsageSelection,
     checkoutState?.bypassAddOnSelection,
+    checkoutState?.bypassAddOnUsageSelection,
     checkoutState?.bypassCreditsSelection
   ]);
   const shouldShowBypassOverlay = isBypassLoading;
@@ -18935,6 +18987,8 @@ var PaymentForm = ({ onConfirm, financeData }) => {
   const [isPaymentComplete, setIsPaymentComplete] = (0, import_react39.useState)(false);
   const [isPaymentReady, setIsPaymentReady] = (0, import_react39.useState)(false);
   const [loadError, setLoadError] = (0, import_react39.useState)();
+  const [isEmailValid, setIsEmailValid] = (0, import_react39.useState)(() => !collectEmail);
+  const emailInputRef = (0, import_react39.useRef)(null);
   const [isAddressComplete, setIsAddressComplete] = (0, import_react39.useState)(
     () => !shouldCollectAddress
   );
@@ -18947,6 +19001,11 @@ var PaymentForm = ({ onConfirm, financeData }) => {
       setEmail(billing.email);
     }
   }, [billing?.email]);
+  (0, import_react39.useEffect)(() => {
+    setIsEmailValid(
+      !collectEmail || (emailInputRef.current?.checkValidity() ?? false)
+    );
+  }, [email, collectEmail, stripe]);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
@@ -19046,11 +19105,13 @@ var PaymentForm = ({ onConfirm, financeData }) => {
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Input2,
             {
+              ref: emailInputRef,
               id: "email",
-              type: "text",
+              type: "email",
               value: email,
               autoComplete: "email",
               placeholder: "Enter email address",
+              required: true,
               onChange: (e2) => {
                 userEditedEmailRef.current = true;
                 setEmail(e2.target.value);
@@ -19081,7 +19142,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
           Button,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || isConfirmed || !isPaymentComplete || !isAddressComplete,
+            disabled: isLoading || !stripe || !elements || isConfirmed || !isPaymentComplete || !isAddressComplete || !isEmailValid,
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
@@ -22682,6 +22743,18 @@ var getPaymentMethodData = ({
       iconTitle: billingName || billingEmail || "Amazon Pay account",
       label: billingName || billingEmail || "Amazon Pay account"
     },
+    apple_pay: {
+      iconName: "applepay",
+      iconTitle: "Apple Pay",
+      label: cardLast4 ? "Apple Pay ending in" : "Apple Pay",
+      paymentLast4: cardLast4
+    },
+    google_pay: {
+      iconName: "google",
+      iconTitle: "Google Pay",
+      label: cardLast4 ? "Google Pay ending in" : "Google Pay",
+      paymentLast4: cardLast4
+    },
     cashapp: {
       iconName: "cashapp",
       iconTitle: accountName || billingEmail || "CashApp account",

package/dist/schematic-components.d.ts

@@ -26,6 +26,8 @@ declare interface AddOnsProps {
     currency?: string;
 }
 
+export declare const applyPrefilledQuantities: (entitlements: UsageBasedEntitlement[], prefill?: Record<string, number>) => UsageBasedEntitlement[];
+
 export declare const AutoTopup: ({ planCreditGrants, autoTopupConfigs, updateAutoTopupConfig, }: AutoTopupProps) => JSX.Element;
 
 declare type AutoTopupConfig = Pick<CompanyPlanCreditGrantView, "companyAutoTopupEnabled" | "companyAutoTopupThresholdCredits" | "companyAutoTopupAmount">;
@@ -2901,6 +2903,19 @@ export declare interface BypassConfig {
      * currency is locked (the selector is already hidden in those cases).
      */
     showCurrencySelector?: boolean;
+    /**
+     * Pre-fill pay-in-advance quantities, keyed by feature id.
+     *
+     * Only applies to entitlements whose price behavior is pay-in-advance; entries
+     * for other features (or unknown feature ids) are ignored. Values are clamped
+     * to whole numbers >= 0. Combine with `skipped.usageStage` /
+     * `skipped.addOnUsageStage` to land the customer directly on the checkout step
+     * with the quantities already set.
+     *
+     * @example
+     * { planId: "plan_abc", payInAdvanceQuantities: { feat_seats: 3 } }
+     */
+    payInAdvanceQuantities?: Record<string, number>;
 }
 
 export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement | null>>;
@@ -3399,6 +3414,20 @@ export declare interface CheckoutStageSkipConfig {
      * - undefined: Defaults to false (show stage)
      */
     creditStage?: boolean;
+    /**
+     * Skip the pay-in-advance quantity stage for the plan.
+     * - true: Skip directly to next stage (uses prefilled or current quantities)
+     * - false: Show quantity stage (user can review/change quantities)
+     * - undefined: Defaults to false (show stage)
+     */
+    usageStage?: boolean;
+    /**
+     * Skip the pay-in-advance quantity stage for add-ons.
+     * - true: Skip directly to next stage (uses prefilled or current quantities)
+     * - false: Show add-on quantity stage (user can review/change quantities)
+     * - undefined: Defaults to false (show stage)
+     */
+    addOnUsageStage?: boolean;
 }
 
 export declare type CheckoutState = {
@@ -3411,11 +3440,14 @@ export declare type CheckoutState = {
     bypassPlanSelection?: boolean;
     bypassAddOnSelection?: boolean;
     bypassCreditsSelection?: boolean;
+    bypassUsageSelection?: boolean;
+    bypassAddOnUsageSelection?: boolean;
     addOnIds?: string[];
     hideSkippedStages?: boolean;
     selectedCurrency?: string;
     showCurrencySelector?: boolean;
     startTrialIfAvailable?: boolean;
+    payInAdvanceQuantities?: Record<string, number>;
 };
 
 /**
@@ -6949,6 +6981,12 @@ declare interface FeatureEntitlement {
      * @memberof FeatureEntitlement
      */
     allocation?: number | null;
+    /**
+     * If the company has a credit-based entitlement for this feature, the credit cost per unit of usage
+     * @type {number}
+     * @memberof FeatureEntitlement
+     */
+    consumptionRate?: number | null;
     /**
      * If the company has a credit-based entitlement for this feature, the ID of the credit
      * @type {string}
@@ -6991,6 +7029,12 @@ declare interface FeatureEntitlement {
      * @memberof FeatureEntitlement
      */
     eventName?: string | null;
+    /**
+     * For event-based or credit-metered feature entitlements, the event subtype whose usage is tracked
+     * @type {string}
+     * @memberof FeatureEntitlement
+     */
+    eventSubtype?: string | null;
     /**
      * The ID of the feature
      * @type {string}

package/dist/schematic-components.esm.js

@@ -8202,6 +8202,7 @@ function FeatureEntitlementFromJSONTyped(json, ignoreDiscriminator) {
   }
   return {
     allocation: json["allocation"] == null ? void 0 : json["allocation"],
+    consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
     creditId: json["credit_id"] == null ? void 0 : json["credit_id"],
     creditRemaining: json["credit_remaining"] == null ? void 0 : json["credit_remaining"],
     creditReserved: json["credit_reserved"] == null ? void 0 : json["credit_reserved"],
@@ -8209,6 +8210,7 @@ function FeatureEntitlementFromJSONTyped(json, ignoreDiscriminator) {
     creditTotal: json["credit_total"] == null ? void 0 : json["credit_total"],
     creditUsed: json["credit_used"] == null ? void 0 : json["credit_used"],
     eventName: json["event_name"] == null ? void 0 : json["event_name"],
+    eventSubtype: json["event_subtype"] == null ? void 0 : json["event_subtype"],
     featureId: json["feature_id"],
     featureKey: json["feature_key"],
     metricPeriod: json["metric_period"] == null ? void 0 : MetricPeriodFromJSON(json["metric_period"]),
@@ -13224,18 +13226,26 @@ var reducer = (state, action) => {
       let bypassPlanSelection;
       let bypassAddOnSelection;
       let bypassCreditsSelection;
+      let bypassUsageSelection;
+      let bypassAddOnUsageSelection;
       if (config.skipped !== void 0) {
         bypassPlanSelection = config.skipped.planStage ?? false;
         bypassAddOnSelection = config.skipped.addOnStage ?? false;
         bypassCreditsSelection = config.skipped.creditStage ?? false;
+        bypassUsageSelection = config.skipped.usageStage ?? false;
+        bypassAddOnUsageSelection = config.skipped.addOnUsageStage ?? false;
       } else if (isStringFormat) {
         bypassPlanSelection = true;
         bypassAddOnSelection = false;
         bypassCreditsSelection = false;
+        bypassUsageSelection = false;
+        bypassAddOnUsageSelection = false;
       } else {
         bypassPlanSelection = false;
         bypassAddOnSelection = false;
         bypassCreditsSelection = false;
+        bypassUsageSelection = false;
+        bypassAddOnUsageSelection = false;
       }
       return {
         ...state,
@@ -13246,7 +13256,12 @@ var reducer = (state, action) => {
           bypassPlanSelection,
           bypassAddOnSelection,
           bypassCreditsSelection,
+          bypassUsageSelection,
+          bypassAddOnUsageSelection,
           ...config.addOnIds && { addOnIds: config.addOnIds },
+          ...config.payInAdvanceQuantities && {
+            payInAdvanceQuantities: config.payInAdvanceQuantities
+          },
           ...config.currency && {
             selectedCurrency: config.currency.toUpperCase()
           },
@@ -13282,7 +13297,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.16.2",
+  "X-Schematic-Components-Version": "2.17.1",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -17171,6 +17186,18 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
   }
   return acc;
 };
+var applyPrefilledQuantities = (entitlements, prefill) => {
+  if (!prefill) {
+    return entitlements;
+  }
+  return entitlements.map((entitlement) => {
+    const prefilled = prefill[entitlement.featureId];
+    if (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && typeof prefilled === "number") {
+      return { ...entitlement, quantity: Math.max(0, Math.floor(prefilled)) };
+    }
+    return entitlement;
+  });
+};
 var CheckoutDialog = ({ top }) => {
   const { t: t3 } = useTranslation();
   const {
@@ -17404,9 +17431,12 @@ var CheckoutDialog = ({ top }) => {
     effectiveCurrency
   ]);
   const [usageBasedEntitlements, setUsageBasedEntitlements] = useState8(
-    () => (selectedPlan?.entitlements || []).reduce(
-      createActiveUsageBasedEntitlementsReducer(featureUsage, planPeriod),
-      []
+    () => applyPrefilledQuantities(
+      (selectedPlan?.entitlements || []).reduce(
+        createActiveUsageBasedEntitlementsReducer(featureUsage, planPeriod),
+        []
+      ),
+      checkoutState?.payInAdvanceQuantities
     )
   );
   const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = useState8(() => {
@@ -17445,7 +17475,10 @@ var CheckoutDialog = ({ top }) => {
         allEntitlements.push(bypassEnt);
       }
     }
-    return allEntitlements;
+    return applyPrefilledQuantities(
+      allEntitlements,
+      checkoutState?.payInAdvanceQuantities
+    );
   });
   const payInAdvanceEntitlements = useMemo12(
     () => usageBasedEntitlements.filter(
@@ -17581,7 +17614,7 @@ var CheckoutDialog = ({ top }) => {
     hasInitialPaymentMethod
   ]);
   const [isBypassLoading, setIsBypassLoading] = useState8(
-    () => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection
+    () => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection || checkoutState?.bypassUsageSelection || checkoutState?.bypassAddOnUsageSelection
   );
   const [checkoutStage, setCheckoutStage] = useState8(() => {
     if (checkoutState?.addOnId) {
@@ -17601,7 +17634,7 @@ var CheckoutDialog = ({ top }) => {
   const effectiveCheckoutStage = useMemo12(() => {
     if (isBypassLoading) return checkoutStage;
     let id = checkoutStage;
-    while (id === "plan" && checkoutState?.bypassPlanSelection || id === "addons" && checkoutState?.bypassAddOnSelection || id === "credits" && checkoutState?.bypassCreditsSelection) {
+    while (id === "plan" && checkoutState?.bypassPlanSelection || id === "usage" && checkoutState?.bypassUsageSelection || id === "addons" && checkoutState?.bypassAddOnSelection || id === "addonsUsage" && checkoutState?.bypassAddOnUsageSelection || id === "credits" && checkoutState?.bypassCreditsSelection) {
       const idx = checkoutStages.findIndex((s) => s.id === id);
       const next2 = checkoutStages[idx + 1];
       if (!next2) break;
@@ -17826,9 +17859,12 @@ var CheckoutDialog = ({ top }) => {
     (updates) => {
       const plan = updates.plan;
       const period = showPeriodToggle ? updates.period || planPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
-      const updatedUsageBasedEntitlements = (plan.entitlements ?? []).reduce(
-        createActiveUsageBasedEntitlementsReducer(featureUsage, period),
-        []
+      const updatedUsageBasedEntitlements = applyPrefilledQuantities(
+        (plan.entitlements ?? []).reduce(
+          createActiveUsageBasedEntitlementsReducer(featureUsage, period),
+          []
+        ),
+        checkoutState?.payInAdvanceQuantities
       );
       if (period !== planPeriod || plan.id !== selectedPlan?.id) {
         setUsageBasedEntitlements((prev2) => {
@@ -17878,7 +17914,8 @@ var CheckoutDialog = ({ top }) => {
       featureUsage,
       shouldTrial,
       willTrialWithoutPaymentMethod,
-      handlePreviewCheckout
+      handlePreviewCheckout,
+      checkoutState?.payInAdvanceQuantities
     ]
   );
   const changePlanPeriod = useCallback7(
@@ -18106,9 +18143,15 @@ var CheckoutDialog = ({ top }) => {
       if (stage.id === "plan" && checkoutState.bypassPlanSelection) {
         return false;
       }
+      if (stage.id === "usage" && checkoutState.bypassUsageSelection) {
+        return false;
+      }
       if (stage.id === "addons" && checkoutState.bypassAddOnSelection) {
         return false;
       }
+      if (stage.id === "addonsUsage" && checkoutState.bypassAddOnUsageSelection) {
+        return false;
+      }
       if (stage.id === "credits" && checkoutState.bypassCreditsSelection) {
         return false;
       }
@@ -18120,9 +18163,15 @@ var CheckoutDialog = ({ top }) => {
       if (stage.id === "plan" && checkoutState?.bypassPlanSelection) {
         return false;
       }
+      if (stage.id === "usage" && checkoutState?.bypassUsageSelection) {
+        return false;
+      }
       if (stage.id === "addons" && checkoutState?.bypassAddOnSelection) {
         return false;
       }
+      if (stage.id === "addonsUsage" && checkoutState?.bypassAddOnUsageSelection) {
+        return false;
+      }
       if (stage.id === "credits" && checkoutState?.bypassCreditsSelection) {
         return false;
       }
@@ -18131,7 +18180,9 @@ var CheckoutDialog = ({ top }) => {
   }, [
     checkoutStages,
     checkoutState?.bypassPlanSelection,
+    checkoutState?.bypassUsageSelection,
     checkoutState?.bypassAddOnSelection,
+    checkoutState?.bypassAddOnUsageSelection,
     checkoutState?.bypassCreditsSelection
   ]);
   const shouldShowBypassOverlay = isBypassLoading;
@@ -18870,6 +18921,8 @@ var PaymentForm = ({ onConfirm, financeData }) => {
   const [isPaymentComplete, setIsPaymentComplete] = useState11(false);
   const [isPaymentReady, setIsPaymentReady] = useState11(false);
   const [loadError, setLoadError] = useState11();
+  const [isEmailValid, setIsEmailValid] = useState11(() => !collectEmail);
+  const emailInputRef = useRef8(null);
   const [isAddressComplete, setIsAddressComplete] = useState11(
     () => !shouldCollectAddress
   );
@@ -18882,6 +18935,11 @@ var PaymentForm = ({ onConfirm, financeData }) => {
       setEmail(billing.email);
     }
   }, [billing?.email]);
+  useEffect5(() => {
+    setIsEmailValid(
+      !collectEmail || (emailInputRef.current?.checkValidity() ?? false)
+    );
+  }, [email, collectEmail, stripe]);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
@@ -18981,11 +19039,13 @@ var PaymentForm = ({ onConfirm, financeData }) => {
           /* @__PURE__ */ jsx33(
             Input2,
             {
+              ref: emailInputRef,
               id: "email",
-              type: "text",
+              type: "email",
               value: email,
               autoComplete: "email",
               placeholder: "Enter email address",
+              required: true,
               onChange: (e2) => {
                 userEditedEmailRef.current = true;
                 setEmail(e2.target.value);
@@ -19016,7 +19076,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
           Button,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || isConfirmed || !isPaymentComplete || !isAddressComplete,
+            disabled: isLoading || !stripe || !elements || isConfirmed || !isPaymentComplete || !isAddressComplete || !isEmailValid,
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
@@ -22624,6 +22684,18 @@ var getPaymentMethodData = ({
       iconTitle: billingName || billingEmail || "Amazon Pay account",
       label: billingName || billingEmail || "Amazon Pay account"
     },
+    apple_pay: {
+      iconName: "applepay",
+      iconTitle: "Apple Pay",
+      label: cardLast4 ? "Apple Pay ending in" : "Apple Pay",
+      paymentLast4: cardLast4
+    },
+    google_pay: {
+      iconName: "google",
+      iconTitle: "Google Pay",
+      label: cardLast4 ? "Google Pay ending in" : "Google Pay",
+      paymentLast4: cardLast4
+    },
     cashapp: {
       iconName: "cashapp",
       iconTitle: accountName || billingEmail || "CashApp account",
@@ -29979,6 +30051,7 @@ export {
   UnsubscribeButton,
   UpcomingBill,
   Viewport,
+  applyPrefilledQuantities,
   cardBoxShadow,
   createActiveUsageBasedEntitlementsReducer,
   defaultSettings,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "2.16.2",
+  "version": "2.17.1",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -40,16 +40,16 @@
     "pako": "^2.1.0",
     "react-i18next": "16.1.6",
     "styled-components": "^6.4.2",
-    "uuid": "^14.0.0"
+    "uuid": "^14.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@eslint/json": "^2.0.0",
     "@eslint/markdown": "^8.0.2",
     "@microsoft/api-extractor": "^7.58.9",
-    "@openapitools/openapi-generator-cli": "^2.38.0",
+    "@openapitools/openapi-generator-cli": "^2.39.0",
     "@stripe/react-stripe-js": "^6.6.0",
-    "@swc/core": "^1.15.41",
+    "@swc/core": "^1.15.43",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -64,15 +64,15 @@
     "eslint-plugin-import-x": "^4.16.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "globals": "^17.6.0",
-    "happy-dom": "^20.10.5",
+    "globals": "^17.7.0",
+    "happy-dom": "^20.10.6",
     "jsdom": "^29.1.1",
     "msw": "^2.14.6",
     "prettier": "^3.8.4",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.61.1",
+    "typescript-eslint": "^8.62.0",
     "vitest": "^4.1.9"
   },
   "peerDependencies": {