The Express Checkout Element allows you to accept card or wallet payments through one or more payment buttons, including Apple Pay, Google Pay, Link, or PayPal. It provides a streamlined checkout experience for customers who want to pay quickly using their saved payment methods.
The Express Checkout Element is typically used alongside the Payment Element to offer customers multiple ways to pay.
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { CheckoutProvider, ExpressCheckoutElement } from 'vue-stripe/checkout'
const stripePromise = loadStripe('pk_test_xxx')
function fetchClientSecret() {
return fetch('/create-checkout-session', { method: 'POST' })
.then(response => response.json())
.then(data => data.clientSecret)
}
</script>
<template>
<CheckoutProvider
:stripe="stripePromise"
:options="{ clientSecret: fetchClientSecret }"
>
<form>
<ExpressCheckoutElement />
<button type="submit">
Continue
</button>
</form>
</CheckoutProvider>
</template>
<template>
<ExpressCheckoutElement
:options="{
buttonHeight: 48,
buttonType: {
applePay: 'book',
googlePay: 'book',
paypal: 'paypal',
},
}"
/>
</template>
| Prop | Type | Description |
|---|---|---|
options | ExpressCheckoutElementOptions | Configuration options for the Express Checkout Element. See available options. |
| Event | Description |
|---|---|
@ready | Triggered when the Express Checkout Element is fully rendered |
@change | Triggered when data exposed by the Element changes |
@click | Triggered when a payment button is clicked |
@confirm | Triggered when the customer confirms the payment |
@cancel | Triggered when the customer cancels the payment |
@shippingaddresschange | Triggered when the customer's shipping address changes |
@shippingratechange | Triggered when the shipping rate changes |
@loaderstart | Triggered when the loader UI is mounted |
@loadererror | Triggered when the Element fails to load |
<script setup>
import { ExpressCheckoutElement, useCheckout } from 'vue-stripe/checkout'
const checkout = useCheckout()
function handleConfirm(event) {
// Handle payment confirmation
console.log('Payment confirmed:', event)
}
function handleCancel() {
// Handle cancellation
console.log('Payment cancelled')
}
</script>
<template>
<ExpressCheckoutElement
@confirm="handleConfirm"
@cancel="handleCancel"
/>
</template>
The Express Checkout Element supports:
The Element automatically shows the most relevant payment buttons based on the customer's device and browser capabilities.
For detailed information about the Express Checkout Element and its usage, refer to the Stripe Express Checkout Element documentation.