{"id":12619,"library":"vue-use-stripe","title":"Vue Use Stripe","description":"Vue Use Stripe is a lightweight (0.7 KB gzipped) Vue 3 wrapper for Stripe.js, providing a Composition API hook (`useStripe`) and a `StripeElement` component to simplify the integration of Stripe Elements. It is written in TypeScript and ships with comprehensive type definitions. The library currently stands at version 0.1.1 and has a relatively stable, though infrequent, release cadence, primarily focusing on minor enhancements and bug fixes. A key differentiator is its support for both Vue 2 (via `vue-demi` and `@vue/composition-api`) and Vue 3, allowing for broader compatibility in existing projects. It primarily focuses on exposing Stripe's functionalities through reactive Vue constructs, rather than introducing complex abstractions, making it a thin and flexible layer over the official Stripe.js library.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/frandiox/vue-use-stripe","tags":["javascript","stripe","elements","vue","vue3","typescript"],"install":[{"cmd":"npm install vue-use-stripe","lang":"bash","label":"npm"},{"cmd":"yarn add vue-use-stripe","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-use-stripe","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the underlying Stripe.js functionality and TypeScript types. Can be a dev dependency if Stripe.js is loaded via a script tag.","package":"@stripe/stripe-js","optional":false},{"reason":"Required for Vue 2 support to enable Composition API features.","package":"@vue/composition-api","optional":true},{"reason":"Enables Vue 2 and Vue 3 compatibility for the library.","package":"vue-demi","optional":false}],"imports":[{"note":"Primary hook for integrating Stripe.js; this library is ESM-first. For CDN usage, it's available as `window.VueUseStripe.useStripe`.","wrong":"const { useStripe } = require('vue-use-stripe')","symbol":"useStripe","correct":"import { useStripe } from 'vue-use-stripe'"},{"note":"Vue component for rendering Stripe Elements. Typically imported alongside `useStripe` for UI integration.","symbol":"StripeElement","correct":"import { StripeElement } from 'vue-use-stripe'"},{"note":"Type import for the Stripe instance. While `vue-use-stripe` provides reactive Stripe instance, direct type imports from `@stripe/stripe-js` are often needed for advanced type checking.","symbol":"Stripe","correct":"import type { Stripe } from '@stripe/stripe-js'"}],"quickstart":{"code":"import { defineComponent, ref } from 'vue'\nimport { useStripe, StripeElement } from 'vue-use-stripe'\n\nexport default defineComponent({\n components: { StripeElement },\n setup() {\n const event = ref(null)\n\n const { stripe, elements: [cardElement] } = useStripe({\n key: process.env.VUE_APP_STRIPE_PUBLIC_KEY ?? '',\n elements: [{ type: 'card', options: {} }],\n })\n\n const registerCard = async () => {\n if (event.value?.complete && stripe.value && cardElement.value) {\n // Example: Confirm card setup. Replace with your actual Stripe API call.\n // Ensure a client secret is provided from your backend.\n const { setupIntent, error } = await stripe.value.confirmCardSetup(\n '', // Replace with actual client secret\n {\n payment_method: {\n card: cardElement.value,\n },\n }\n )\n\n if (error) {\n console.error('Error confirming card setup:', error.message)\n } else if (setupIntent) {\n console.log('Card setup successful:', setupIntent)\n // Send setupIntent.id to your server for further processing\n }\n }\n }\n\n return {\n event,\n cardElement,\n registerCard,\n }\n },\n template: `\n
\n \n \n
{{ event.error.message }}
\n
Card input complete.
\n
\n `\n})\n","lang":"typescript","description":"This quickstart demonstrates how to initialize Stripe, create a 'card' element, and handle its change events in a Vue 3 Composition API setup. It also shows a basic `confirmCardSetup` call, emphasizing the need for a backend-provided client secret."},"warnings":[{"fix":"yarn add -D @stripe/stripe-js","message":"To ensure proper TypeScript type inference for Stripe objects, you should install `@stripe/stripe-js`. Even if you load Stripe.js via a script tag, installing this package as a `devDependency` is crucial for types.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"yarn add @vue/composition-api","message":"When using Vue 2, you must explicitly install `@vue/composition-api` to enable the Composition API features that `vue-use-stripe` relies on. This package is marked as an optional peer dependency for npm, but functionally required for Vue 2 projects.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure `` is in `index.html` or `import '@stripe/stripe-js'` is at the top of your `main.js`/`ts` file.","message":"Stripe.js must be loaded before `vue-use-stripe` can initialize. This can be done by including the Stripe.js script tag in your `index.html` or by importing `@stripe/stripe-js` as a side effect in your entry file.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure Stripe.js is loaded and the component has mounted before attempting to use the `stripe` object. The `stripe` ref provided by `useStripe` is reactive, so watch for its value to become non-null.","cause":"The `stripe` instance is `null` because Stripe.js has not finished loading or initializing when `useStripe` is called.","error":"TypeError: Cannot read properties of null (reading 'confirmCardSetup')"},{"fix":"Ensure your `StripeElement` component has `:element=\"cardElement\"` (or similar) where `cardElement` is one of the reactive elements returned by `useStripe`.","cause":"When using `StripeElement`, you must correctly assign the `element` prop with a reactive Stripe element instance obtained from `useStripe`.","error":"Component is missing template or render function."}],"ecosystem":"npm"}