Vue Stripe

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

Announcement

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!

Features

• 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

Quick Start

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>

Documentation

• 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

Monorepo Structure

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

Packages

Package	Description
@vue-stripe/vue-stripe	Main library package
@vue-stripe/docs	VitePress documentation
@vue-stripe/playground	Development playground
@vue-stripe/backend	Backend for the playground

Development

Prerequisites

• Node.js 20+
• pnpm 8+

Getting Started

# Install dependencies
pnpm install

# Start development (all apps)
pnpm dev

# Start playground only
pnpm playground:dev

# Start documentation only
pnpm docs:dev

Building & Testing

# Build all packages
pnpm build

# Run all tests
pnpm test

# Lint all packages
pnpm lint

Contributors

Code Contributors

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

Financial Contributors

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

Individuals

Organizations

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

License

MIT License © 2017-2025 Vue Stripe Contributors

---

Made with :heart: by Joff Tiquez