Vue.js library for Stripe Checkout and Elements
Vue 3.x with TypeScript-first development

Website | Guides | API Playground Backend

Vue Stripe is an official Stripe partner

Thank you for your patience! This is an early release of the new Vue Stripe. As with any early release, you may encounter bugs. If you find any issues or have suggestions, please create an issue or submit a pull request. Your contributions are greatly appreciated!

• Vue 3 — Built for Vue 3.x
• TypeScript First — Full TypeScript support with comprehensive types
• Modern Elements — Payment Element supporting 40+ payment methods
• Composition API — Vue 3 Composition API
• Customizable — Full support for Stripe's Appearance API
• Well Tested — Comprehensive test suite
• SSR Ready — Support for Nuxt 3 and server-side rendering

npm install @vue-stripe/vue-stripe @stripe/stripe-js

<template>
  <VueStripeProvider :publishable-key="publishableKey">
    <VueStripeElements>
      <VueStripePaymentElement @ready="onReady" />
      <button @click="processPayment">Pay Now</button>
    </VueStripeElements>
  </VueStripeProvider>
</template>

<script setup lang="ts">
import {
  VueStripeProvider,
  VueStripeElements,
  VueStripePaymentElement,
  usePaymentIntent
} from '@vue-stripe/vue-stripe'

const publishableKey = 'pk_test_...'
const { confirmPayment } = usePaymentIntent()

const processPayment = async () => {
  const result = await confirmPayment(clientSecret)
  // Handle result
}
</script>

• Website - Official website for Vue Stripe
• Guides - Guides for using Vue Stripe
• API Reference - API reference for Vue Stripe components and composables
• Playground - Interactive playground for testing Vue Stripe components and integrations
• Backend - Backend for the playground

This repository is organized as a monorepo using pnpm workspaces and Turborepo:

vue-stripe/
├── packages/
│   └── vue-stripe/        # Main library (@vue-stripe/vue-stripe)
├── apps/
│   ├── docs/              # VitePress documentation site
│   └── playground/        # Development playground
│   └── backend/           # Backend for the playground
└── tools/
    ├── eslint-config/     # Shared ESLint configuration
    └── typescript-config/ # Shared TypeScript configuration

• Node.js 20+
• pnpm 8+

# Install dependencies
pnpm install

# Start development (all apps)
pnpm dev

# Start playground only
pnpm playground:dev

# Start documentation only
pnpm docs:dev

# Build all packages
pnpm build

# Run all tests
pnpm test

# Lint all packages
pnpm lint

This project exists thanks to all the people who contribute. [Contribute]

Become a financial contributor and help us sustain our community. [Contribute]

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

MIT License © 2017-2025 Vue Stripe Contributors

Made with ❤️ by Joff Tiquez