An Interest In:
Web News this Week
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
Get paid IRL: How to accept money with Stripe Terminal (Part 2/4)
Did you know that you can accept in-person payments with Stripe? In this series, were 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, were going to start building our application using a scaffolded Node.js project in Replit, a service you can use to build, compile and host projectsor replsfrom the comfort of your browser. Thats right, were 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.
Building your point-of-sale app
Setting up the project
Were 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 dont 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. Weve 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 youd 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 repls 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 projects required dependencies and start the app. Your starter point-of-sale app is live
Youll notice that we have a dropdown field for selecting a reader. Youll also notice that our dropdown list doesnt actually list any readers.
To fill out our list, well be creating a backend route for retrieving our Terminal readers from our Stripe account in server/server.js
and use it in client/index.js
.
Creating a route for listing readers (backend)
To list our readers in our frontend, well need to first retrieve them from Stripe in our backend.
In /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 app
and stripe
but before running app.listen()
.
Here well create a GET
endpoint on our backend at /list-readers
. In the app.get()
callback, add a try-catch. Well call stripe.terminal.readers.list()
. In our case, well limit
our results to five readers with a status of online
. In addition to status, we could also filter the results by location
, 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, well 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 (label
), status
, and most recent action
. Well dive into how to use the action
property in our next post on creating and processing payments. For now, lets focus on rendering our readers to the page and making them selectable.
Retrieving and rendering readers (frontend)
Now that we have a way to retrieve our readers, lets render them in our web app.
In 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. Well destructure the results to get a readers
(success) or an error
(failure).
If we get an error, well 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, well loop through our readersList
, adding each one to our reader-select
dropdown.
Let your repl save and reload. Your Terminal app is now able to list any online readers.
If you dont see any readers or errors, make sure that youve 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 apps dropdown list should now contain up to five online simulated or real WisePOS Es.
Just having a list of online readers along with their IDs brings you half-way to processing in-person payments with Stripes Terminal server-driven integration.
Next up: Creating and collecting payments with Stripe Terminal
In our next post, well learn how to create and hand-off payments to the Stripe Terminal readers listed in our app using the Payment Intents and Terminal Reader APIs.
Stay connected
Want to stay up to date on Stripes latest integrations, features, and open-source projects?
Follow us on Twitter
Join the official Discord server
Subscribe to our Youtube channel
Sign up for the Dev Digest
About the author
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.
Original Link: https://dev.to/stripe/get-paid-irl-how-to-accept-money-with-stripe-terminal-part-24-f4a
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To