Fast and Easy Stripe Checkout

5 min readApr 10, 2021

So… you’ve made a killer web app, but now want to find a way to monetize and turn your product into a business? Or you want to set up a simple way to sell your craft. At the end of the day, you need to provide a secure way to allow your customers to send you money in exchange for your product.

The traditional route used to include setting up your own payment processing account with a broker, implementing long, confusing code to handle the checkout and the various success and failure routes, and then always worrying about if you are PCI compliant or at risk of getting hacked. But worry not! Stripe is here to save the day!

While the Stripe documentation is fantastic and through, I wanted to share my own learnings and tips when I tried to implement Stripe into my eCommerce project during my coding bootcamp at Fullstack Academy.

There are five easy steps:

Create a Stripe Account
Create a Cart
Checkout Button
⬛
Checkout Success/Failure

Notice the black box. Stripe is black box that handles all of the actual payment processing and charging behind the scenes. You will send them to page from Stripe along with the cart items and they will accept the customers credit card, charge them, and then send you the payment. You have nothing to worry about with security, PCI compliance, storage of credit card numbers, etc.

Now on to the fun part:

Create a Stripe Account

The first step is to sign up and create an account with stripe. Follow the sign up instructions and it should direct you to a dashboard when complete. Don’t forget to verify your email! Once logged in, your account is automatically set up for test transactions only. This means that you can put in a real (or test) credit card to charge and while you will see the charge on the dashboard and in your app, the credit card will not be charged.

Take note of the Test API Keys. As with any API key, keep the private/secret key protected and never include it any public (or even private) github repository. Always store it as an environmental variable or in a secrets file that is in your .gitignore! Luckily with the Test API keys don’t charge for real so they are technically ok to be in code… but its not good practice so will we store them in a secrets file.

That’s it! We just need a Stripe Account and some API keys to accept payments

Create a Cart

The most basic feature of Stripe works off a simple cart object. This is the items your customers want to purchase. For a simple eCommerce store, all you need is the:

Product Name
Image URL
Purchase Quantity
Unit Price

Your cart (from your own application) may have this data in a variety of formats. Stripe requires it to be in a very specific format. Nothing complicated, but you may have to write a helper function to take in your cart as a parameter and return a Stripe formatted cart:

Your Stipe formatted cart must be an array of formatted items. This will allow the Stripe black box properly render a checkout page, complete with images and prices.

On the backend lets define an API route for checkout. This route will take in a POST request, generate the Stripe formatted cart from your helper function and then create a Stripe session

Checkout Button

This is where a little bit of work on your end comes in. You need to create a button on your front end to enter the checkout state. Once they click submit create a handleSubmit method to redirect them to the Stripe Checkout.

npm install — save stripe
npm install @stripe/stripe-js

On this click, you will want to create a stripe object and send a POST request to our server side checkout handler and pass in the cart and data. Below is a very basic shell of code

Stripe Black Box

In the user’s experience at this point, they are in the “Stripe Black Box.” Here they will be on a secure Stripe page for payment complete with product images, quantity and prices. They might even see Apple Pay if they are using Safari!

Notice the URL is on stripe.com, the test mode banner and Apple Pay!

Once payment is successful (or failed) Stripe will automatically redirect them to the URL’s defined in the API route.

Handling Success/Failure

The last thing Stripe will do is redirect the customer to a success or failure page. You can define these to be any route, but ‘/success’ and ‘/failure’ are very common

The obvious thing to do is to have some sort of page that lets the customer know if their order went through. With this, you would define some new React component that gets rendered. You will also want update inventory and possible send out an email or SMS

So now, every successful order will render a page that will call this API route and complete the neccessary steps to keep inventory up to date and customers happy!

There you have it. Simple and easy to follow code to quickly implement Stripe into any project. Any checkout via the test API keys will show a message that the card will not really be charged despite you completing a payment. Just swap out the keys to live ones and you are all set!

Happy Selling!