Collect physical addresses and phone numbers

Learn how to collect addresses and phone numbers during one-off payment flows.

To collect complete addresses for billing or shipping, use the Address Element. You might need to collect a full billing address to calculate taxes, for example. The Payment Element only collects the billing address details required to complete the payment, but you can configure it to collect other billing details.

Other reasons you might want to use the Address Element:

To collect customer phone numbers
To enable autocomplete
To prefill billing information in the Payment Element by passing in a shipping address

Stripe combines the collected address information and the payment method to create a PaymentIntent.

Create an Address Element

When you create an Address Element, you specify either a shipping or billing mode . The Address Element mode determines whether the shipping or billing addressed is passed to confirm the PaymentIntent.

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 Address Element with other elements

You can collect both shipping and billing addresses by using multiple Address Elements, one of each mode, on your page.

If you need to collect both shipping and billing addresses and only want to use one Address Element, 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 behaviour 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.

Collect physical addresses and phone numbers

Learn how to collect addresses and phone numbers during one-off payment flows.

Create an Address Element

Use Address Element with other elements

See also