Add Vite cacheDir for parallel testing, document DOMAIN for React, add billing address element (stripe-samples#3095)

chrislim-stripe · web-flow · commit 6daffdc81f61 · 2026-04-24T14:07:05.000-07:00
Fixes: Added Vite cacheDir for parallel testing, document DOMAIN for React, and vertically centered html
diff --git a/custom-payment-flow/client/react-cra/vite.config.mjs b/custom-payment-flow/client/react-cra/vite.config.mjs
@@ -8,6 +8,7 @@ export default defineConfig({
   server: {
     port: 3000,
     host: "0.0.0.0",
+    allowedHosts: ["frontend", "localhost", "web"],
     proxy: {
         '/api': {
           target: 'http://127.0.0.1:4242',
diff --git a/elements-with-checkout-sessions/.env.example b/elements-with-checkout-sessions/.env.example
@@ -2,5 +2,6 @@ STRIPE_PUBLISHABLE_KEY=<replace-with-your-publishable-key>
 STRIPE_SECRET_KEY=<replace-with-your-secret-key>
 STRIPE_WEBHOOK_SECRET=<replace-with-your-webhook-secret>
 STATIC_DIR=../../client/html
+# For React/Vue clients, set to the dev server URL (e.g. http://localhost:3000)
 DOMAIN=http://localhost:4242
 PORT=4242
diff --git a/elements-with-checkout-sessions/README.md b/elements-with-checkout-sessions/README.md
@@ -158,3 +158,11 @@ The dev server starts on port 3000 and proxies `/api` requests to
 `http://127.0.0.1:4242`. Navigate to
 [http://localhost:3000](http://localhost:3000) to see the payment form.
 Make sure a backend server is running on port 4242 first.
+
+**Important:** Set `DOMAIN` to your Vite dev server URL so Stripe
+redirects back to the React app after payment:
+
+```bash
+# In your server's .env
+DOMAIN=http://localhost:3000
+```
diff --git a/elements-with-checkout-sessions/client/html/index.css b/elements-with-checkout-sessions/client/html/index.css
@@ -9,7 +9,9 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
 }
 
 form {
@@ -42,6 +44,11 @@ form {
   margin-top: 16px;
 }
 
+#address-element {
+  margin-bottom: 24px;
+  margin-top: 16px;
+}
+
 #email {
   border-radius: 5px;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
diff --git a/elements-with-checkout-sessions/client/html/index.html b/elements-with-checkout-sessions/client/html/index.html
@@ -17,6 +17,10 @@
         <input type="email" id="email"
       /></label>
       <div id="email-errors"></div>
+      <h4>Billing address</h4>
+      <div id="address-element">
+        <!--Stripe.js injects the Address Element-->
+      </div>
       <h4>Payment</h4>
       <div id="payment-element">
         <!--Stripe.js injects the Payment Element-->
diff --git a/elements-with-checkout-sessions/client/html/index.js b/elements-with-checkout-sessions/client/html/index.js
@@ -72,6 +72,9 @@ async function initialize() {
     }
   });
 
+  const addressElement = checkout.createBillingAddressElement();
+  addressElement.mount("#address-element");
+
   const paymentElement = checkout.createPaymentElement();
   paymentElement.mount("#payment-element");
 }
diff --git a/elements-with-checkout-sessions/client/react-cra/src/App.css b/elements-with-checkout-sessions/client/react-cra/src/App.css
@@ -40,6 +40,11 @@ form {
   margin-top: 16px;
 }
 
+#address-element {
+  margin-bottom: 24px;
+  margin-top: 16px;
+}
+
 #email {
   border-radius: 5px;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
diff --git a/elements-with-checkout-sessions/client/react-cra/src/CheckoutForm.jsx b/elements-with-checkout-sessions/client/react-cra/src/CheckoutForm.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import {
   PaymentElement,
+  BillingAddressElement,
   useCheckout
 } from '@stripe/react-stripe-js/checkout';
 
@@ -104,6 +105,8 @@ const CheckoutForm = () => {
         error={emailError}
         setError={setEmailError}
       />
+      <h4>Billing address</h4>
+      <BillingAddressElement id="address-element" />
       <h4>Payment</h4>
       <PaymentElement id="payment-element" />
       <button disabled={!checkoutState.checkout.canConfirm || isSubmitting} id="submit">
diff --git a/elements-with-checkout-sessions/client/react-cra/vite.config.mjs b/elements-with-checkout-sessions/client/react-cra/vite.config.mjs
@@ -17,6 +17,7 @@ export default defineConfig({
         }
     }
   },
+  cacheDir: process.env.VITE_CACHE_DIR || 'node_modules/.vite',
   build: {
     outDir: "build",
   },
diff --git a/elements-with-checkout-sessions/testing/manual-test.sh b/elements-with-checkout-sessions/testing/manual-test.sh
@@ -134,6 +134,7 @@ REACT_DIR="$SAMPLE_DIR/client/react-cra"
 
 for i in $(seq 0 6); do
   VITE_SERVER_URL="http://localhost:$((4242 + i))" \
+  VITE_CACHE_DIR="/tmp/vite-cache-$((3000 + i))" \
   PORT=$((3000 + i)) \
     npx --prefix "$REACT_DIR" vite --config "$REACT_DIR/vite.config.mjs" "$REACT_DIR" >/dev/null 2>&1 &
   PIDS+=($!)
diff --git a/payment-element/client/react-cra/vite.config.mjs b/payment-element/client/react-cra/vite.config.mjs
@@ -8,6 +8,7 @@ export default defineConfig({
   server: {
     port: 3000,
     host: "0.0.0.0",
+    allowedHosts: ["frontend", "localhost", "web"],
     proxy: {
         '/api': {
           target: 'http://127.0.0.1:4242',
diff --git a/prebuilt-checkout-page/client/react-cra/vite.config.mjs b/prebuilt-checkout-page/client/react-cra/vite.config.mjs
@@ -8,6 +8,7 @@ export default defineConfig({
   server: {
     port: 3000,
     host: "0.0.0.0",
+    allowedHosts: ["frontend", "localhost", "web"],
     proxy: {
         '/api': {
           target: 'http://127.0.0.1:4242',
diff --git a/spec/elements_with_checkout_sessions_e2e_spec.rb b/spec/elements_with_checkout_sessions_e2e_spec.rb
@@ -7,34 +7,76 @@
 
   example 'happy path' do
     # Wait for the dahlia SDK to render the Payment Element iframe.
-    # The iframe title is "Secure payment input frame" and its src contains
-    # "elements-inner-payment"; filter by title so we don't match the hidden
-    # controller or metrics iframes that Stripe.js also injects.
     expect(page).to have_css(
       '#payment-element iframe[title="Secure payment input frame"]', wait: 30
     )
 
+    # Wait for the Billing Address Element iframe to render.
+    expect(page).to have_css(
+      '#address-element iframe[title="Secure address input frame"]', wait: 30
+    )
+
     # Email is a plain HTML input on the merchant's page (not inside a Stripe
     # iframe). After filling it, Tab moves focus to the next field, which
     # triggers the blur handler that calls actions.updateEmail().
     email_input = find('#email')
     email_input.fill_in with: "test#{SecureRandom.hex(4)}@example.com"
     email_input.send_keys(:tab)
 
+    # Fill billing address fields inside the Billing Address Element iframe.
+    # Field names verified from iframe DOM inspection:
+    #   input[name="name"]               - Full name
+    #   select[name="country"]           - Country or region
+    #   input[name="addressLine1"]       - Address line 1
+    #   input[name="addressLine2"]       - Address line 2
+    #   input[name="locality"]           - City
+    #   select[name="administrativeArea"] - State
+    #   input[name="postalCode"]         - ZIP code
+    within_frame first('#address-element iframe[title="Secure address input frame"]') do
+      fill_in 'name', with: 'Jenny Rosen'
+      select 'United States', from: 'country'
+
+      # Typing in addressLine1 triggers a Google autocomplete dropdown.
+      # Escape dismisses the dropdown; Tab blurs the field which causes
+      # the address element to expand individual city/state/zip fields.
+      # (Verified: Escape alone leaves expanded fields hidden; Tab is
+      # required to trigger the switch from autocomplete to manual mode.)
+      address_field = find('[name="addressLine1"]')
+      address_field.fill_in with: '123 Main St'
+      address_field.send_keys(:escape)
+      address_field.send_keys(:tab)
+
+      # Wait for the expanded fields to become visible
+      find('[name="locality"]', wait: 5)
+
+      fill_in 'locality', with: 'San Francisco'
+      select 'California', from: 'administrativeArea'
+      fill_in 'postalCode', with: '94111'
+    end
+
+    # Fill card details inside the Payment Element iframe.
+    # The Payment Element renders an accordion with multiple payment methods.
+    # Click "Card" to expand the card form. When the Billing Address Element
+    # is present, the Payment Element does not show country or postal code
+    # fields — only card number, expiry, and CVC.
+    # Field names verified from iframe DOM inspection:
+    #   div[data-value="card"]  - Card accordion tab (always present)
+    #   input[name="number"]    - Card number
+    #   input[name="expiry"]    - Expiry date
+    #   input[name="cvc"]       - CVC
     within_frame first('#payment-element iframe[title="Secure payment input frame"]') do
-      # The Payment Element may render as an accordion with multiple payment
-      # methods. If so, click "Card" to expand the card form. When only card
-      # is available, the fields are shown directly with no accordion.
-      if page.has_css?('[data-value="card"]', wait: 5)
-        find('[data-value="card"]').click
-      end
+      find('[data-value="card"]').click
 
       fill_in 'number', with: '4242424242424242'
       fill_in 'expiry', with: '12 / 33'
       fill_in 'cvc', with: '123'
 
-      select 'United States', from: 'country'
-      fill_in 'postalCode', with: '10000'
+      # Uncheck Link "Save my information" if present.
+      # Click the label to toggle the checkbox.
+      # Verified from local DOM: label[for="payment-linkOptInInput"]
+      if page.has_css?('label[for="payment-linkOptInInput"]', wait: 2)
+        find('label[for="payment-linkOptInInput"]').click
+      end
     end
 
     # Wait for the Pay button to become enabled. The SDK disables it until

Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,9 @@ async function initialize() {`
`72`	`72`	`}`
`73`	`73`	`});`
`74`	`74`
	`75`	`+ const addressElement = checkout.createBillingAddressElement();`
	`76`	`+ addressElement.mount("#address-element");`
	`77`	`+`
`75`	`78`	`const paymentElement = checkout.createPaymentElement();`
`76`	`79`	`paymentElement.mount("#payment-element");`
`77`	`80`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ export default defineConfig({`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`	`},`
	`20`	`+ cacheDir: process.env.VITE_CACHE_DIR \|\| 'node_modules/.vite',`
`20`	`21`	`build: {`
`21`	`22`	`outDir: "build",`
`22`	`23`	`},`