vue-stripe

Vue components for Stripe.js and Elements with full TypeScript support.

Note

The aim of this module is to have @stripe/react-stripe-js for Vue with feature parity. You should be able to follow the React docs and examples using this module. Only use this library if you want parity with the React Stripe.js SDK. Otherwise, consider using the Stripe Partner Vue SDK.

Getting started

• Add Vue Stripe.js to your Vue app
• Try it out using CodeSandbox

Installation

npm install vue-stripe @stripe/stripe-js

Minimal example

An example CheckoutForm component:

<script setup>
import {
  PaymentElement,
  useElements,
  useStripe,
} from 'vue-stripe'

const stripe = useStripe()
const elements = useElements()

const errorMessage = ref(null)

async function handleSubmit() {
  if (elements.value === null) {
    return
  }

  // Trigger form validation and wallet collection
  const { error: submitError } = await elements.value.submit()
  if (submitError) {
    // Show error to your customer
    errorMessage.value = submitError.message
    return
  }

  // Create the PaymentIntent and obtain clientSecret from your server endpoint
  const res = await fetch('/create-intent', {
    method: 'POST',
  })
  const { client_secret: clientSecret } = await res.json()

  const { error } = await stripe.value.confirmPayment({
    // `Elements` instance that was used to create the Payment Element
    elements: elements.value,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  })

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    errorMessage.value = error.message
  }
  else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <PaymentElement />
    <button type="submit" :disabled="!stripe || !elements">
      Pay
    </button>
    <div v-if="errorMessage">
      {{ errorMessage }}
    </div>
  </form>
</template>

<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from 'vue-stripe'
import CheckoutForm from './CheckoutForm.vue'

const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx')

const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {
    /* ... */
  },
}
</script>

<template>
  <Elements :stripe="stripePromise" :options>
    <CheckoutForm />
  </Elements>
</template>

Acknowledgements

This project builds upon the foundation laid by several Vue Stripe integration libraries:

• vue-stripe - Vue.js 2 Stripe checkout component. Special thanks to @matfish2 for graciously transferring the vue-stripe package name to enable this project.
• vuestripe.com - Stripe Checkout & Elements for Vue.js (Stripe Verified Partner)
• vue-stripe-js - Vue 3 components for Stripe

While these libraries provide valuable solutions, this project aims to deliver a comprehensive 1:1 equivalent to the React Stripe SDK with complete tests.

License

MIT