Online Payments with Monaca, React, Framework7 and Express backend
Have you ever wondered how to allow users to pay for products directly in your app? In this article, you will learn how to use Stripe Checkout API in React, which can help you simplify the process of charging your customers. We will also implement the backend code, written in Express framework, and deploy it on Heroku to be publicly accessible.
This article is a second part of two-part series, where we develop a Food ordering hybrid application with Monaca, React, Framework7 and Firebase database. See the first part here.
Terminology
First of all, let’s go through definitions of technologies which will be used.
Stripe Checkout
Easy to implement online payment solution: “Checkout creates a secure, Stripe-hosted payment page that lets you collect payments quickly. It works across devices and can help increase your conversion.”.
Stripe Checkout offers features such as localization (different countries might use different ways of payments, e.g. Alipay in China), tax support, customization, and many more.
In this tutorial, we will use it for one-time payments — stripe will validate the credit card and process the payment in a predefined UI. Afterwards, we will receive the money on our test account. Read more about it at: Stripe checkout website.
Heroku
“Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.”. It features many subscription types, where it is free to use for personal projects.
Multiple programming languages are supported, but for our project Node.js will be used with Express framework to create and deploy the backend side of the application. Read more at Heroku website.
Prerequisites:
- free account on Stripe,
- free account on Heroku,
- Node v14.19.0 or higher,
- finished first part of tutorial (optional).
Workflow
Let’s quickly see, how simple it is to implement online payments:
- Create the accounts and install all necessary dependencies.
- Insert the StripeCheckout component into your React frontend.
- Set up backend code to approve the payments and deploy it on Heroku (or run it locally).
- Connect frontend with backend and start charging your clients.
Frontend Code
We will start building upon the foundations of the first tutorial. You can develop locally or use Monaca Cloud IDE to have live preview of your app.
In the beginning, create a React component called “PaymentPage.jsx”. Styles are not the focus of this blog, but feel free to use the “PaymentPage.css” in the “./css” folder to style your interface.
Next, use command below to install Stripe Checkout to your project.
$ npm install react-stripe-checkoutImports in the code are as follows:
Noteworthy imports are: StripeCheckout (allows user to click a button to start the payment process), AppContext (provides info about order and customer), and functions from the database.
Next we use three React Hooks — useContext (store state of app), useState (toggling of payment option buttons) and useEffect (retrieves unique order number from database), and below them we define the first necessary part of Stripe Checkout — public key.
Side note: If you are wondering where to find this key, after you successfully logged into Stripe, go to Developers -> API Keys -> Standard Keys where you find two keys: public (safe to share — its purpose is to encrypt data sent to server) and private (decrypts data — must be stored at backend).
In the right upper corner, Test mode indicates that we are using just a dummy account, therefore do not worry if you accidentally share also the secret key. But as better practice, you could store these keys in environment variables.
Now we create a function that will be fired after clicking on the StripeCheckout component. On line 5, we call the POST method on our backend with a body containing a token and an order. The token object includes information that customer fills into the payment form, such as email and credit card information, and order includes order number and total price.
After successful response from backend, user will be redirected to summary page (line 23) or get alert to try again (line 26).
And as a last part of the frontend, insert the <StripeCheckout> component that will render as a button on your page. Only stripeKey and token props are required.
Great job! That is all what was needed at the frontend part of the code. After clicking the Pay button, you should see a similar window.
Stripe provides test cards (as the one pre-filled in picture), which ensure successful payment. But so far without a working backend, our transaction will be declined. Now we can move to another section to implement it.
Backend code
As mentioned before, the backend code is done with Express framework, but you can use your preferred technology and programming language, as long as it is supported by Stripe and Heroku.
First let’s install all necessary dependencies:
$ npm install -g heroku // globally installs Heroku CLI
$ npm install express stripe cors uuid // installs four dependenciesCors package allows us to contact our backend from URLs that we define, and the uuid package creates a unique ID to ensure that the customer is not charged twice.
The next step is to provide your secret stripe key on line below:
const stripe = require(“stripe”)(“YOUR_SECRET_KEY_GOES_HERE”);We have two exposed routes. First one uses GET request to check if our backend is working:
Second one is a POST request with route “/checkout”. It parses the body to obtain information about the customer and the order, then on line 10 it creates a customer and on line 18 creates the charge. The status of the response is sent to the frontend, with either success or error message.
During the creation of charge, we specify the amount, customer and description. These items are later visible in Payment page of Stripe:
To create such payment, you must run the Express server and contact it from frontend. You can run it locally with npm run start, or deploy it on Heroku, which will be explained in the next section.
Heroku Deployment
In the beginning, log in to Heroku website and create a new app (app must have a unique name for public URL). You will be presented with multiple ways to deploy the code, from which we choose the Deploy using Heroku Git. Follow the steps on the screen:
$ heroku login
$ cd my-project/
$ git init
$ heroku git:remote -a NAME_OF_YOUR_APP
$ git add .
$ git commit -am "Initial commit"
$ git push heroku masterAfter writing these commands, you should have notifications in Latest activity section:
Click the Open app button that opens a new tab, where you should see a message “Restaurant management backend is working!”. This means that you have deployed a working backend app.
Now change the URL on frontend to your own backend, and try the payment again. If you are redirected to the Summary page, congratulations! You successfully paid for the first product! Check the Payment page of Stripe website to see how much you earned.
Conclusion
Today, we have learnt how to implement payments in our frontend React hybrid app. You should now have fundamentals of how to publicly deploy your backend service and contact it from frontend.
If you followed every step and received money to your test account, next step would be to build your app with Monaca for iOS or Android (check this tutorial).
In case of any questions or suggestions for improvements, do not hesitate to contact me.
Good luck and have fun coding! :)
