Sign in
An image of the Stripe logo
Create account
Sign in
Home
Payments
Business operations
Financial services
Developer tools
No-code
All products
Home
Payments
Business operations
Home
Payments
Business operations
Financial services
Developer tools
Support
Overview
Online payments
Products and prices
Invoicing
Subscriptions
Quotes
In-person payments
Multiparty payments
After the payment
Add payment methods
Payment Links
Stripe Checkout
Stripe Elements
    Overview
    Elements
    Address Element
      Collect customer address information
    Payment Element
    Payment Request Button
    Other Guides
    Elements Appearance API
About the APIs
Regulation support
Implementation guides
Testing
Elements
·
HomePaymentsStripe Elements

Address Element

Learn more about the Address Element and how to integrate it.

Overview

The Address Element is an embeddable UI component that autofills your customers’ billing and shipping addresses quickly and accurately.

Features include:

  • Global support-Support 236 regional address formats, including right to left address formats
  • Autocomplete-Decrease checkout time, reduce validation errors, and increase checkout conversion with built-in address autocomplete
  • Pre-fill saved addresses-Pre-fill addresses at page load when you already have an address saved for your customer
  • Customized appearance-Customize the Address Element to match the design of the rest of your page with the Appearance API
  • Seamless Elements integration-Reuse an existing Elements instance to save time, and pass data automatically with the Payment Element and Link
  • Support for any device-Available for Web and Stripe iOS, Android, and React Native mobile SDKs

 

Use Address Element with other elements

There can only be one Address Element per Elements group. If you need to collect both shipping and billing addresses, use the Address Element in Shipping mode and use the Payment Element to collect only the necessary billing address details.

When you use the Address Element with other elements, you can expect some automatic behavior when confirming the PaymentIntent or SetupIntent. The Address Element validates completeness upon confirming the PaymentIntent or SetupIntent and then displays errors for each field if there are any validation errors.

Shipping mode

Using the Address Element in shipping mode and the Payment Element in the same Elements group presents a checkbox in the Payment Element allowing users to use their shipping address as the billing address for card payments or other payment methods that require full billing address details. When a user opts to do this, Stripe uses the shipping address to populate the payment_method_data.billing_details when confirming the PaymentIntent or SetupIntent. If the user opts not to use the same address for shipping and billing, the shipping details will not be used as billing details in the PaymentIntent or SetupIntent and the user will manually enter only the required billing details. Stripe adds the shipping details to the shipping parameter when confirming the PaymentIntent. For the SetupIntent, you can retrieve the address by listening to the change event and store the shipping details in your own database.

When the Address Element is in shipping mode and used with the Link Authentication Element in the same Elements group, any addresses your customer saved in Link appear in the Address Element. Your customer can also add or remove Link addresses through the Address Element. When they add a new address, Stripe saves it to Link when confirming the PaymentIntent or SetupIntent.

Billing mode

The Address Element in Billing mode can be used with the Payment Element. By default, the Payment Element only collects necessary billing address details. Stripe recommends collecting only necessary billing details to save your customers time during checkout, but in cases where you need to collect full billing address, like for calculating tax for digital goods and services, you can use the Address Element in Billing mode.

When the Address Element is in billing mode and used with the Payment Element in the same Elements group, Stripe automatically adds the billing address details when confirming the PaymentIntent or SetupIntent. The billing address fields in the Payment Element are automatically hidden for cards and other payment methods that require full billing address details.

When the Address Element is in Billing mode and used with the Link Authentication Element in the same Elements group, your customer can update their Link billing details in the Address Element interface.

Autocomplete

You can use autocomplete in the Address Element when you use it with the Payment Element in the same Elements group. Autocomplete works automatically without any extra configuration needed.

If you aren’t using the address element with the Payment Element and would like autocomplete, you must use your own Google Maps API Places Library key, which is managed separately from your Stripe account.

Autocomplete is currently supported for 25 countries. This means if your customer selects a supported country for their address, then they will see the autocomplete options. These are the countries autocomplete is supported for:

Start with a guide

Add the Address Element
Web · iOS · Android · React Native
View the Stripe.js reference
Was this page helpful?
Questions? Contact us.
Watch our developer tutorials.
Check out our product changelog.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Overview
Use Address Element with other elements
Start with a guide
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.
$