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.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
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?