diff --git a/elements-with-checkout-sessions/client/html/index.js b/elements-with-checkout-sessions/client/html/index.js
index 0cab486d71..e7bfc50e33 100644
--- 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
index 78c44af6b1..78d629cb06 100644
--- 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
index b2374e8ede..6fcde821bd 100644
--- 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}
/>
+
Billing address
+
Payment