Integrating Stripe Elements and Vue.js to Set Up a Custom Payment Form

Stripe Elements is a collection of components with a variety of elements you can use to create checkout forms like buttons and inputs for collecting information from the user. The one we’re going to focus on on this post is the card element. The card element lets you collect card information all within one element. It includes a dynamically-updating card brand icon as well as inputs for number, expiry, CVC, and postal code.

Stripe Elements is available as part of Stripe.js so all you have to do is include the script in your page with the following script tag. Stripe suggests always including it directly onto your index.html page using the following url:

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

Stripe Elements handles and initializes its own UI and so there can be conflicts if Vue.js initializes before Stripe Elements has. To avoid this, setup Stripe Elements after the Vue.js element has been mounted onto the DOM.

<template>
  <div ref="card"></div>
</template>

<script>
let stripe = Stripe(`YOUR_STRIPE_PUBLISHABLE_KEY`),
    elements = stripe.elements(),
    card = undefined;

export default {
  mounted: function () {
    card = elements.create('card');
    card.mount(this.$refs.card);
  }
};
</script>

In order to customize the style of the element you have to declare the styles inside of an object:

let style = {
  base: {
    border: '1px solid #D8D8D8',
    borderRadius: '4px',
    color: "#000",
  },

  invalid: {
    // All of the error styles go inside of here.
  }

};

You can then pass-in that object into the create method when you initialize the card element and that’ll make sure that the styles you declared get applied to the element.

card = elements.create('card', style);

Stripe allows you to collect and convert card information collected by Elements into a single-use token that you can then pass into your server to use in an API call.

You could have a purchase method bound to a button and then call the stripe.createToken method inside of that method.

<template>
  <div ref="card"></div>
  <button v-on:click="purchase">Purchase</button>
</template>

<script>
let stripe = Stripe(`YOUR_STRIPE_PUBLISHABLE_KEY`),
    elements = stripe.elements(),
    card = undefined;

export default {
  mounted: function () {
    card = elements.create('card');
    card.mount(this.$refs.card);
  },

  purchase: function () {
    stripe.createToken(card).then(function(result) {
      // Access the token with result.token
    });
  }
};
</script>

The card element will automatically catch errors with card numbers that don’t fit the syntax of Visa, MasterCard, and other supported card types. Still though, sometimes different types of errors can get through, and Stripe Elements lets you handle that inside of the createToken method with the result.error variable.

purchase: function () {

  let self = this;

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      self.hasCardErrors = true;
      self.$forceUpdate(); // Forcing the DOM to update so the Stripe Element can update.
      return;
    }

  });
}

Stripe Elements is Stripe’s solution to make handling payments quick and easy, and it’s really easy to integrate into a Vue.js project. Make sure you checkout the documentation for more information.