# Afficher les détails du panier

Mettez dynamiquement à jour les détails du panier sur l'écran du lecteur.

L’écran intégré des terminaux [Verifone P400](https://docs.stripe.com/terminal/readers/verifone-p400.md), [BBPOS WisePOS E](https://docs.stripe.com/terminal/readers/bbpos-wisepos-e.md) et [Stripe Reader S700/S710](https://docs.stripe.com/terminal/readers/stripe-reader-s700-s710.md) peut afficher des articles. Pendant le processus de paiement, vous pouvez mettre à jour l’écran du lecteur pour afficher les articles individuels de la transaction, ainsi que le prix total.
![Détail du panier](https://b.stripecdn.com/docs-statics-srv/assets/set-reader-display-pre-dip.d32fa58c6645790c373a05cf39d9c416.png)

Écran de détail du panier

## Configurer l’affichage du lecteur

- [setReaderDisplay (iOS)](https://stripe.dev/stripe-terminal-ios/docs/Classes/SCPTerminal.html#/c:objc\(cs\)SCPTerminal\(im\)setReaderDisplay:completion:)
- [setReaderDisplay (Android)](https://stripe.dev/stripe-terminal-android/core/com.stripe.stripeterminal/-terminal/set-reader-display.html)
- [setReaderDisplay (JavaScript)](https://docs.stripe.com/terminal/references/api/js-sdk.md#set-reader-display)
- [setReaderDisplay (React Native)](https://stripe.dev/stripe-terminal-react-native/api-reference/interfaces/StripeTerminalSdkType.html#setReaderDisplay)
- [setReaderDisplay (Java)](https://stripe.dev/stripe-terminal-java/core/com.stripe.stripeterminal/-terminal/set-reader-display.html)

Pour afficher les postes de facture et le total sur le lecteur, appelez `setReaderDisplay` avant de traiter le paiement et transmettez les informations dans le paramètre [cart](https://docs.stripe.com/api/terminal/readers/set_reader_display.md#set_reader_display-cart).

Les montants transmis à la méthode `setReaderDisplay` sont exclusivement destinés à l’affichage. Le lecteur ne calcule pas automatiquement les taxes ou le montant total : votre application doit effectuer ces calculs avant que les valeurs ne soient affichées. Vous pouvez utiliser l’[API Stripe Tax](https://docs.stripe.com/tax/custom.md#calculate-tax) pour calculer le montant des taxes. De même, le total transmis à `setReaderDisplay` ne correspond pas nécessairement au montant facturé au client. Il convient donc de s’assurer que le montant indiqué sur le lecteur correspond bien à celui facturé au client.

# Piloté par serveur

> This is a Piloté par serveur for when terminal-sdk-platform is server-driven. View the full page at https://docs.stripe.com/terminal/features/display?terminal-sdk-platform=server-driven.

```curl
curl https://api.stripe.com/v1/terminal/readers/tmr_xxx/set_reader_display \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d type=cart \
  -d "cart[line_items][0][description]=Caramel latte" \
  -d "cart[line_items][0][amount]=659" \
  -d "cart[line_items][0][quantity]=1" \
  -d "cart[line_items][1][description]=Dozen donuts" \
  -d "cart[line_items][1][amount]=1239" \
  -d "cart[line_items][1][quantity]=1" \
  -d "cart[currency]=usd" \
  -d "cart[tax]=100" \
  -d "cart[total]=1998"
```

Pour effacer l’affichage du lecteur sur l’intégration pilotée par serveur, appelez l’endpoint [cancel_action](https://docs.stripe.com/api/terminal/readers/cancel_action.md).


# JavaScript

> This is a JavaScript for when terminal-sdk-platform is js. View the full page at https://docs.stripe.com/terminal/features/display?terminal-sdk-platform=js.

```javascript
terminal.setReaderDisplay({
  type: 'cart',
  cart: {
    line_items: [
      {
        description: "Caramel latte",
        amount: 659,
        quantity: 1,
      },
      {
        description: "Dozen donuts",
        amount: 1239,
        quantity: 1,
      },
    ],
    tax: 100,
    total: 1998,
    currency: 'usd',
  },
});
```

Pour réinitialiser l’affichage du lecteur et remplacer l’interface présentant les postes de facture par l’écran de démarrage, appelez la méthode [clearReaderDisplay](https://docs.stripe.com/terminal/references/api/js-sdk.md#clear-reader-display).


# iOS

> This is a iOS for when terminal-sdk-platform is ios. View the full page at https://docs.stripe.com/terminal/features/display?terminal-sdk-platform=ios.

#### Swift

```swift
let lineItems = [
    try CartLineItemBuilder(displayName: "Caramel latte").setQuantity(1).setAmount(659).build(),
    try CartLineItemBuilder(displayName: "Dozen donuts").setQuantity(1).setAmount(1239).build(),
]

let cart = try CartBuilder(currency: "usd")
    .setTax(100)
    .setTotal(1998)
    .setLineItems(lineItems)
    .build()

Terminal.shared.setReaderDisplay(cart) { (error) in
    // Check for errors
}
```

Pour réinitialiser l’affichage du lecteur et remplacer l’interface présentant les postes de factures par l’écran de démarrage, appelez la méthode [clearReaderDisplay](https://stripe.dev/stripe-terminal-ios/docs/Classes/SCPTerminal.html#/c:objc\(cs\)SCPTerminal\(im\)clearReaderDisplay:).


# Android

> This is a Android for when terminal-sdk-platform is android. View the full page at https://docs.stripe.com/terminal/features/display?terminal-sdk-platform=android.

#### Kotlin

```kotlin
val cart = Cart.Builder(currency = "usd", tax = 100, total = 1998)
cart.lineItems = listOf(
    CartLineItem.Builder(description = "Caramel latte", quantity = 1, amount = 659).build(),
    CartLineItem.Builder(description = "Dozen donuts", quantity = 1, amount = 1239).build(),
)

Terminal.getInstance().setReaderDisplay(
    cart.build(),
    object : Callback {
        override fun onSuccess() {
            // Placeholder for handling successful operation
        }

        override fun onFailure(e: TerminalException) {
            // Placeholder for handling exception
        }
    }
)
```

Pour réinitialiser l’affichage du lecteur et remplacer l’interface présentant les postes de factures par l’écran de démarrage, appelez la méthode [clearReaderDisplay](https://stripe.dev/stripe-terminal-android/core/com.stripe.stripeterminal/-terminal/create-payment-intent.html).


# React Native

> This is a React Native for when terminal-sdk-platform is react-native. View the full page at https://docs.stripe.com/terminal/features/display?terminal-sdk-platform=react-native.

```js
const { error } = await setReaderDisplay({
  currency: 'usd',
  tax: 100,
  total: 1998,
  lineItems: [
    {
      displayName: 'Caramel latte',
      quantity: 1,
      amount: 659,
    },
    {
      displayName: 'Dozen donuts',
      quantity: 1,
      amount: 1239,
    },
  ],
});
if (error) {
  // Placeholder for handling exception
}

// Placeholder for handling successful operation
```


## Pré-insérer une carte

> La pré-insertion d’une carte n’est prise en charge que pour les paiements effectués aux États-Unis.

Les terminaux [Verifone P400](https://docs.stripe.com/terminal/readers/verifone-p400.md), [BBPOS WisePOS E](https://docs.stripe.com/terminal/readers/bbpos-wisepos-e.md) et [Stripe Reader S700/S710](https://docs.stripe.com/terminal/readers/stripe-reader-s700-s710.md) permettent de présenter une carte au lecteur avant que le montant de la transaction ne soit finalisé.

Cette option est connue sous le nom de *pre-dip*, *pre-tap* ou *pre-swipe*, et peut aider à accélérer les délais de transaction en permettant à un client de présenter un moyen de paiement avant la fin de la transaction.

La méthode `setReaderDisplay` prépare le lecteur pour la préinsertion de la carte. Une fois que vous avez appelé cette méthode, votre client peut présenter un moyen de paiement à tout moment. Vous pouvez appeler `setReaderDisplay` plusieurs fois pour mettre à jour les informations affichées sans affecter le processus de préinsertion. La mise à jour de l’affichage n’invalide pas la préinsertion, si elle a déjà eu lieu.

Le pré-trempage permet à votre client de présenter une carte dès le début du processus de paiement sans effectuer la transaction associée. Le lecteur enregistre alors le moyen de paiement présenté et le sauvegarde pour une utilisation ultérieure, bien que Stripe ne fournisse aucune mise à jour ni aucun événement indiquant que le client a pré-trempé sa carte. Vous pouvez traiter la transaction normalement. Par exemple, vous pouvez créer et traiter une `PaymentIntent` pour effectuer la transaction sans traitement particulier.

## Pré-insertion désactivée

Si la pré-insertion n’est pas disponible dans votre pays, l’écran n’affiche que le sous-total et les postes de facture.
![Pré-insertion désactivée](https://b.stripecdn.com/docs-statics-srv/assets/set-reader-display-no-pre-dip.63f146b9e0b0ded9f57fe83d2b9e4a7d.png)

Pré-insertion désactivée