Did you know that you can accept in-person payments with Stripe? In this series, we’re going to dive headfirst into building an in-person payments integration using Stripe Terminal.
In our last post, we learned how to register a physical or simulated WisePOS E using the Stripe dashboard, so that we could build a point-of-sale application to take in-person payments.
In this blog post, we’re going to start building our application using a scaffolded Node.js project in Replit, a service you can use to build, compile and host projects–or repls–from the comfort of your browser. That’s right, we’re leaving the Stripe dashboard and breaking out our web-based IDE!
New to this series? Be sure to check out our previous post on how to set up a physical or simulated card reader for testing and development.
We’re going to start building our web app using a scaffolded Node.js project in Replit, a free service you can use to build and host projects (repls) from the comfort of your favorite browser. If you don’t already have a Replit account, you can sign up for a free one here.
To save time, be working off this starter repl. The repl has Node.js backend running the Express.js micro framework. We’ve scaffolded the project ahead of time to include the HTML templates and app server, so that we can focus on building against the Stripe Terminal APIs instead of writing boilerplate.
Fork the starter Repl to create a copy to your account, if you’d like to follow along with the tutorial and remix the application.
Add your Stripe secret key as a project environment variable by navigating to the repl’s Secret store and adding
STRIPE_SECRET_KEY as a key and your actual Secret key as its value.
Click the Run button to start your project. This will install the project’s required dependencies and start the app. Your starter point-of-sale app is live 🎉
You’ll notice that we have a dropdown field for selecting a reader. You’ll also notice that our dropdown list doesn’t actually list any readers.
To fill out our list, we’ll be creating a backend route for retrieving our Terminal readers from our Stripe account in
server/server.js and use it in
To list our readers in our frontend, we’ll need to first retrieve them from Stripe in our backend.
/server/server.js, add a route for retrieving your Terminal readers from all locations around line 30. Be sure to add your code after instantiating your Express
stripe but before running
Here we’ll create a
GET endpoint on our backend at
/list-readers. In the
app.get() callback, add a try-catch. We’ll call
stripe.terminal.readers.list(). In our case, we’ll
limit our results to five readers with a status of
online. In addition to status, we could also filter the results by
device_type , and even device
serial_number. But for testing, filtering by
status will do.
Now if we create a
GET request to our
/list-readers route, which we can do via
cURL, Postman, or by visiting the URL in our browser, we’ll get an array that contains a list of Terminal Reader objects, which represent the current state of our registered card readers.
Retrieving our readers will give us a variety of information about the reader, including its name (
status, and most recent
action. We’ll dive into how to use the
action property in our next post on creating and processing payments. For now, let’s focus on rendering our readers to the page and making them selectable.
Now that we have a way to retrieve our readers, let’s render them in our web app.
client/index.js, we have an event listener for when our DOM loads,
DOMContentLoaded. In the callback, use fetch to make a
GET request to our newly created list-readers endpoint. We’ll destructure the results to get a
readers (success) or an
If we get an error, we’ll handle the error by adding a message to our
#messages div just below our form and logging out to the console using our addMessage helper from
utils.js. Otherwise, we’ll loop through our
readersList, adding each one to our
Let your repl save and reload. Your Terminal app is now able to list any online readers.
If you don’t see any readers or errors, make sure that you’ve set up at least one simulated reader to at least one Stripe Terminal Location. You can learn how in our previous post on registering readers.
Otherwise, your app’s dropdown list should now contain up to five online simulated or real WisePOS E’s.
Just having a list of online readers along with their IDs brings you half-way to processing in-person payments with Stripe’s Terminal server-driven integration.
Want to stay up to date on Stripe’s latest integrations, features, and open-source projects?
Charles Watkins is a Developer Advocate at Stripe where he writes, codes, and livestreams about online payments. In his spare time, he enjoys drawing, gaming, and rewatching the first five seasons of Game of Thrones.