Vue StripeStripe Elements for Vue.js

Build beautiful payment forms with Vue.js

Get Started

View on GitHub

🔄

Vue 3 Ready

Built for Vue 3 with full Composition API support and modern Vue patterns.

💳

All Stripe Elements

Payment Element, Card Element, Express Checkout, and more - all wrapped in Vue components.

🎯

Type-Safe

Full TypeScript support with proper type definitions for all components and composables.

⚡

Reactive by Design

Leverage Vue's reactivity system with composables like useStripe() and useStripeElements().

Quick Example

vue

<template>
  <VueStripeProvider :publishable-key="publishableKey">
    <VueStripeElements :client-secret="clientSecret">
      <VueStripePaymentElement />
      <button @click="handleSubmit">Pay</button>
    </VueStripeElements>
  </VueStripeProvider>
</template>

<script setup>
import {
  VueStripeProvider,
  VueStripeElements,
  VueStripePaymentElement,
  useStripe,
  useStripeElements
} from '@vue-stripe/vue-stripe'

const publishableKey = 'pk_test_...'
const clientSecret = 'pi_..._secret_...'

const handleSubmit = async () => {
  const { stripe } = useStripe()
  const { elements } = useStripeElements()

  const result = await stripe.value.confirmPayment({
    elements: elements.value,
    confirmParams: {
      return_url: 'https://example.com/complete'
    }
  })
}
</script>