Processing payments with Stripe, React, and AWS

February 29, 2020 - Reading time: 3 minutes

If you have ever needed to take card payments from your application, you will be aware of the requirements of the Payment Card Industry Data Security Standard (PCI DSS). If you intend to store card data on your systems, there are onerous compliance requirements placed upon you by the industry to ensure the safety of cardholder data. It can be easier to outsource this burden (although you are not able to outsource the risk of something going wrong), to a third party. Stripe, a startup founded by 2 now billionaire young Irish lads provides the technical, fraud protection, and banking infrastructure to handle your card payments leaving you free to focus on doing what you are good at.

This github project is a minimal payment processing app showing how to take card payments with Stripe. It is written using the awesome Framework7, in React, together with a somewhat unnecessary use of Redux Saga. In order to process payments using Stripe, you will however need a backend, which in this case I've chosen to write in Node within an AWS lambda, fronted by API gateway, all scripted with the serverless framework because this is just so easy to do.

The app makes use of Stripe Elements to provide UI controls for card data. No card data is persisted in the system, or transmitted to the backend. The interface is extremely simply, one Checkout button that takes you to a screen to enter card details (using Elements components gives you card verification out of the box) as shown below

In order to run the app, you will need to sign up for both a Stripe and AWS account (to run the backend). The architecture is shown below.

The app is hardcoded to a charge of 100 which equates to 1 dollar since amounts are sent to Stripe as cents.

If you follow the instructions in the linked github project, you will, after all your hard work, see a payment processed within Stripe:

You can use Stripe's development capability and test cards without ever having to set up an actual payment account with them, so have fun!