Vue Use Stripe

Common errors

• TypeError: Cannot read properties of null (reading 'confirmCardSetup')

  cause The `stripe` instance is `null` because Stripe.js has not finished loading or initializing when `useStripe` is called.
  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.

• Component is missing template or render function.

  cause When using `StripeElement`, you must correctly assign the `element` prop with a reactive Stripe element instance obtained from `useStripe`.
  fix Ensure your `StripeElement` component has `:element="cardElement"` (or similar) where `cardElement` is one of the reactive elements returned by `useStripe`.

Warnings

• gotcha 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.
  Fix: yarn add -D @stripe/stripe-js
• gotcha 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.
  Fix: yarn add @vue/composition-api
• gotcha 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.
  Fix: Ensure `<script async src="https://js.stripe.com/v3/"></script>` is in `index.html` or `import '@stripe/stripe-js'` is at the top of your `main.js`/`ts` file.

Install

• npm install vue-use-stripe npm
• yarn add vue-use-stripe yarn
• pnpm add vue-use-stripe pnpm

Imports

• useStripe
  wrong:

  const { useStripe } = require('vue-use-stripe')

  correct:

  import { useStripe } from 'vue-use-stripe'

  Primary hook for integrating Stripe.js; this library is ESM-first. For CDN usage, it's available as `window.VueUseStripe.useStripe`.
• StripeElement

  import { StripeElement } from 'vue-use-stripe'

  Vue component for rendering Stripe Elements. Typically imported alongside `useStripe` for UI integration.
• Stripe

  import type { Stripe } from '@stripe/stripe-js'

  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.

Quickstart

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.

import { defineComponent, ref } from 'vue'
import { useStripe, StripeElement } from 'vue-use-stripe'

export default defineComponent({
  components: { StripeElement },
  setup() {
    const event = ref(null)

    const { stripe, elements: [cardElement] } = useStripe({
      key: process.env.VUE_APP_STRIPE_PUBLIC_KEY ?? '',
      elements: [{ type: 'card', options: {} }],
    })

    const registerCard = async () => {
      if (event.value?.complete && stripe.value && cardElement.value) {
        // Example: Confirm card setup. Replace with your actual Stripe API call.
        // Ensure a client secret is provided from your backend.
        const { setupIntent, error } = await stripe.value.confirmCardSetup(
          '<YOUR_CLIENT_SECRET_FROM_BACKEND>', // Replace with actual client secret
          {
            payment_method: {
              card: cardElement.value,
            },
          }
        )

        if (error) {
          console.error('Error confirming card setup:', error.message)
        } else if (setupIntent) {
          console.log('Card setup successful:', setupIntent)
          // Send setupIntent.id to your server for further processing
        }
      }
    }

    return {
      event,
      cardElement,
      registerCard,
    }
  },
  template: `
    <div>
      <StripeElement :element="cardElement" @change="event = $event" />
      <button @click="registerCard">Add Card</button>
      <div v-if="event && event.error" style="color: red;">{{ event.error.message }}</div>
      <div v-else-if="event && event.complete">Card input complete.</div>
    </div>
  `
})