Vue Stripe 6: Stripe.js 10 for Vue 3 and Vue 2.7
Vue Stripe 6 is out. It moves the library to Stripe.js 10 (Endive), Stripe's current release train, and one build runs on Vue 3 and Vue 2.7. Version 6.0.0 shipped on October 15 and is npm's latest; 6.1.0 followed on November 1.
npm install @vue-stripe/vue-stripe@^6 @stripe/stripe-js@^10// main.ts: once, before the components render
import '@vue-stripe/vue-stripe/style.css'New to Vue Stripe? Take your first test payment. Coming from v5? Skip to Upgrading from v5.
Every Stripe.js 10 element and method
v6 wraps all of Stripe.js 10. The Stripe.js coverage tracker lists each element and method next to the Vue Stripe component or composable that wraps it, and it stays at 100%. What v6 adds:
- New Checkout integrations.
VueStripeEmbeddedCheckoutputs Stripe's prebuilt Checkout page inside yours. The Checkout Form (VueStripeCheckoutFormProvider,VueStripeCheckoutFormanduseCheckoutForm()) is a Stripe beta. - Elements inside Checkout Sessions. The Payment, Address, Express Checkout and other element components mount from the session inside
VueStripeCheckoutElementsProvider, so you can build your own page on a Checkout Session with the same components you use elsewhere. - New elements: Tax ID, Currency Selector and Contact Details; Terms and Link Signup (Stripe betas); the Issuing elements; and the Issuing, Treasury and Financial Account disclosures.
- New composables: confirmation tokens, tokens, card actions and micro-deposit verification; Radar sessions, ephemeral key nonces, Financial Connections, Identity and Payment Request; and one method confirmer per Stripe.js
confirm<Method>Paymentandconfirm<Method>Setupmethod.
Stripe for the whole app with one plugin
In v5, createVueStripe() only stored the publishable key, and every page still needed a VueStripeProvider. In v6 the plugin loads Stripe.js the first time something needs it, so element components, VueStripeElements and the composables work without a provider:
import { createApp } from 'vue'
import { createVueStripe } from '@vue-stripe/vue-stripe'
import '@vue-stripe/vue-stripe/style.css'
import App from './App.vue'
createApp(App)
.use(createVueStripe({ publishableKey: import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY }))
.mount('#app')Vue 3 and Vue 2.7, typed, small
- One build for both Vues. The same package runs on Vue 3 and Vue 2.7, checked by a Vue 2.7 compatibility suite. See Use Vue Stripe on Vue 2.7.
- Typed throughout.
locale, events, slots and exposed members are typed, andvue-tscwithstrictTemplateschecks your templates, so a typo such aslocale="jp"fails type-checking. - Small and tree-shakeable. At 6.0.0 the whole library was 11.8 kB gzipped, and a Payment Element checkout added about 5 kB to an app. The bundle size page has the current numbers for every export.
- A script-tag build. The UMD build bundles the Stripe.js loader, so a page without a bundler needs only Vue, vue-demi and Vue Stripe (Without a bundler).
What 6.1 adds
6.1.0 picks up the Checkout Elements SDK methods from Stripe.js 10.2.0. useCheckoutSession() returns updateIndividualName() and updateBusinessName(), which set the customer's name or business name on a session with name collection, and getContactDetailsElement(). It is a drop-in update: the peer range stays @stripe/stripe-js@^10.0.0, and nothing changes for apps on Stripe.js 10.0 or 10.1.
A scheduled workflow now opens an issue whenever a new @stripe/stripe-js is released, so new Stripe.js features reach Vue Stripe quickly. 6.1 closed the first one.
Copy a demo that works
The live demos run each flow against Stripe's test mode: Stripe Checkout, the Payment Element, Embedded and custom Checkout, wallets, bank debits, saved cards, tokens, Identity and subscriptions. Each demo page now shows the code it runs, in tabs under the demo, imported from the same files the demo uses, so the code on the page is never out of date.
Next to the code, Open in StackBlitz opens the demo as a Vite + Vue project with every file it imports, on the published @vue-stripe/vue-stripe, in Stripe test mode against the demo backend. Fork it, swap in your own test key and backend, and you have a running starting point. Try it on the Payment Element demo.
Tested by building real apps from the docs
Before 6.0.0, six rounds of dogfood testing built real apps from the docs alone, with the published package, and took real Stripe test payments:
- in Vite + Vue 3, Nuxt 4, Vue 2.7, Quasar, Laravel 12 and 13, VitePress and Vite SSR;
- in Vue CLI, Rsbuild, Astro and Ionic;
- in Chromium, Firefox, WebKit and phone profiles;
- in a v5 app upgraded with the migration guide;
- under failure conditions: offline, blocked Stripe.js and a strict CSP.
Every issue they found was fixed before the release, and the library shipped with 1,897 unit tests. The rounds also produced the framework guides: Nuxt and SSR, Vite SSR, VitePress, Quasar and Laravel with Inertia, plus guides for webhooks, testing and error handling. For AI assistants, every page has a Markdown copy, indexed in /llms.txt.
Upgrading from v5
v6 is a major release, and most of its breaking changes follow Stripe: parts of Stripe.js that Stripe removed or renamed between the Basil, Clover, Dahlia and Endive releases are gone or renamed here too.
| v5 | v6 | |
|---|---|---|
vue | ^2.6 || ^3 | ^2.7 || ^3 |
@stripe/stripe-js | ^7.5 || ^8.5 | ^10.0.0 (Endive) |
| Stylesheet | none | @vue-stripe/vue-stripe/style.css |
The changes you are most likely to hit:
- Vue 2.6 is no longer supported. Upgrade to Vue 2.7 first.
- Import the stylesheet. The components carry no styles of their own.
- The iDEAL, P24, EPS and FPX bank elements are removed, because Stripe removed them. The Payment Element collects those methods.
- Hosted Checkout takes a URL.
<VueStripeCheckout :session-url>replaces session IDs, price IDs and line items; create the session on your server. VueStripeCheckoutProvideris nowVueStripeCheckoutElementsProvider. The old name still works as a deprecated alias, but@readynow receives the session's actions, and actions called before it resolve to an error.- Your server changes too. Replace
payment_method_typeswithallowed_payment_method_types, and create Checkout Sessions with Elements withui_mode: 'elements'on API version Dahlia or later.
Upgrade from v5 to v6 walks through every change with its replacement, the order to deploy the server changes in, and a checklist. If you are on a 6.0.0 beta, npm update moves you to the latest 6.x.
Thank you
Vue Stripe has been around since 2017, and it is a Stripe Verified Partner library. Thanks to everyone who filed issues, tested the betas and sent fixes. If something in v6 or its docs does not work for you, open an issue, and if Vue Stripe saves you time, a star on GitHub helps others find it.
