Skip to content
Sign in
An image of the Stripe logo
Create account
Sign in
Home
Payments
Finance automation
Banking as a service
Developer tools
No-code
All products
Home
Payments
Finance automation
Home
Payments
Finance automation
Banking as a service
Developer tools
Overview
Online payments
In-person payments
Multiparty payments
After the payment
Add payment methods
Fraud detection
Payment Links
Stripe Checkout UI
Stripe Elements UI
    Overview
    Elements
    Address Element
      Listen for address input
    Payment Element
    Link Authentication Element
    Payment Request Button
    Payment Method Messaging Element
    Other Guides
    Elements Appearance API
Financial Connections
Crypto
Identity
Climate
About the APIs
Regulation support
Implementation guides
Testing
Elements
·
HomePaymentsStripe Elements UI

Address Element

Collect billing and shipping addresses, with autocomplete and more.

The Address Element is an UI component for accepting complete addresses. Use it to collect shipping addresses, or when you need a complete billing address, such as for tax purposes.

(If you only need a single address field for verification—like the postal code in a card transaction—then you don’t need the Address Element. The Payment Element displays these fields automatically.)

Theme
Size
Customer Location
Phone number
Autocomplete
Contacts

Start with examples

To see the Address Element in action, start with one of these examples:

Collect customer addresses

Code and instructions for saving an address using the Address Element.

Clone a sample app on GitHub
HTML · React

Create an Address Element

When you create an Address Element, specify whether to use it in shipping or billing mode.

In shipping mode, the element does two things:

  • Collect a shipping address.
  • Offer the customer the option to use it as a billing address too.
index.js
View full sample
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); const appearance = { /* appearance */ }; const options = { mode: 'shipping' }; const elements = stripe.elements({
clientSecret
, appearance }); const addressElement = elements.create('address', options); addressElement.mount('#address-element');

Use an address

The Address Element automatically works with the Payment or Pay Button Element. When a customer provides an address and a payment method, Stripe combines them into a single PaymentIntent with the address in the correct field.

Automatic behavior

The element’s default behavior depends on its mode.

In shipping mode, the address is stored in these fields:

  • It appears in the shipping field.
  • If the customer indicates it is also the billing address, it also appears in the billing_details field.

To enable combining information, create all elements from the same Elements object, as in this example:

index.js
View full sample
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); const appearance = { /* appearance */ }; const options = { mode: 'shipping' }; const elements = stripe.elements({
clientSecret
}); const addressElement = elements.create('address', options); const paymentElement = elements.create('payment'); addressElement.mount('#address-element'); paymentElement.mount('#payment-element');

Custom behavior

Normally, the Address Element’s default behavior is enough. But in a complex payment flow, you may need to write custom responses to the customer’s input. For information, see Listen for address input.

Autocomplete

The Address Element can autocomplete addresses for 25 countries. If your customer selects a supported country for their address, then they see the autocomplete options. These are the supported countries for autocomplete:

If you use the Address Element and the Payment Element together, Stripe enables autocomplete with no configuration required.

If you use the Address Element alone, you must use your own Google Maps API Places Library key, which is managed separately from your Stripe account. Pass the key in the autocomplete.apiKey option.

Autofill with Link

Link, Stripe’s one-click checkout tool, saves and autofills your customers’ payment and shipping information. When a returning Link customer authenticates, Stripe autofills their shipping information in the Address element.

A payment form. The user has entered an email address, and the shipping address and payment info appear as autofilled blocks, with a link nearby to change them.

To enable autofill, create all elements from the same Elements object, as in this example:

index.js
View full sample
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); const appearance = { /* appearance */ }; const options = { mode: 'shipping' }; const elements = stripe.elements({
clientSecret
}); const linkAuthElement = elements.create('linkAuthentication'); const addressElement = elements.create('address', options); const paymentElement = elements.create('payment'); linkAuthElement.mount('#link-auth-element'); addressElement.mount('#address-element'); paymentElement.mount('#payment-element');

Appearance

You can use the Appearance API to control the style of all elements. Choose a theme or update specific details.

Examples of light and dark modes for the address element.

For instance, choose the “flat” theme and override the primary text color.

index.js
View full sample
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); const appearance = { theme: 'flat', variables: { colorPrimaryText: '#262626' } };

See the Appearance API documentation for a full list of themes and variables.

Was this page helpful?
Need help? Contact Support.
Watch our developer tutorials.
Check out our product changelog.
Questions? Contact Sales.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Start with examples
Create an Address Element
Use an address
Autocomplete
Autofill with Link
Appearance
Stripe Shell
Test mode
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Login to your Stripe account and press Control + Backtick on your keyboard to start managing your Stripe resources in test mode. - View supported Stripe commands: - Find webhook events: - Listen for webhook events: - Call Stripe APIs: stripe [api resource] [operation] (e.g. )
The Stripe Shell is best experienced on desktop.
$