The Link Authentication Element collects email addresses and allows users to log in to Link, Stripe's one-click checkout solution. When customers authenticate with Link, they can use saved payment methods and shipping addresses for faster checkout.
The Link Authentication Element is typically placed before the Payment Element to enable Link checkout for returning customers.
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements, LinkAuthenticationElement } from 'vue-stripe'
const stripePromise = loadStripe('pk_test_xxx')
</script>
<template>
<Elements :stripe="stripePromise">
<form>
<LinkAuthenticationElement />
<PaymentElement />
<button type="submit">
Pay
</button>
</form>
</Elements>
</template>
<template>
<LinkAuthenticationElement
:options="{
defaultValues: {
email: 'customer@example.com',
},
}"
/>
</template>
| Prop | Type | Description |
|---|---|---|
options | LinkAuthenticationElementOptions | Configuration options for the Link Authentication Element. See available options. |
| Event | Description |
|---|---|
@ready | Triggered when the Link Authentication Element is fully rendered |
@change | Triggered when the email address changes or when authentication status 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 { LinkAuthenticationElement } from 'vue-stripe'
const email = ref(null)
function handleChange(event) {
if (event.valueType === 'email') {
email.value = event.value
}
if (event.complete) {
// Email is valid and user is authenticated with Link
console.log('Link authenticated:', email.value)
}
}
</script>
<template>
<form>
<LinkAuthenticationElement @change="handleChange" />
<PaymentElement />
<button type="submit">
Pay
</button>
</form>
</template>
The Link Authentication Element works seamlessly with the Payment Element:
<template>
<Elements :stripe="stripePromise">
<form>
<LinkAuthenticationElement />
<PaymentElement />
<button type="submit">
Pay
</button>
</form>
</Elements>
</template>
When a customer authenticates with Link, the Payment Element will automatically show their saved payment methods.
For detailed information about the Link Authentication Element and its usage, refer to the Stripe Link Authentication Element documentation.