Implement the new Stripe checkout workflow within a React Amplify project (serverless and SCA compliant)

Yann Dnz
Yann Dnz
Nov 25 · 5 min read

Stripe checkout is probably the fastest way to accept payment in your website today. However, even if the stripe doc is well done (doc Stripe checkout), having it fully integrated to your React Amplify project can be slightly tricky. Stripe used to provide a “Checkout” button allowing you to embedded the full payment process directly in your website with a simple button, but because of a new regulation called “Strong Customer Authentication” the process gets slightly more complicated. In this tutorial we will create a simple “pay” button component developed in React with a serverless backend using AWS Amplify to handle the communication with Stripe. Sources can be found in my Github.

Assumptions

  • You have a react app running with amplify already initialized. If you don’t, just follow the Amplify Doc, it is pretty straight forward and you can easily find tutorials.
  • You have a Stripe account and know your private and public keys. Same here, quite easy with a lot of online help, you should be fine ;)
  • I used material-ui most of the time so I’ll use it to style my button. So you’ll also need it if you want to copy past the code, however it is not mandatory and you can replace it with whatever you want.

How it works

The new Stripe checkout workflow works this way:

  • The client send a checkout session request to your backend (AWS Lambda here).
  • Using our private key, this backend can ask Stripe to setup a checkout page on Stripe with our parameters and return the session id to the client.
  • When the client received the session id, he is redirected to the newly created page on Stripe to proceed to the payment.
  • After payment the client is redirected to a confirmation page on your website (or a cancel page)

Pretty simple right! So lets implement is!

First, setting up the backend

As we want the process to be serverless, the first thing to do is to create a endpoint on a lambda to ask Stripe to create a checkout session. We ll do that in Amplify by creating a new REST api with endpoint using express.

then answer as follow:

In amplify/backend, you should now see the new api and the new function. Go to amplify/backend/function/stripeCheckout/src.

In app.js you can see all methods accepted in this endpoint. We are going to implement a POST method here.

Open a new terminal in the function src folder (you want to add dependency to the function, not to the project) and install stripe:

Now you can import stripe to the to of your app.js file:

Then we create a simple post method asking Stripe to create a checkout session with our parameters that we are going to pass through the request.

The parameters accepted are:

  • name
  • description
  • amount
  • images
  • currency
  • quantity
  • redirect urls

The session object generated will be returned to the user so he can access the checkout session with the id.

Add this code to app.js (don’t forget the async ;)):

The backend is done now! That was fast right? Simply push it now:

Second, the front end

First you will need to add this line in public/index.html in order to import Stripe to your project frontend. Unfortunately you cannot install and import this dependency the usual way because of certification.

The component making the request to our backend will need to be split in two. Indeed, the component using Stripe need to be wrapped inside a component “StripProvider” initialized with your public key. You can find the full code in my Github if you need more details.

The inner component

This is the one that actually sends the request. To do so you’ll need to import API from Amplify and injectStipe to have access to a “stripe” prop:

Inject Stripe in your component:

We will need few props to access the checkout parameters:

Create a simple button to handle a click:

And finally send the request at click:

Wrap it in a parent component

The inner component need to be wrapped in a StripeProvider and Element component, so create a simple component with the same props.

Import Stripe:

Ask for some props:

Make the wrapper:

Done!

Congrats, you’re done! You can now use the newly created component this way:

When a user will click on the button, he/she will be redirected to Stripe to make the payment, and be redirected back when it is done!

Thanks for reading, if you want to go further and handle the payment in your own business logic like adding an entry in your database, I ll probably make a next tutorial on how to use Stripe webhook, stay tuned ;)

Edit: Next tutorial for Stripe webhook done! Find it here if you want to learn more :)

Serveless with React and AWS Amplify

Tutorials and discussions to implement fast and innovative solutions using React and AWS Amplify

Yann Dnz

Written by

Yann Dnz

Aeronautical and Software engineer, worked in R&D for drone development. Passionate by high technology, I also develop custom cloud based solutions for company.

Serveless with React and AWS Amplify

Tutorials and discussions to implement fast and innovative solutions using React and AWS Amplify

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