The Address Element collects address details for 236+ regional formats. It automatically adapts to show the correct fields based on the customer's country, making it easy to collect accurate address information for shipping and billing.
The Address Element can be used in two modes:
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { AddressElement, Elements } from 'vue-stripe'
const stripePromise = loadStripe('pk_test_xxx')
</script>
<template>
<Elements :stripe="stripePromise">
<form>
<AddressElement />
<button type="submit">
Continue
</button>
</form>
</Elements>
</template>
<template>
<AddressElement
:options="{
mode: 'billing',
allowedCountries: ['US', 'CA', 'GB'],
blockPoBox: true,
fields: {
phone: 'always',
},
}"
/>
</template>
Vue Stripe provides specialized components for billing and shipping addresses:
<script setup>
import { BillingAddressElement } from 'vue-stripe/checkout'
</script>
<template>
<BillingAddressElement />
</template>
<script setup>
import { ShippingAddressElement } from 'vue-stripe/checkout'
</script>
<template>
<ShippingAddressElement />
</template>
| Prop | Type | Description |
|---|---|---|
options | AddressElementOptions | Configuration options for the Address Element. See available options. |
| Event | Description |
|---|---|
@ready | Triggered when the Address Element is fully rendered |
@change | Triggered when address data changes |
@focus | Triggered when the Element receives focus |
@blur | Triggered when the Element loses focus |
@loaderstart | Triggered when the loader UI is mounted |
@loadererror | Triggered when the Element fails to load |
<script setup>
import { ref } from 'vue'
import { AddressElement, useElements } from 'vue-stripe'
const elements = useElements()
const address = ref(null)
async function handleChange(event) {
if (event.complete) {
const addressElement = elements.value?.getElement(AddressElement)
if (addressElement) {
const { complete, value } = await addressElement.getValue()
if (complete) {
address.value = value
}
}
}
}
</script>
<template>
<form>
<AddressElement @change="handleChange" />
<button type="submit">
Continue
</button>
</form>
</template>
The Address Element supports 236+ countries and automatically formats address fields based on the selected country. It handles:
<template>
<BillingAddressElement
:options="{
fields: {
phone: 'always',
},
}"
/>
</template>
<template>
<ShippingAddressElement
:options="{
fields: {
phone: 'always',
},
}"
/>
</template>
<template>
<AddressElement
:options="{
allowedCountries: ['US', 'CA', 'MX'],
}"
/>
</template>
For detailed information about the Address Element and its usage, refer to the Stripe Address Element documentation.