Stripe Elements are pre-built UI components that let you collect payment details securely. They're hosted by Stripe, which means sensitive payment information never touches your servers.
Elements provide a flexible way to securely collect payment information in your Vue app. You can mount individual Element components inside of your Elements provider tree.
Before using any Element components, you need to wrap your application (or the relevant part) with the Elements provider:
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from 'vue-stripe'
import CheckoutForm from './CheckoutForm.vue'
const stripePromise = loadStripe('pk_test_xxx')
</script>
<template>
<Elements :stripe="stripePromise">
<CheckoutForm />
</Elements>
</template>
There are many different kinds of Elements, useful for collecting different kinds of payment information. These are the available Elements today.
| Component | Usage |
|---|---|
| AddressElement | Collects address details for 236+ regional formats. See the Address Element documentation to learn more. |
| AuBankAccountElement | Collects Australian bank account information (BSB and account number) for use with BECS Direct Debit payments. |
| CardCvcElement | Collects the card's CVC number. See the Card Elements documentation to learn more. |
| CardElement | A flexible single-line input that collects all necessary card details. See the Card Elements documentation to learn more. |
| CardExpiryElement | Collects the card's expiration date. See the Card Elements documentation to learn more. |
| CardNumberElement | Collects the card number. See the Card Elements documentation to learn more. |
| ExpressCheckoutElement | Allows you to accept card or wallet payments through one or more payment buttons, including Apple Pay, Google Pay, Link, or PayPal. See the Express Checkout Element docs. |
| IbanElement | The International Bank Account Number (IBAN). Available for SEPA countries. |
| LinkAuthenticationElement | Collects email addresses and allows users to log in to Link. See the Link Authentication Element docs. |
| PaymentElement | Collects payment details for 25+ payment methods from around the globe. See the Payment Element docs. |
| PaymentMethodMessagingElement | Displays messaging for payment methods. |
All Element components follow a similar pattern:
<script setup>
import { PaymentElement } from 'vue-stripe'
</script>
<template>
<form>
<PaymentElement />
<button type="submit">
Pay
</button>
</form>
</template>
Elements emit events that you can listen to:
@ready - Triggered when the Element is fully rendered@change - Triggered when data exposed by the Element changes@focus - Triggered when the Element receives focus@blur - Triggered when the Element loses focus@escape - Triggered when the escape key is pressed@loaderstart - Triggered when loader UI is mounted (Payment, Address, Express Checkout, Link Authentication)@loadererror - Triggered when the Element fails to load (Payment, Address, Express Checkout, Link Authentication)Each Element accepts an options prop for configuration:
<template>
<PaymentElement
:options="{
layout: 'tabs',
business: {
name: 'My Business',
},
}"
/>
</template>
You can access the underlying Stripe element instance using the getElement() method:
<script setup>
import { PaymentElement, useElements } from 'vue-stripe'
const elements = useElements()
// Access the Payment Element instance
const paymentElement = elements.value?.getElement(PaymentElement)
</script>
For detailed information about Elements and their usage, refer to the Stripe Elements documentation.