Build A Custom Payment/Checkout Form using Stripe Elements + Cloud Functions

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 and how components work and how to create a project in firebase.

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