How to display cart details on Stripe Terminal

Recently, my colleague Charles Watkins wrote a 4-part intro series to Stripe Terminal, our in-person payment solution. Charles' articles will teach you how to set up and register a Terminal device and build an app to accept or cancel payments. Let's take it a step further and look into an additional feature: displaying the cart items on the Terminal device so your customers can verify what they are purchasing and make any changes if needed.

Listing items

If you haven’t built an application for Terminal yet, check out the previous series or the integration builder in our docs.

You should have a terminal variable created with StripeTerminal.create() on the client side that you can call the setReaderDisplay method on. This method takes a DisplayInfo object as input, like shown below:

terminal.setReaderDisplay({
   type: "cart",
   cart: {
     line_items: [
       {
         description: "Soy Cappuccino",
         amount: 550,
         quantity: 1,
       },
       {
         description: "Avocado on toast",
         amount: 1150,
         quantity: 1,
       },
     ],
     tax: 100,
     total: 1700,
     currency: "usd",
   },
});

In the line_items array, you can add details about the products, including a description, amount and quantity.
You can also specify the currency, tax amount and total amount.

Below is an example of what the cart display looks like on the BBPOS WisePOS E reader:

Clearing the display

After updating the device’s screen using setReaderDisplay, you can clear it using clearReaderDisplay(). This will bring the screen back to its original state.

For example, here’s what the code would look like to clear the display by clicking on a button:

document.getElementById("clear-button").onclick = () => {
 terminal.clearReaderDisplay();
};

And here’s what would happen on the Terminal device:

Now, you should be able to display cart items on the Terminal device, update them and clear the screen!

If you’d like to learn more, feel free to check out the Terminal API reference or the "Get paid IRL" blog post series.

📣 Follow @StripeDev and our team on Twitter
📺 Subscribe to our Youtube channel
💬 Join the official Discord server
📧 Sign up for the Dev Digest

About the author

Charlie Gerard is a Developer Advocate at Stripe, a creative technologist and Google Developer Expert. She loves researching and experimenting with technologies. When she’s not coding, she enjoys spending time outdoors, trying new beers and reading.