How To Setup Stripe Checkout Using Express.js & Heroku
You have a product you want to sell on your website using Stripe, without any 3rd parties, and so all you need to do is figure out how to set it all up from scratch. Ha! Obviously, this is not an easy undertaking, especially if you don’t know anything about web development.
I know because I struggled trying to figure this out myself. Fortunately, you won’t have to struggle as hard as I’m going to walk you through the process step-by-step! :)
Here’s a few things you should know before getting started:
You’ll most likely need to setup a sub-domain for your Stripe Checkout as we’re going to be using Express.js (a server-side framework) and Heroku to create our Stripe Checkout.
This tutorial is for MacOS and Linux users only unfortunately as I don’t know how to do this using Windows at this time. We will be using the command line (or Terminal app) throughout the guide.
This guide also assumes you already have Node/NPM installed on your computer already. You can learn how to do that here.
Okay, now that we have that out of the way, let’s dive in!
First we want to install Express Application Generator globally. Open Terminal and enter the following command:
Now enter the following command to create the ExpressJS app in whatever directory or folder you’re currently in, feel free to rename the app from ‘myapp’ to whatever you want to call it. For the rest of the guide I’ll assume you just left the name as ‘myapp’:
Go ahead and cd (change directory)) into the newly made directory, ‘myapp’ or whatever you decide to name it. From this point forward, this guide will assume you just left it named ‘myapp’ for sake of simplicity.
Then run the following npm command to install all the necessary dependencies. It’s ok if you don’t know what this means yet!
Now run your new express app and view it in the browser! It’s super barebones right now but it’s a full functioning express app.
Now open a web browser and enter http://localhost:3000 into the address bar, and press enter!
You should see a generic page like this:
This is your app’s homepage and only page right now. We’re going to replace the content with Stripe Checkout.
The rest of this tutorial essentially follows this other tutorial found in the Stripe Documentation FYI.
Enter the following command in Terminal:
Next, open up app.js in your favorite text editor and replace the contents of the file with the following code:
You don’t need to know what any of this means right now, just know that you can adjust the price of the product on line 23:
You can also add a product description to line 32, by default it just says “Sample Charge”:
Also, note that your Stripe API keys are used by the app on lines 10 and 11:
I’ll show you how to setup your Stripe API keys later when we deploy our app to the internet using Heroku.
Important: Never share your Stripe API test or production keys.
This code isn’t going to look like HTML to you since we’re using a different ‘version’ of HTML (if you will) called Pug. You don’t need to know that much about it right now, just create a file in the /views directory and name it index.pug.
Open it up in your text editor and enter the following code and hit the save button:
We need to send our customers somewhere after the transaction has successfully completed, for this we will create another .pug file in the /views directory, this one we’ll name it ‘charge.pug’.
Open it up in your text editor and enter the following code and click save:
Deploying your Express app can be tricky to say the least. The easiest way that I’ve found is to use Heroku. Heroku has a real friendly command line interface (CLI) tool for deploying your Express app.
Follow these steps to deploy your Express App to Heroku:
Install Heroku CLI
Create Heroku Account and install the Heroku Command Line Interface tools). You can find step by step instructions on how to do that here). You’ll need Git installed on our computer first but they cover that in the guide here.
Confirm Node.js version in package.json
Make sure your version of Node on your machine matches the version you have listed in your package.json file.
You can check the version of Node you’re using on your computer by typing the following command in the Terminal:
Create Heroku App Inside Terminal
Make sure you’re inside your project directory (i.e. /myapp ) via your computer terminal and type the following command:
After Heroku has created your new app, inside your Terminal you’ll see it gives you a special URL you’ll be able to access your app from after you deploy. It will usually be some weird string of words followed by .herokuapp.com.
You can also access this URL from inside your Heroku.com Dashboard.
Set Environment Variables
If your application has any environment variables, you’ll need to configure those as Heroku environment variables by typing the following commands into Terminal:
Deploy to Heroku
Alright we’re on the final step! Once you’ve configured all of your environment variables go and and enter the following command in your Terminal:
Now it’s time to test our new Stripe Checkout form! Visit the Heroku app URL for your new Stripe Checkout Express.js application. It looks like something like this “https://rocky-journey-37911.herokuapp.com/". You should now see our Stripe Checkout button:
Go ahead and click the button and you’ll see the Stripe Checkout overlay take over the middle of the web page.
Enter your email address, test credit card number (4242 4242 4242 4242), any expiration date so long as it’s in the future and any CVC number (I usually use 123).
Submit the test payment, if successful you’ll be sent to the ‘success’ or ‘thank you’ page:
After you’ve successfully completed the test transaction you only have one last step before you can process real transactions from customers.
Reset your Stripe API Heroku Environment Variables with your production keys instead of your test keys and you’re all set to go!
If you’d like a custom domain for your Heroku App read this guide.
Now simply style and format your new Stripe Checkout page, fill it with your sales copy and you’ve got a completely functioning sales page with payments.
Next, learn how to design your SaaS login & sign up flow.Tweet