Vue + Stripe Elements + Firebase Build A Checkout Form Quickly

In this tutorial, I will be showing you how to build a custom payment/checkout form using stripe elements with STEP by STEP instructions.

After that, I am going to be using the firebase cloud function to talk to stripe API in order to create a charge.

At the end of the tutorial, you’ll be able to build a payment form fully functional like this below:

I expect you to be familiar with a basic understanding of vue, how components work, how to Create A Project in Firebase and Make Queries to the Cloud Firestore.

Let’s get started!

STEP #1 Download Starter Vue Project
STEP #2 Instantiate Stripe Object
STEP #3 Create and Mount Custom Elements to Stripe Elements
STEP #4 Show Stripe Validation Error Messages
STEP #5 Create A Stripe Token
STEP #6 Save StripeObject Data to Firestore
STEP #7 Trigger Firebase Cloud Function to Create A Charge

I have also created an infographic which depicts the workflow.

STEP #1 Download Starter Vue Project

I have already created a Vue project with some simple HTML and CSS code and you can download it here.

When you run the project, you should have a page with the form like the screenshot below.

As you can see on the Checkout.vue template, .card-element divs are not input fields.

Stripe will attach the input field to each .card-element div behind the scene with some client-side validation when they are mounted to stripe elements.

STEP #2 Instantiate Stripe Object

The first step is to add the stripe JS CDN link to index.html file inside the head tag.

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

Then, get a stripe publishable key by going to your Stripe account then go to Dashboard → Developers → API Keys → publishable key (pk_test_******).

Note: Make sure to replace with your own publishable key otherwise it won’t work.

Once that’s out of the way…

The final step would be to instantiate the stripe object inside the mounted() function using the publishable key.

Assign it to the stripe property that is declared on the data() object.

export default {
 data() {
  return {
  stripe:null,
  }
 },
 mounted() {
  this.stripe = Stripe("pk_test_******")
  this.createAndMountFormElements()
 },
 methods: {
  createAndMountFormElements() {

  }
 }
}


As you can see, I have also invoked a function called createAndMountFormElements(), in which I will be creating stripe elements and mount custom HTML .card-element elements to stripe elements.

Let’s see how to do that next…

STEP #3 Create and Mount Custom Elements to Stripe Elements

The first thing to do is to create an element object by invoking elements() method on the stripe object inside createAndMountFormElements(), like so.

var elements = this.stripe.elements();

And, add these three properties on the data object.

data() {
...,
cardNumberElement:null,
cardExpiryElement:null,
cardCVCElement:null
}

Then, create a stripe element by calling create() method on the elements object by passing a name called cardNumber as a first argument and assign it to this.cardNumberElement.

Note: You can also pass a javascript object as a second argument in which you can add some extra styling, a placeholder and so. For more info have a look at the stripe elements page.

After that, attach custom element #card-number-element to the stripe element this.cardNumberElement object using mount() method.

createAndMountFormElement(){

var elements = this.stripe.elements();

this.cardNumberElement = elements.create("cardNumber");
this.cardNumberElement.mount("#card-number-element");

this.cardExpiryElement=elements.create("cardExpiry");
this.cardExpiryElement.mount("#card-expiry-element");

this.cardCvcElement=elements.create("cardCvc");
this.cardCvcElement.mount("#card-cvc-element");
}

Do the same for cardExpiryElement and cardCvcElement.

If you run the application at this stage, the form should look the same as before.

Now, the inputs are editable.

As you can see, stripe elements are already giving some validation out of the box. For example, making the input values red when they’re invalid.

Nice!

It also gives an error message when there is an invalid input.

Let’s see how to show it at the top of the form next.

STEP #4 Show Stripe Validation Error Message

First, attach change event to the stripe elements.

this.cardNumberElement.on("change", this.setValidationError);
this.cardExpiryElement.on("change", this.setValidationError);
this.cardCVCElement.on("change", this.setValidationError);

Next, create a property called stripeValidationError:null inside the data() object.

Then, define the change event function called setValidationError inside methods:{} object in which set stripeValidationError property using event.error.message.

setValidationError(event) {
      this.stripeValidationError = event.error ? event.error.message : "";
 },

Finally, show the error at the top of the form.

<div class="error red center-align white-text”
   {{stripeValidationError}}
</div>

As you can see in the template, there is an error HTML element already in place, you just need to bind the property inside it.

Pretty straight forward eh!

STEP #5 Create Stripe Token

Continue Reading...