How to display cart details on Stripe Terminal
Tags: stripe, terminal, javascript
Published: 2022-07-11 16:21:45

---
title: How to display cart details on Stripe Terminal
published: true
description: Learn how to update the Terminal's display to show your customers their cart details.
tags: stripe, terminal, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuqfqhi1fdavfjf757xd.png
---

Recently, my colleague [Charles Watkins](https://twitter.com/charlesw_dev) wrote a [4-part intro series to Stripe Terminal](https://dev.to/charlesw_dev/series/18169), 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](https://stripe.com/docs/terminal/quickstart).
 
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:

```js
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](https://stripe.com/docs/terminal/payments/setup-reader/bbpos-wisepos-e) reader:

![Terminal reader showing 2 items and the total price](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zeluid670jvp26iznchs.jpg)

## 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:

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

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

![GIF showing a demo UI on an iPad, next to the Terminal reader. I am clicking on buttons to show the cart details on the terminal and then clear the screen.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyrjiaxlpsfgrv5njkvr.gif)

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](https://stripe.com/docs/terminal/references/api/js-sdk#stripeterminal-create) or the "Get paid IRL" [blog post series](https://dev.to/charlesw_dev/series/18169).

📣 Follow [@StripeDev](https://twitter.com/stripedev) and [our team](https://twitter.com/i/lists/1459720002567868418) on [Twitter](https://twitter.com/StripeDev)
📺 Subscribe to our [Youtube channel](https://www.youtube.com/StripeDevelopers)
💬 Join the official [Discord server](https://discord.com/invite/RuJnSBXrQn)
📧 Sign up for the [Dev Digest](https://go.stripe.global/dev-digest)


## About the author

![Charlie's profile picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kp9lng0hv1idlr0pi2kx.png)

[Charlie Gerard](https://twitter.com/@devdevcharlie) is a Developer Advocate at Stripe, a [creative technologist](https://charliegerard.dev/) and [Google Developer Expert](https://developers.google.com/community/experts). She loves researching and experimenting with technologies. When she’s not coding, she enjoys spending time outdoors, trying new beers and reading.