Blog Detail

27

Sep
Vue Stripe Elements - Vue component collection for Stripe js cover image

Vue Stripe Elements - Vue component collection for Stripe js

Vue Stripe Elements are the flexible and powerful Vue components introduced by Ectoflow for Stripe. It's a glue between Stripe.js and Vue component lifecycle.

  • Vue 2 component collection: stable
  • Vue 3 version: in development

Installation

You can install this package via npm:

npm i vue-stripe-elements-plus --save-dev

Add Stripe.js library to the page:

After the installation, you have to add this script to your page.

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

Alternatively, you can load the Stripe library dynamically. Just make sure it's ready before your components mount.

Use built-in components

//Create card
<template>
  <div class="payment-simple">
    <StripeElements
      :stripe-key="stripeKey"
      :instance-options="instanceOptions"
      :elements-options="elementsOptions"
      #default="{ elements }" // attention: important part!
      ref="elms"
    >
      <StripeElement
        type="card"
        :elements="elements"
        :options="cardOptions"
        ref="card"
      />
    </StripeElements>
    <button @click="pay" type="button">Pay</button>
  </div>
</template>

<script>
import { StripeElements, StripeElement } from 'vue-stripe-elements-plus'

export default {
  name: 'PaymentSimple',

  components: {
    StripeElements,
    StripeElement
  },

  data () {
    return {
      stripeKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', // test key, don't hardcode
      instanceOptions: {
        // https://stripe.com/docs/js/initializing#init_stripe_js-options
      },
      elementsOptions: {
        // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
      },
      cardOptions: {
        // reactive
        // remember about Vue 2 reactivity limitations when dealing with options
        value: {
          postalCode: ''
        }
        // https://stripe.com/docs/stripe.js#element-options
      }
    }
  },

  methods: {
    pay () {
      // ref in template
      const groupComponent = this.$refs.elms
      const cardComponent = this.$refs.card
      // Get stripe element
      const cardElement = cardComponent.stripeElement

      // Access instance methods, e.g. createToken()
      groupComponent.instance.createToken(cardElement).then(result => {
        // Handle result.error or result.token
      })
    }
  }
}
</script>

Get advanced

//Create multiple elements
<StripeElements
  :stripe-key="stripeKey"
  :instance-options="instanceOptions"
  :elements-options="elementsOptions"
  #default="{ elements }" // attention: important part!
>
  <StripeElement
    type="cardNumber"
    :elements="elements"
    :options="cardNumberOptions"
  />
  <StripeElement
    type="postalCode"
    :elements="elements"
    :options="postalCodeOptions"
  />
</StripeElements>

Go wild

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

<StripeElements
  :stripe-key="stripeKey1"
  :instance-options="instanceOptions1"
  :elements-options="elementsOptions1"
  #default="{ elements }" // attention: important part!
>
  <StripeElement
    :elements="elements"
    :options="cardOptions"
  />
</StripeElements>
<StripeElements
  :stripe-key="stripeKey2"
  :instance-options="instanceOptions2"
  :elements-options="elementsOptions2"
  #default="{ elements }" // attention: important part!
>
  <StripeElement
    type="iban"
    :elements="elements"
    :options="ibanOptions"
  />
</StripeElements>

API Reference

StripeElements.vue

You can think of it as an individual group of elements. It generates a stripe instance and elements object.

import { StripeElements } from 'vue-stripe-elements-plus'

Props

// https://stripe.com/docs/js/initializing#init_stripe_js-options
stripeKey: {
  type: String,
  required: true,
},
// https://stripe.com/docs/js/elements_object/create#stripe_elements-options
instanceOptions: {
  type: Object,
  default: () => ({}),
},
// https://stripe.com/docs/stripe.js#element-options
elementsOptions: {
  type: Object,
  default: () => ({}),
},

StripeElement.vue

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

Props

// elements object
// https://stripe.com/docs/js/elements_object/create
elements: {
  type: Object,
  required: true,
},
// type of the element
// https://stripe.com/docs/js/elements_object/create_element?type=card
type: {
  type: String,
  default: () => 'card',
},
// element options
// https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
options: {
  type: [Object, undefined],
},

You can view this package on Github.

Published at : 27-09-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project