Vue + Stripe Elements + Firebase Build A Checkout Form Quickly
Tags: firebase, vue, programming
Published: 2021-06-14 13:41:16

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](https://firebase.google.com/docs/functions) 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:

![alt text](https://softauthor.com/wp-content/uploads/2019/06/stripe-element-cloud-functions-1.gif)

I expect you to be familiar with a basic understanding of vue, how components work, how to [Create A Project in Firebase](https://softauthor.com/learn-to-build-firebase-crud-app-with-javascript-part01-reading-data/#setting-up-a-firebase-app-on-the-firebase-console) and [Make Queries to the Cloud Firestore](https://softauthor.com/firestore-querying-filtering-data-for-web/).

Let’s get started!

STEP #1 [Download Starter Vue Project](https://softauthor.com/vue-stripe-elements-firebase-build-a-checkout-form/#download-starter-vue-project)
STEP #2 [Instantiate Stripe Object](https://softauthor.com/vue-stripe-elements-firebase-build-a-checkout-form/#instantiate-stripe-object)
STEP #3 [Create and Mount Custom Elements to Stripe Elements](https://softauthor.com/vue-stripe-elements-firebase-build-a-checkout-form/#create-and-mount-stripe-elements)
STEP #4 [Show Stripe Validation Error Messages](https://softauthor.com/vue-stripe-elements-firebase-build-a-checkout-form/#show-stripe-validation-error-messages)
STEP #5 [Create A Stripe Token](https://softauthor.com/vue-stripe-elements-firebase-build-a-checkout-form/#create-a-stripe-token)
STEP #6 [Save StripeObject Data to Firestore](https://softauthor.com/vue-stripe-elements-firebase-build-a-checkout-form/#save-stripe-object-data-to-firestore)
STEP #7 [Trigger Firebase Cloud Function to Create A Charge](https://softauthor.com/vue-stripe-elements-firebase-build-a-checkout-form/#trigger-firebase-cloud-function-to-create-a-charge)

I have also created an infographic which depicts the workflow.

![alt text](https://softauthor.com/wp-content/uploads/2019/06/stripe-cloud-function-INFOGRAPHICS.jpg)

###STEP #1 Download Starter Vue Project

{% youtube 3A57dcz8A8E %}

I have already created a **Vue** project with some simple HTML and CSS code and you can download it [here](https://github.com/softauthor/vue-stripe-elements-cloud-functions/tree/master/start).

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

![alt text](https://softauthor.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-17-at-10.57.12-AM.png)

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.

```HTML
<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.

```Javascript
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.

```JavaScript
var elements = this.stripe.elements();
```

And, add these three properties on the data object.

```JavaScript
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](https://stripe.com/docs/payments/accept-a-payment-charges#web).*

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

```JavaScript
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!

![alt text](https://softauthor.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-16-at-1.26.39-PM.png)

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.

```JavaScript
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**.

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

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

```JavaScript
<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...](https://softauthor.com/vue-stripe-elements-firebase-build-a-checkout-form/#trigger-firebase-cloud-function-to-create-a-charge)