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

Stripe is one of the best ways to handle payments online and recently they released Stripe Elements. Stripe Elements is their pre-built library of UI components that help you easily create your own checkout flows. This now makes it easier than ever to set up a custom payment form for your app, but there are a few gotchas you need to watch out for when you’re integrating the two.

In this post I’m going to show you how to integrate Vue.js and Stripe Elements so you can quickly set up a custom card payment form in your website or app.

What is Stripe Elements?

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.

Installation

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>

Initializing the Card Element

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>

Customizing the Card Element’s Style

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);

Collecting the Stripe Token

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>

Catching Card Errors

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;
    }

  });
}

Reference

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.