How To Setup A Stripe Checkout Page From Scratch

2019-06-17

Crowdbotics App Builder platform has a lot to offer when it comes to building an application. It helps both developers and non-developers to build, deploy, and scale applications by providing maintainable templates to make either your web or mobile application. Current web technologies such as Django, Nodejs, React, as well as to build a mobile app, React Native, and Swift templates are all supported as templates.

In this tutorial, you are going to learn how to setup a React and Nodejs template using Crowdbotics platform. Using that template project, we will setup a Stripe Payments Checkout Page from scratch. Make sure you checkout the requirements section before proceeding with the rest of the tutorial.

Table of Contents

  • Requirements
  • Setting up a Web with Crowdbotics App Builder Platform
  • Enable Test Mode in Stripe
  • Setting up the server
  • Creating a Stripe Route
  • Build a Checkout Component
  • Testing the Checkout Component
  • Conclusion

Requirements

To follow this tutorial, you are required to have installed the following on your local machine:

  • Nodejs v8.x.x or higher installed along with npm/yarn as the package manager
  • Postgresql app installed
  • Crowdbotics App builder Platform account (preferably log in with your valid Github ID)
  • Stripe Developer Account and API key Access

What are we building? Here is a short demo.

ss9

Setting up a Web with Crowdbotics App Builder Platform

To setup, a new project on Crowdbotics app builder platform, visit this link and create a new account. Once you have an individual account, access the app building platform with those credentials, and the dashboard screen will welcome you like below.

ss1

If this is your first time using Crowdbotics platform, you might not be having any projects as shown above. Click on the button Create New Application. You will are going to be directed to the following screen.

ss2

This screen lets you select a template to create an application. For our current requirement, we are going to build a web application that is based on Nodejs and Reactjs. Select the Nodejs template in the Web App, scroll down the bottom of the page and fill in the name stripe-checkout-demo and click on the button Create App.

Once the project is setup by the platform, you will be redirected back to the dashboard screen, as shown below. This screen contains all the details related to the new application you are setting up right now.

ss3

The reason I told you earlier to login with your Github account is that you can directly manage Crowdbotics app with your Github account. In the above image, you can see that even in the free tier, there many basic functionalities provided by Crowdbotics. Once the Github project is created, you will be able to either download or clone that Github repository to your local development environment.

ss4

After you have cloned the repository, execute the commands below in the order, they are specified but first, navigate inside the project directory from the terminal window. Also, do not forget to rename the file .env.example to .env before you run below commands in the project directory.

1# navigate inside the project directory
2cd stripe-checkout-demo-4738
3
4# install dependencies
5npm install
6
7# open postgresql.app first
8# even though we only require the database for user login
9# for non-mac users
10psql -f failsafe.sql
11
12# for mac users
13psql postgres -f failsafe.sql
14
15# to run the application
16npm start

The Crowdbotics scaffolded Nodejs project uses a custom a webpack server configuration to bootstrap the web app. Visit http://localhost:5000 from a browser window to see the application in action.

ss5

Create a new account if you want and login in the app as a user, you will get a success toast alert at the bottom of the screen.

This section completes, how to setup a Nodejs and React app with Crowdbotics.

Enable Test Mode in Stripe

Before you start with the rest of this tutorial, please make sure you have a Stripe account. Login into the account and go to the dashboard window. From the left sidebar menu, make sure you have enabled the test mode like below.

ss7

In Stripe, you have access to two modes. Live and test. When in test mode, you will only see payments that were from the test application (like the app we are going to build in this tutorial). The developer menu gives you access to API keys that required to create the test application. These two types of API keys are:

  • Publishable Key: used on the frontend (React client side of the application).
  • Secret Key: used on the backend to enable charges (Nodejs side of the application).

Also, note that these API key changes when you change modes between live and test.

Setting up the server

To start building the server application, all we need are the following packages.

  • express
  • body-parser
  • cors
  • stripe

The first, express and body-parser are already available with current Crowdbotics generated the project. For more information, what npm dependencies this project comes with, go through package.json file. We need to install the other two. Make sure you run the following command at the root of your project.

1npm install -S cors stripe

At the server side, we are going to create a RESTful API endpoint. The package stripe will help us communicate with the Stripe Payment API. The cors package in scenarios where your server and front-end are not sharing the same origins.

Inside server/config folder create a new file called stripe.js. This file will hold the configuration and secret key for the Stripe API. In general terms, this file will help to enable the configuration between the server side part of the application and the Stripe API itself.

1const configureStripe = require('stripe')
2
3const STRIPE_SECRET_KEY = 'sk_text_XXXX'
4
5const stripe = configureStripe(STRIPE_SECRET_KEY)
6
7module.exports = stripe

In the above snippet, just replace the sk_text_XXXX with your secret key. Lastly, to make the server work to add the following snippet of code by replacing the default middleware function as shown below. Open app.js in the root of your project directory.

1// ...
2app.use(bodyParser.json())
3app.use(
4 bodyParser.urlencoded({
5 extended: true
6 })
7)
8
9// ...

Add this line of code will help to parse the incoming body with an HTTP request. The incoming body will contain the values like token, the amount, and so on. We do not have to get into details here since we are going to take a look at the Stripe dashboard which logs everything for us. But we will do this later after the frontend part is working.

Creating a Stripe Route

The second missing part in the backend of our application is route configuration for the payments to happen. First, create a new file called payment.js inside routes folder. Then, add the following snippet of code to it.

1const stripe = require('../server/config/stripe')
2
3const stripeCharge = res => (stripeErr, stripeRes) => {
4 if (stripeErr) {
5 res.status(500).send({ error: stripeErr })
6 } else {
7 res.status(200).send({ success: stripeRes })
8 }
9}
10
11const paymentAPI = app => {
12 app.get('/', (req, res) => {
13 res.send({
14 message: 'Stripe Checkout server!',
15 timestamp: new Date().toISOString
16 })
17 })
18
19 app.post('/', (req, res) => {
20 stripe.charges.create(req.body, stripeCharge(res))
21 })
22
23 return app
24}
25
26module.exports = paymentAPI

In the above snippet, we start by importing stripe instance that is configured with the secret key. Then, define a function that has a callback with one argument res called stripeCharge. This function is responsible for handling any incoming post request that will come from the client side when the user makes an official payment using Stripe API. The incoming request contains a payload of user's card information, the amount of the payment, and so on. This function further associates to a callback that runs only when the request to charge the user either fails or succeeds.

The post route uses this function with the argument res. Next, inside the already existing index.js file, import the paymentAPI as shown below.

1var express = require('express')
2var router = express.Router()
3var path = require('path')
4var VIEWS_DIR = path.resolve(__dirname, '../client/public/views')
5// import this
6const paymentAPI = require('./payment')
7
8module.exports = function(app) {
9 // API Routes
10 app.use('/api/user', require(path.resolve(__dirname, './api/v1/user.js')))
11
12 /* GET home page. */
13 app.route('/*').get(function(req, res) {
14 res.sendFile(path.join(VIEWS_DIR, '/index.html'))
15 })
16
17 // after all other routes, add this
18 paymentAPI(app)
19}

The configuration part required to make the backend work is done.

Build a Checkout Component

In this section, let us build a checkout component that will handle the communication by sending payment requests to the server as well as represent a UI on the client side of the application. Before you proceed, make sure you have installed the following dependencies that will help to build this checkout component. Go the terminal window, and execute the following command.

1npm install -S axios react-stripe-checkout

axios is a promised based library that helps you make AJAX requests from the browser on the frontend side. This library is going to be used to make the payment request to the backend. react-stipe-checkout is a ready-to-use UI component to capture a user's information at the time of the payment. The gathered information here which include user's card number and other details is then sent back to the backend.

Now, create a new component file called Checkout.jsx inside the directory client/app/components/. Add the following code to that file.

1import React from 'react'
2import axios from 'axios'
3import StripeCheckout from 'react-stripe-checkout'
4
5const STRIPE_PUBLISHABLE = 'XXXX'
6const PAYMENT_SERVER_URL = 'http://localhost:5000'
7
8const CURRENCY = 'USD'
9
10const successPayment = data => {
11 alert('Payment Successful')
12 console.log(data)
13}
14
15const errorPayment = data => {
16 alert('Payment Error')
17 console.log(data)
18}
19
20const onToken = (amount, description) => token =>
21 axios
22 .post(PAYMENT_SERVER_URL, {
23 description,
24 source: token.id,
25 currency: CURRENCY,
26 amount: amount
27 })
28 .then(successPayment)
29 .catch(errorPayment)
30
31const Checkout = ({ name, description, amount }) => (
32 <StripeCheckout
33 name={name}
34 description={description}
35 amount={amount}
36 token={onToken(amount, description)}
37 currency={CURRENCY}
38 stripeKey={STRIPE_PUBLISHABLE}
39 />
40)
41
42export default Checkout

In the above snippet, we import the required components from different libraries, but the most notable is StripeCheckout. This is a UI component that react-stripe-checkout consist. It accepts props such as amount, token, currency and most importantly the stripeKey. This stripe key is different from the one we used in the server side part of the application. The in the above snippet STRIPE_PUBLISHABLE is the publishable key provided by the Stripe Payment API. This type of key used on the client side of an application irrespective of the framework you are using to build one.

You are also required to declare a PAYMENT_SERVER_URL on which axios will make a post request with different user information on the checkout. The methods successPayment and errorPayment are for testing purposes to see if things work the way we want them. The token prop is an important one. It has its own method onToken inside which the payment request is made. It gets triggered in both the cases whether the payment is successful or not. react-stripe-checkout library creates this token on every request.

Testing the Checkout Component

The last piece of the puzzle is to make this whole application work is to import the Checkout component inside App.jsx and the following snippet.

1// ... after other imports
2import Checkout from './Checkout.jsx'
3
4// ...
5
6render() {
7 console.log(this.state.isLoading);
8 return (
9 <div>
10 <NavBar {...this.state} />
11 <main className="site-content">
12 <Checkout name='Crowdbotics' description='Stripe Checkout Example' amount={1000} />
13 <div className="wrap container-fluid">
14 {this.state.isLoading ? "Loading..." : this.props.children && React.cloneElement(this.props.children, this.state)}
15 </div>
16 </main>
17 <Footer {...this.state} />
18 <MainSnackbar {...this.state} />
19 </div>
20 );
21 }

Once you have added the snippet and modified the render function as shown, go back to the terminal window and run the command npm start. Visit the URL http://localhost:5000/ from your browser window, and you will notice that there is a new button, as shown below. Notice the amount prop. The value of 1000 here represents only $10.00. Fun fact, to make a valid stripe payment, you least amount required is more than 50 cents in American dollars.

ss8

Now, click on the the button Pay With Card and enter the following test values.

  • Email: any existing email
  • Card number: 4242 4242 4242 4242 (Visa)
  • Date: a future date
  • CVC: a random combination of three numbers

On completion, when hit the pay button, there will be an alert message whether the payment was successful or not. See the below demo.

ss9

If you go to the Stripe Dashboard screen, in the below screen, you can easily notice the amount of activity logged.

ss10

There are proper logs generated with accurate information coming this web application.

ss11

ss12

Conclusion

This completes the step-by-step guide to integrate Stripe Payment API in a web application built using Reactjs and Nodejs. In this tutorial, even though we used Crowdbotics generated project to focus more on the topic rather than building a complete fullstack application from scratch. You can easily use the code snippets and knowledge gained in your own use cases.

Originally published at Crowdbotics

I'm Aman working as an independent fullstack developer with technologies such as Node.js, ReactJS, and React Native. I try to document and write tutorials to help JavaScript, Web and Mobile developers.