Vue Stripe.js

Vue 3 components for Stripe. Build advanced payment integrations quickly. Easy to start, friendly DX, minimal abstractions, and full control. It's a glue between Stripe.js and Vue component lifecycle. Works with Nuxt 3.

🟢 Live demo

Health 💜

Consider supporting efforts to make this project healthy and sustainable. Thank you!

• Become a sponsor
• Donate via PayPal

Quickstart ⚡️

Upgrade

• Upgrade guide
• Docs v1

1. Install

1npm i vue-stripe-js @stripe/stripe-js

2. Load Stripe.js

1<script setup lang="ts">
2import { onBeforeMount, ref } from "vue"
3import { loadStripe, type Stripe } from "@stripe/stripe-js"
4
5const publishableKey = '' // use your publishable key
6const stripe = ref<Stripe | null>(null)
7
8onBeforeMount(async() => {
9  stripe.value = await loadStripe(publishableKey)
10})
11</script>

Alternatively, include a script tag. Make sure Stripe.js is loaded before you mount Vue components.

1<script src="https://js.stripe.com/v3/"></script>

3. Payment Element

Based on – deferred payment guide

1<template>
2  <form
3    v-if="stripeLoaded"
4    @submit.prevent="handleSubmit"
5  >
6    <StripeElements
7      :stripe-key="stripeKey"
8      :instance-options="stripeOptions"
9      :elements-options="elementsOptions"
10      ref="elementsComponent"
11    >
12      <StripeElement
13        type="payment"
14        :options="paymentElementOptions"
15        ref="paymentComponent"
16      />
17    </StripeElements>
18    <button
19      type="submit"
20    >
21      Submit
22    </button>
23  </form>
24</template>
25
26<script setup lang="ts">
27import { onBeforeMount, ref } from "vue"
28import { loadStripe } from "@stripe/stripe-js"
29import { StripeElements, StripeElement } from "vue-stripe-js"
30
31import type {
32  StripeElementsOptionsMode,
33  StripePaymentElementOptions,
34} from "@stripe/stripe-js"
35
36const stripeKey = "pk_test_f3duw0VsAEM2TJFMtWQ90QAT" // use your publishable key
37const stripeOptions = ref({
38  // https://stripe.com/docs/js/initializing#init_stripe_js-options
39})
40const elementsOptions = ref<StripeElementsOptionsMode>({
41  // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
42  mode: "payment",
43  amount: 1099,
44  currency: "usd",
45  appearance: {
46    theme: "flat",
47  },
48})
49const paymentElementOptions = ref<StripePaymentElementOptions>({
50  // https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options
51})
52const stripeLoaded = ref(false)
53const clientSecret = ref("")
54
55// Define component refs
56const elementsComponent = ref()
57const paymentComponent = ref()
58
59onBeforeMount(() => {
60  loadStripe(stripeKey).then(() => {
61    stripeLoaded.value = true
62
63    // Good place to call your backend to create PaymentIntent
64    // Skipping to the point when you got client_secret
65
66    // clientSecret.value = client_secret
67  })
68})
69
70async function handleSubmit() {
71  // Confirm the PaymentIntent using the details collected by the Payment Element
72  const stripeInstance = elementsComponent.value?.instance
73  const elements = elementsComponent.value?.elements
74
75  if (stripeInstance) {
76    const { error } = await stripeInstance.confirmPayment({
77      elements,
78      clientSecret: clientSecret.value,
79      confirmParams: {
80        return_url: "https://example.com/order/123/complete",
81      },
82    })
83
84    if (error) {
85      // This point is only reached if there's an immediate error when
86      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
87      console.log(error)
88    } else {
89      // Your customer is redirected to your `return_url`. For some payment
90      // methods like iDEAL, your customer is redirected to an intermediate
91      // site first to authorize the payment, then redirected to the `return_url`.
92    }
93  }
94}
95</script>
96

Examples 🌿

Thanks to the Provider Pattern used in StripeElements, you get minimalist tools with full access to Stripe.js methods and properties. This results in better developer experience (DX), simpler code, and fewer bugs.

These examples use Vue Composition API and TypeScript.

• All
• Payment
• Card
• Express Checkout

Screenshot

Advanced integration 🏗️

All features of Stripe.js are available in two components. The benefits of Vue solution: element is created and destroyed automatically, options are reactive, event listeners are attached to StripeElement. Simple and future-proof.

🥇 Most important property is type 🥇

1<StripeElements>
2  <StripeElement type="payment" />
3</StripeElements>

Available types

1type StripeElementType =
2  | 'address'
3  | 'affirmMessage'
4  | 'afterpayClearpayMessage'
5  | 'auBankAccount'
6  | 'card'
7  | 'cardNumber'
8  | 'cardExpiry'
9  | 'cardCvc'
10  | 'currencySelector'
11  | 'epsBank'
12  | 'expressCheckout'
13  | 'fpxBank'
14  | 'iban'
15  | 'idealBank'
16  | 'p24Bank'
17  | 'payment'
18  | 'paymentMethodMessaging'
19  | 'paymentRequestButton'
20  | 'linkAuthentication'
21  | 'shippingAddress'
22  | 'issuingCardNumberDisplay'
23  | 'issuingCardCvcDisplay'
24  | 'issuingCardExpiryDisplay'
25  | 'issuingCardPinDisplay'
26  | 'issuingCardCopyButton'
27
28// Check actual element types in @stripe/stripe-js

Events

1<StripeElement @blur="doSomething" />

Following events are emitted on StripeElement

• change
• ready
• focus
• blur
• click
• escape
• loaderror
• loaderstart

Styling

Add classes to components

1<StripeElements class="border">
2  <StripeElement class="p-4" type="card" :options="cardOptions" />
3</StripeElements>

Style element via options - read documentation

1const cardOptions = ref<StripeCardElementOptions>({
2  style: {
3    base: {
4      iconColor: "green",
5    },
6    invalid: {
7      iconColor: "red",
8    },
9  },
10})