Tutorial

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

Published on February 20, 2018
Default avatar

By Derick Sozo

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

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

Check out this post if you’re interested in integrating Stipe Elements into an Angular app instead.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Derick Sozo

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
2 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

When I use this exactly same code to setup in my project to get payments from clients via Stripe, I still get an error as below

You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html

Uncaught SyntaxError: Unexpected token ‘export’

Please guide what am I doing wrong in here.

This doesn’t seem to work when the payment page is revisited. I get IntegrationError: Can only create one Element of type card

Any thoughts? Should I use a custom directive instead?

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel