First Demo (and Real) Payments with Firebase, Stripe, and Vue.js

Po Rith
Po Rith
Mar 15, 2018 · 4 min read
Happy sketching from a Panda Express.

This is an article trying to make it as simple as possible to setup and run your first actual online payment using Firebase, Stripe API, and Vue.js. It is mainly targeted to more intermediate and advanced designer/developers as some of the concepts — at first — will take some experience and time to wrap around.

What’s what?

Firebase (Serverless Functions)

Firebase does many great things. One thing special it offers is serverless cloud functions. For the uninitiated, cloud functions will allow you (the developer) to process and make real serverside calls without ever having to touch an actual backend. The functions will fire only when triggered, hence saving you time and money from keeping up a server up indefinitely. Some of the examples of the many things that can be done with such functions can be seen here.

Stripe API

Stripe, mostly comparable to Paypal, offers the ability to make integrations into your website to allow for processing and managing payment services. Stripe can be seen used almost throughout entire web through numerous, numerous different services. They offer great documentation, and have an API that is flexible and friendly. Stripe is based in San Francisco, with their website being seen here.

Vue.js

Vue.js is a frontend framework, comparable to React and Angular.js, offering a lightweight and beginner friendly way to build and operate websites and single page applications. While they might not be as established and large as some of their competitors, their platform is a dedicated and growing one. There is a US-based conference coming up this month, with details that can be seen here.

Okay, what to do?

1) Create a Firebase account, and set up a new project if you don’t already have one. You will also need to install the command line version of firebase into your project and then connect it to the project you created from the web. To make this project work, you will have to upgrade your Firebase account to the ‘Blaze’ plan to allow for external connections reaching your function. Unfortunately, this requires a credit card. It will all be worth it, though.

2) Set up Stripe. Create a Stripe account with a new project, making note of the locations of your Test key and your Secret key. Of course, please don’t expose your Secret key in anywhere, and in any public form. For current purposes we will be staying purely in ‘Test’ or demo mode.

3) Set up cloud functions to receive Stripe charge. Within your functions folder, inside index.js, you will want to install the CORS package to allow and manage access to your function from the cloud. There, you can delete all of the current content — or simply edit it — to contain the following block of code. After that, deploy your Firebase project.

const functions = require('firebase-functions');
const cors = require('cors')({ origin: true });
const stripe = require('stripe')(functions.config().stripe.token)
exports.paystripe = functions.https.onRequest((req, res) => {
cors(req, res, () => {
const thisReqMethod = req.method
let thisIsTheMessage = 'Make a payment with Stripe!'

if (thisReqMethod === 'POST') {
let token = req.body.token
let amount = req.body.amount
stripe.charges.create({
amount: 199,
currency: "usd",
description: "Example charge",
source: token,
}).then(function (result) {
res.status(200)
.send('Your card has been successfully charged!');
}).catch(function () {
res.status(200).send('There was an error.');
});
} else {
res.status(200).send(thisIsTheMessage);
}
});
});

4) Set up a Vue.js app. Your Vue.js app will need to do a few things. First, link to Stripe client facing API, and connect your Test key in order that you can encrypt and tokenize Card Payment information. From there, create a form that will call the following block of code through POST data.

let self = this
let data = {
token: self.token,
}
if (self.token) {
axios.post('https://us-central1-
vuepaymelive.cloudfunctions.net/paystripe', data)
.then(function (response) {
self.charge = response.data
})
.catch(function (error) {
console.log('Error');
});
} else {
alert('Create a token first.')
}

5) Connect all the dots, and test your actual application. Submitting Credit Card information on the client side of your application will create a Stripe token that will allow you to make a charge through you Firebase cloud function. You cloud function, when triggered, will take the token holding card information to combine with the Secret token and then make a completed charge through Stripe’s API. If all goes well, you should be able to check your Stripe account and see the placed charge come in almost immediately.

What now?

All that is need to receive real payments from here on out is connecting an actual bank account to your Stripe account, and then switching from your ‘Test’ mode to ‘Live’ mode. While it is possible to expand on capabilities of this application further by doing more detailed things like creating customers and managing subscriptions, the main contents of this article should be enough for anyone to be pointed in the right direction.

Po Rith

Written by

Po Rith

Designer, Vue.js Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade