feat: Pick elements_configuration from the checkout start response

src/networking/backend.ts

@@ -84,15 +84,15 @@ export class Backend {
     type CheckoutStartRequestBody = {
       app_user_id: string;
       product_id: string;
-      email?: string;
       presented_offering_identifier: string;
+      price_id: string;
       presented_placement_identifier?: string;
       offer_id?: string;
-      price_id: string;
       applied_targeting_rule?: {
         rule_id: string;
         revision: number;
       };
+      email?: string;
     };
 
     const requestBody: CheckoutStartRequestBody = {

src/networking/responses/checkout-start-response.ts

@@ -1,7 +1,26 @@
+export enum StripeElementsMode {
+  Payment = "payment",
+  Setup = "setup",
+}
+
+export enum StripeElementsSetupFutureUsage {
+  OffSession = "off_session",
+  OnSession = "on_session",
+}
+
+interface StripeElementsConfiguration {
+  mode: StripeElementsMode;
+  payment_method_types: string[];
+  setup_future_usage: StripeElementsSetupFutureUsage;
+  amount?: number;
+  currency?: string;
+}
+
 export interface CheckoutStartResponse {
   operation_session_id: string;
   data: {
     stripe_account_id?: string;
     publishable_api_key?: string;
+    elements_configuration?: StripeElementsConfiguration;
   };
 }

src/stories/utils/purchase-response-builder.ts

@@ -1,4 +1,4 @@
-import type { CheckoutStartResponse } from "src/networking/responses/checkout-start-response";
+import { StripeElementsMode, StripeElementsSetupFutureUsage, type CheckoutStartResponse } from "src/networking/responses/checkout-start-response";
 
 const publishableApiKey = import.meta.env.VITE_STORYBOOK_PUBLISHABLE_API_KEY;
 const accountId = import.meta.env.VITE_STORYBOOK_ACCOUNT_ID;
@@ -21,6 +21,13 @@ export const buildCheckoutStartResponse = (): CheckoutStartResponse => {
     data: {
       publishable_api_key: publishableApiKey,
       stripe_account_id: accountId,
+      elements_configuration: {
+        mode: StripeElementsMode.Payment,
+        payment_method_types: ["card"],
+        setup_future_usage: StripeElementsSetupFutureUsage.OffSession,
+        amount: 1000,
+        currency: "usd",
+      },
     },
   };
 

src/ui/states/state-needs-payment-info.svelte

@@ -130,11 +130,12 @@
   }
 
   onMount(async () => {
-    const stripePk = paymentInfoCollectionMetadata.data.publishable_api_key;
-    const stripeAcctId = paymentInfoCollectionMetadata.data.stripe_account_id;
-
-    if (!stripePk || !stripeAcctId) {
-      throw new Error("Stripe publishable key or account ID not found");
+    const configurationData = paymentInfoCollectionMetadata.data;
+    const stripePk = configurationData.publishable_api_key;
+    const stripeAcctId = configurationData.stripe_account_id;
+    const elementsConfiguration = configurationData.elements_configuration;
+    if (!stripePk || !stripeAcctId || !elementsConfiguration) {
+      throw new Error("Stripe configuration is missing");
     }
 
     stripe = await loadStripe(stripePk, {
@@ -148,11 +149,11 @@
     elements = stripe.elements({
       loader: "always",
       locale: localeToUse,
-      mode: "payment",
-      paymentMethodTypes: ["card"],
-      setup_future_usage: "off_session",
-      amount: productDetails.currentPrice.amountMicros / 10000,
-      currency: productDetails.currentPrice.currency.toLowerCase(),
+      mode: elementsConfiguration.mode,
+      paymentMethodTypes: elementsConfiguration.payment_method_types,
+      setupFutureUsage: elementsConfiguration.setup_future_usage,
+      amount: elementsConfiguration.amount,
+      currency: elementsConfiguration.currency,
       appearance: {
         theme: "stripe",
         labels: "floating",