Vue Stripe Endive Stripe Elements and Checkout as Vue components

Components and composables for every Stripe.js element and method, typed and tested on Vue 3 and Vue 2.7. Drop a provider into your app, render the Payment Element, and confirm with one composable.

Get started Try the live demos

Star Us on GitHub

Now on Stripe.js 10 (Endive)What changed in v6

my-shop

vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  VueStripeProvider,
  VueStripeElements,
  VueStripePaymentElement
} from '@vue-stripe/vue-stripe'
import '@vue-stripe/vue-stripe/style.css'
import PayButton from './PayButton.vue'

const clientSecret = ref<string>()

onMounted(async () => {
  // Your server creates the PaymentIntent (server.mjs)
  const response = await fetch('/api/payment-intent', { method: 'POST' })
  clientSecret.value = (await response.json()).clientSecret
})
</script>

<template>
  <VueStripeProvider publishable-key="pk_test_...">
    <VueStripeElements v-if="clientSecret" :client-secret="clientSecret">
      <VueStripePaymentElement />
      <PayButton :client-secret="clientSecret" />
    </VueStripeElements>
  </VueStripeProvider>
</template>

vue

<script setup lang="ts">
// Rendered inside VueStripeElements, so usePaymentIntent can reach the Elements group
import { usePaymentIntent } from '@vue-stripe/vue-stripe'

const props = defineProps<{ clientSecret: string }>()
const { confirmPayment, loading, error } = usePaymentIntent()

async function pay() {
  // Validates the Payment Element, then confirms the PaymentIntent
  // (3D Secure included) and redirects only when the method needs it
  await confirmPayment({
    clientSecret: props.clientSecret,
    confirmParams: { return_url: `${location.origin}/order/complete` },
    redirect: 'if_required'
  })
}
</script>

<template>
  <button :disabled="loading" @click="pay">Pay</button>
  <p v-if="error" role="alert">{{ error }}</p>
</template>

// node --env-file=.env server.mjs
import { createServer } from 'node:http'
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

createServer(async (req, res) => {
  if (req.method === 'POST' && req.url === '/api/payment-intent') {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: 2500,
      currency: 'usd',
      metadata: { orderId: 'order_123' } // your own order ID, read back by the webhook
    })
    res.setHeader('Content-Type', 'application/json')
    res.end(JSON.stringify({ clientSecret: paymentIntent.client_secret }))
    return
  }
  res.statusCode = 404
  res.end()
}).listen(3000)

3.9M npm downloads
14.6K downloads a week
1,126 GitHub stars
34 contributors

See all the numbers (updated Oct 15, 2026)

11.8 kB the whole library
4.2 kB a Payment Element checkout
2.5 kB Embedded Checkout
330 B useStripe alone

Minified and gzipped, tree-shaken. How bundle size works

Vue 3 and Vue 2.7

One build for both. Render-function components and composables, tested on each version in CI.

Every Stripe element

Payment, Express Checkout, Card, Address, Link, IBAN, BECS, Tax ID, Currency Selector, Issuing and more.

Every Checkout

Hosted, Embedded and Custom Checkout, the Checkout Form and the Pricing Table.

A composable per method

usePaymentIntent, one useConfirm composable per payment method, tokens, Financial Connections and Identity.

Typed end to end

Props, events, exposed members and results are typed from Stripe.js, and every Stripe type you need is re-exported.

100% of Stripe.js 10

Every element and method has a wrapper. A test fails the build when Stripe adds something new.

Pick how you take payments

Six ways to put Stripe in a Vue app, from a single element to a full checkout page. Compare them

Payment Element on your page
Cards, wallets and local payment methods in one form, confirmed against a PaymentIntent.
VueStripePaymentElement
Guide Live demo
Custom Checkout
Your own layout on a Checkout Session. Stripe keeps line items, tax, discounts and currency.
VueStripeCheckoutElementsProvider
Guide Live demo
Embedded Checkout
Stripe's prebuilt checkout page, mounted inside your page.
VueStripeEmbeddedCheckout
Guide Live demo
Hosted Checkout
Redirect to checkout.stripe.com with the session URL your server creates.
VueStripeCheckout
Guide Live demo
Checkout Form
A complete checkout form from one component, on a Checkout Session. Stripe beta.
VueStripeCheckoutForm
Guide Live demo
Pricing Table
A pricing table you configure in the Stripe Dashboard, embedded with one tag.
VueStripePricingTable
Guide

Try it with a test card

This live demo runs in Stripe test mode against our demo backend. Pay with 4242 4242 4242 4242, any future expiry date and any CVC.

1Product

2Payment

Complete

Select a Product

Loading test products...

Vue Stripe Endive Stripe Elements and Checkout as Vue components

Vue Stripe in numbers

Vue 3 and Vue 2.7

Every Stripe element

Every Checkout

A composable per method

Typed end to end

100% of Stripe.js 10

Pick how you take payments

Payment Element on your page

Custom Checkout

Embedded Checkout

Hosted Checkout

Checkout Form

Pricing Table

Try it with a test card

Select a Product