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.
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.
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.
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