The Payment Element is a pre-built UI component that lets you accept 25+ payment methods with a single integration. It automatically shows the most relevant payment methods based on your customer's location, currency, and other factors.
The Payment Element is the recommended way to accept payments with Stripe. It provides a unified interface for collecting payment details across multiple payment methods, including cards, digital wallets, bank transfers, and more.
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements, PaymentElement, useElements, useStripe } from 'vue-stripe'
const stripePromise = loadStripe('pk_test_xxx')
const stripe = useStripe()
const elements = useElements()
async function handleSubmit() {
if (!stripe.value || !elements.value) {
return
}
// Trigger form validation and wallet collection
const { error: submitError } = await elements.value.submit()
if (submitError) {
// Show error to your customer
console.error(submitError.message)
return
}
// Create the PaymentIntent and obtain clientSecret from your server endpoint
const res = await fetch('/create-payment-intent', {
method: 'POST',
})
const { clientSecret } = await res.json()
const { error } = await stripe.value.confirmPayment({
elements: elements.value,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
})
if (error) {
console.error(error.message)
}
else {
// Your customer will be redirected to your return_url
}
}
</script>
<template>
<Elements :stripe="stripePromise" :options="{ clientSecret: '{{CLIENT_SECRET}}' }">
<form @submit.prevent="handleSubmit">
<PaymentElement />
<button type="submit" :disabled="!stripe || !elements">
Pay
</button>
</form>
</Elements>
</template>
<template>
<PaymentElement
:options="{
layout: 'tabs',
business: {
name: 'My Business',
},
fields: {
billingDetails: {
email: 'never',
},
},
}"
/>
</template>
| Prop | Type | Description |
|---|---|---|
options | PaymentElementOptions | Configuration options for the Payment Element. See available options. |
| Event | Description |
|---|---|
@ready | Triggered when the Payment Element is fully rendered and can accept imperative calls |
@change | Triggered when data exposed by the Payment Element changes (e.g., when there is an error) |
@focus | Triggered when the Payment Element receives focus |
@blur | Triggered when the Payment Element loses focus |
@escape | Triggered when the escape key is pressed within the Payment Element |
@loaderstart | Triggered when the loader UI is mounted to the DOM and ready to be displayed |
@loadererror | Triggered when the Payment Element fails to load |
<script setup>
import { ref } from 'vue'
import { PaymentElement, useElements, useStripe } from 'vue-stripe'
const stripe = useStripe()
const elements = useElements()
const errorMessage = ref(null)
async function handleSubmit() {
if (!stripe.value || !elements.value) {
return
}
const { error: submitError } = await elements.value.submit()
if (submitError) {
errorMessage.value = submitError.message
}
// Continue with payment confirmation...
}
</script>
<template>
<form @submit.prevent="handleSubmit">
<PaymentElement
@change="(event) => {
if (event.complete) {
// Payment method is ready
}
}"
/>
<button type="submit">
Pay
</button>
<div v-if="errorMessage" class="error">
{{ errorMessage }}
</div>
</form>
</template>
The Payment Element automatically displays the most relevant payment methods based on:
Supported payment methods include cards, Apple Pay, Google Pay, Link, bank transfers, and many regional payment methods.
For detailed information about the Payment Element and its usage, refer to the Stripe Payment Element documentation.