@vue-stripe/vue-stripe

Vue Stripe

Vue.js library for Stripe Checkout and Elements
Vue 3 and Vue 2.7, TypeScript-first

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!

A note on AI-assisted maintenance

I've decided to start using AI to help me maintain Vue Stripe, and I want to be upfront with you about it. Rest assured that everything is still kept under heavy scrutiny — every change is reviewed, tested, and verified by me before it ships.

To be honest about the reality of it: I maintain this project largely on my own, and only in whatever extra time I can find. That time is limited, and I'm often not able to give it my full 100%. With just one person, it's genuinely hard to find the time to provide the quality and pace of work the project deserves without some extra help. Bringing AI in as an assistant lets me move faster and cover more ground — more tests, better docs, quicker fixes — while I stay in the loop as the human who reviews and approves everything.

Thank you for understanding, and for continuing to support Vue Stripe.

Features

• Vue 3 and Vue 2.7 — One build for both, tested on each in CI
• Stripe.js 10 — Payment, Express Checkout, Address, Tax ID, Currency Selector and more, plus Checkout Sessions with Elements
• TypeScript First — Full TypeScript support with comprehensive types
• Modern Elements — Payment Element supporting 40+ payment methods
• Composition API — Composables for confirming payments (one per Stripe.js confirm method), tokens, Financial Connections, Identity and Checkout Sessions
• Every Checkout — Hosted Checkout, Embedded Checkout, Custom Checkout and the Checkout Form (beta)
• 100% Stripe.js coverage — Every Stripe.js 10 element and method has a component or composable (coverage)
• 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

Requirements

Upgrading from v5? Read Migrating from v5 to v6.

Installation

npm install @vue-stripe/vue-stripe@^6 @stripe/stripe-js@^10

Import the component styles once, for example in main.ts:

import '@vue-stripe/vue-stripe/style.css'

Basic Usage

Composables such as usePaymentIntent() read the Stripe context, so call them in a component rendered inside VueStripeElements:

<!-- CheckoutPage.vue -->
<template>
  <VueStripeProvider :publishable-key="publishableKey">
    <VueStripeElements :client-secret="clientSecret">
      <VueStripePaymentElement />
      <PayButton :client-secret="clientSecret" />
    </VueStripeElements>
  </VueStripeProvider>
</template>

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

const publishableKey = 'pk_test_...'
const clientSecret = 'pi_..._secret_...' // from your server
</script>

<!-- PayButton.vue -->
<template>
  <button :disabled="loading" @click="pay">Pay now</button>
  <p v-if="error">{{ error }}</p>
</template>

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

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

const pay = () =>
  confirmPayment({
    clientSecret: props.clientSecret,
    confirmParams: { return_url: `${window.location.origin}/complete` }
  })
</script>

## Documentation

- [Website](https://vuestripe.com) - Official website for Vue Stripe
- [Guides](https://vuestripe.com/guide/introduction) - Guides for using Vue Stripe
- [API Reference](https://vuestripe.com/api/) - API reference for Vue Stripe components and composables
- [Playground](https://playground.vuestripe.com) - Interactive playground for testing Vue Stripe components and integrations
- [Backend](https://backend.vuestripe.com) - 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) │ └── vue2-smoke/ # Runs the built library under Vue 2.7 in CI ├── apps/ │ ├── docs/ # VitePress documentation site │ ├── playground/ # Development playground │ └── backend/ # Backend for the playground └── tools/ └── typescript-config/ # Shared TypeScript configuration

### Packages

| Package | Description |
|---------|-------------|
| [@vue-stripe/vue-stripe](https://github.com/vue-stripe/vue-stripe/blob/HEAD/packages/vue-stripe) | Main library package |
| [@vue-stripe/docs](https://github.com/vue-stripe/vue-stripe/blob/HEAD/apps/docs) | VitePress documentation |
| [@vue-stripe/playground](https://github.com/vue-stripe/vue-stripe/blob/HEAD/apps/playground) | Development playground |
| [@vue-stripe/backend](https://github.com/vue-stripe/vue-stripe/blob/HEAD/apps/backend) | Backend for the playground |

## Development

### Prerequisites

- Node.js 22+ (24 recommended, see `.nvmrc`)
- pnpm 12+ (`corepack enable`)

### Getting Started

```bash
# 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

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

Sponsors

If Vue Stripe saves you time, you can support its maintenance through GitHub Sponsors.

License

MIT License. Copyright 2017-2026 Vue Stripe Contributors.

Made with love by Joff Tiquez