Vue Stripe.js

Flexible and powerful Vue 3 components for Stripe. It's a glue between Stripe.js and Vue component lifecycle.

• Vue 3: stable ✅
• Vue 2: use vue-stripe-elements

Quickstart

1. Install package:

1# npm
2npm i vue-stripe-js --save-dev
3
4# yarn
5yarn add vue-stripe-js --dev

2. Load Stripe.js library:

1import { loadStripe } from '@stripe/stripe-js'
2import { defineComponent, ref, onBeforeMount } from 'vue'
3
4export default defineComponent({
5  // ...
6  setup() {
7    onBeforeMount(() => {
8      const stripeLoaded = ref(false)
9      const stripePromise = loadStripe('your_key')
10      stripePromise.then(() => {
11        stripeLoaded.value = true
12      })
13    })
14  },
15})

Alternatively, you can load Stripe library by including script tag. Just make sure it's ready before your stripe components mount.

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

3. Use built-in components

Create card

1<template>
2  <StripeElements
3    v-if="stripeLoaded"
4    v-slot="{ elements, instance }" // attention: important part!
5    ref="elms"
6    :stripe-key="stripeKey"
7    :instance-options="instanceOptions"
8    :elements-options="elementsOptions"
9  >
10    <StripeElement
11      ref="card"
12      :elements="elements"
13      :options="cardOptions"
14    />
15  </StripeElements>
16  <button type="button" @click="pay">Pay</button>
17</template>
18
19<script lang="ts">
20import { StripeElements, StripeElement } from 'vue-stripe-js'
21import { loadStripe } from '@stripe/stripe-js'
22import { defineComponent, ref, onBeforeMount } from 'vue'
23
24export default defineComponent({
25  name: 'CardOnly',
26
27  components: {
28    StripeElements,
29    StripeElement,
30  },
31
32  setup() {
33    const stripeKey = ref('pk_test_TYooMQauvdEDq54NiTphI7jx') // test key
34    const instanceOptions = ref({
35      // https://stripe.com/docs/js/initializing#init_stripe_js-options
36    })
37    const elementsOptions = ref({
38      // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
39    })
40    const cardOptions = ref({
41      // https://stripe.com/docs/stripe.js#element-options
42      value: {
43        postalCode: '12345',
44      },
45    })
46    const stripeLoaded = ref(false)
47    const card = ref()
48    const elms = ref()
49
50    onBeforeMount(() => {
51      const stripePromise = loadStripe(stripeKey.value)
52      stripePromise.then(() => {
53        stripeLoaded.value = true
54      })
55    })
56
57    const pay = () => {
58      // Get stripe element
59      const cardElement = card.value.stripeElement
60
61      // Access instance methods, e.g. createToken()
62      elms.value.instance.createToken(cardElement).then((result: object) => {
63        // Handle result.error or result.token
64        console.log(result)
65      })
66    },
67
68    return {
69      stripeKey,
70      stripeLoaded,
71      instanceOptions,
72      elementsOptions,
73      cardOptions,
74      card,
75      elms,
76      pay
77    }
78  },
79})
80</script>
81

4. Get advanced

Create multiple elements

1<StripeElements
2  v-slot="{ elements }"
3  :stripe-key="stripeKey"
4  :instance-options="instanceOptions"
5  :elements-options="elementsOptions"
6>
7  <StripeElement
8    type="cardNumber"
9    :elements="elements"
10    :options="cardNumberOptions"
11  />
12  <StripeElement
13    type="postalCode"
14    :elements="elements"
15    :options="postalCodeOptions"
16  />
17</StripeElements>

5. Get wild flexible

You can even create multiple groups, don't ask me why. It's possible.

1<StripeElements
2  v-slot="{ elements }"
3  :stripe-key="stripeKey1"
4  :instance-options="instanceOptions1"
5  :elements-options="elementsOptions1"
6>
7  <StripeElement :elements="elements" :options="cardOptions" />
8</StripeElements>
9<StripeElements
10  v-slot="{ elements }"
11  :stripe-key="stripeKey2"
12  :instance-options="instanceOptions2"
13  :elements-options="elementsOptions2"
14>
15  <StripeElement type="iban" :elements="elements" :options="ibanOptions" />
16</StripeElements>

Types

1import types {
2  initStripe,
3  createElements,
4  createElement,
5  StripeElements,
6  StripeElement
7} from 'vue-stripe-js'

API Reference

StripeElements.vue

Think of it as of individual group of elements. It creates stripe instance and elements object.

1import { StripeElements } from 'vue-stripe-js'

props

1// https://stripe.com/docs/js/initializing#init_stripe_js-options
2stripeKey: {
3  type: String,
4  required: true,
5},
6// https://stripe.com/docs/js/elements_object/create#stripe_elements-options
7instanceOptions: {
8  type: Object,
9  default: () => ({}),
10},
11// https://stripe.com/docs/stripe.js#element-options
12elementsOptions: {
13  type: Object,
14  default: () => ({}),
15},

data

You can access instance and elements by adding ref to StripeElements component.

1// StripeElements.vue exposes
2{
3  elements,
4  instance,
5  elementsUsable,
6}

default scoped slot

Elegant solution for props. Really handy because you can make stripe instance and elements objects available to all children without adding extra code.

1<!-- Cool, isn't it? -->
2<StripeElements v-slot="{ elements, instance }">
3  <StripeElement :elements="elements" />
4  <CustomComponent :instance="instance" />
5</StripeElements>

StripeElement.vue

Universal and type agnostic component. Create any element supported by Stripe.

1import { StripeElement } from 'vue-stripe-js'

props

1{
2  // elements object
3  // https://stripe.com/docs/js/elements_object/create
4  elements: {
5    type: Object as () => StripeElementsWithoutOverload,
6    required: true,
7  },
8  // type of the element
9  // https://stripe.com/docs/js/elements_object/create_element?type=card
10  type: {
11    type: String as () => StripeElementType,
12    default: () => 'card',
13  },
14  // element options
15  // https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
16  options: {
17    type: Object as () => StripeElementOptions,
18    default: () => ({}),
19  },
20},

data

1{
2  stripeElement,
3  domElement,
4  mountPoint,
5}

options

Element options are reactive. Recommendation: don't use v-model on StripeElement, instead pass value via options.

1setup() {
2  const elementOptions = ref({
3    value: {
4      postalCode: '12345'
5    }
6  })
7  return {
8    elementOptions,
9  }
10},
11
12methods: {
13  changePostalCode() {
14    // will update stripe element automatically
15    this.elementOptions.value.postalCode = '54321'
16  }
17}

events

Following events are emitted on StripeElement

• change
• ready
• focus
• blur
• click
• escape

1<StripeElement :elements="elements" @blur="doSomething" />

Styles

No base style included. Main reason: overriding it isn't fun. Style as you wish via element options: see details.