Vue Stripe.js is a set of 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 the package:

# npm
npm i vue-stripe-js --save-dev

# yarn
yarn add vue-stripe-js --dev

2. Load Stripe.js library:

import { loadStripe } from '@stripe/stripe-js'
import { defineComponent, ref, onBeforeMount } from 'vue'

export default defineComponent({
  // ...
  setup() {
    onBeforeMount(() => {
      const stripeLoaded = ref(false)
      const stripePromise = loadStripe('your_key')
      stripePromise.then(() => {
        stripeLoaded.value = true
      })
    })
  },
})

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

You can use built-in components to create card.

<template>
  <StripeElements
    v-if="stripeLoaded"
    v-slot="{ elements, instance }" // attention: important part!
    ref="elms"
    :stripe-key="stripeKey"
    :instance-options="instanceOptions"
    :elements-options="elementsOptions"
  >
    <StripeElement
      ref="card"
      :elements="elements"
      :options="cardOptions"
    />
  </StripeElements>
  <button type="button" @click="pay">Pay</button>
</template>

<script lang="ts">
import { StripeElements, StripeElement } from 'vue-stripe-js'
import { loadStripe } from '@stripe/stripe-js'
import { defineComponent, ref, onBeforeMount } from 'vue'

export default defineComponent({
  name: 'CardOnly',

  components: {
    StripeElements,
    StripeElement,
  },

  setup() {
    const stripeKey = ref('pk_test_TYooMQauvdEDq54NiTphI7jx') // test key
    const instanceOptions = ref({
      // https://stripe.com/docs/js/initializing#init_stripe_js-options
    })
    const elementsOptions = ref({
      // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
    })
    const cardOptions = ref({
      // https://stripe.com/docs/stripe.js#element-options
      value: {
        postalCode: '12345',
      },
    })
    const stripeLoaded = ref(false)
    const card = ref()
    const elms = ref()

    onBeforeMount(() => {
      const stripePromise = loadStripe(stripeKey.value)
      stripePromise.then(() => {
        stripeLoaded.value = true
      })
    })

    return {
      stripeKey,
      stripeLoaded,
      instanceOptions,
      elementsOptions,
      cardOptions,
      card,
      elms,
    }
  },

  methods: {
    pay() {
      // Get stripe element
      const cardElement = this.card.stripeElement

      // Access instance methods, e.g. createToken()
      this.elms.instance.createToken(cardElement).then((result: object) => {
        // Handle result.error or result.token
        console.log(result)
      })
    },
  },
})
</script>

4. Get advanced

You can create multiple elements.

<StripeElements
  v-slot="{ elements }"
  :stripe-key="stripeKey"
  :instance-options="instanceOptions"
  :elements-options="elementsOptions"
>
  <StripeElement
    type="cardNumber"
    :elements="elements"
    :options="cardNumberOptions"
  />
  <StripeElement
    type="postalCode"
    :elements="elements"
    :options="postalCodeOptions"
  />
</StripeElements>

5. Get wild flexible

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

<StripeElements
  v-slot="{ elements }"
  :stripe-key="stripeKey1"
  :instance-options="instanceOptions1"
  :elements-options="elementsOptions1"
>
  <StripeElement :elements="elements" :options="cardOptions" />
</StripeElements>
<StripeElements
  v-slot="{ elements }"
  :stripe-key="stripeKey2"
  :instance-options="instanceOptions2"
  :elements-options="elementsOptions2"
>
  <StripeElement type="iban" :elements="elements" :options="ibanOptions" />
</StripeElements>

For more details, you can visit Github.