# Liste des cartes Issuing

Affichez un tableau de toutes les cartes bancaires émises.

La section Liste des cartes bancaires émises affiche un tableau de toutes les [cartes](https://docs.stripe.com/api/issuing/cards.md) émises pour vos comptes connectés.

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

La limite d’autorisation pour ce composant se situe au niveau du compte connecté, et non au niveau card individuel. Cette interface utilisateur doit être présentée aux utilisateurs disposant d’un accès à l’ensemble des cards, et non à ceux disposant d’un accès restreint à un seul card.

Lors de la [création d’une session de compte](https://docs.stripe.com/api/account_sessions/create.md), activez le composant Issuing Cards List en spécifiant `issuing_cards_list` dans le paramètre `components`. Vous pouvez activer ou désactiver des fonctionnalités du composant Issuing Cards List en spécifiant le paramètre `features` sous `issuing_cards_list`.

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[issuing_cards_list][enabled]=true" \
  -d "components[issuing_cards_list][features][card_management]=true" \
  -d "components[issuing_cards_list][features][cardholder_management]=true" \
  -d "components[issuing_cards_list][features][card_spend_dispute_management]=true" \
  -d "components[issuing_cards_list][features][spend_control_management]=true"
```

Après avoir créé la session du compte et [initialisé ConnectJS](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), vous pouvez afficher le composant Issuing&nbsp;Cards&nbsp;List dans le front-end&nbsp;:

#### JavaScript

```js
// Include this element in your HTML
const issuingCardsList = stripeConnectInstance.create('issuing-cards-list');
issuingCardsList.setShowSpendControls(true);
container.appendChild(issuingCardsList);
```

## Désactiver l’authentification utilisateur Stripe

Utilisez la fonctionnalité [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-issuing_cards_list-features-disable_stripe_user_authentication) pour contrôler si le composant nécessite l’authentification utilisateur Stripe.

Par défaut, ce paramètre est faux.

Cette valeur ne peut être vraie que pour les comptes où le paramètre `controller.requirement_collection` a la valeur `application`.

Nous vous recommandons de mettre en œuvre l’authentification à deux facteurs ou des mesures de sécurité équivalentes à titre de [bonne pratique](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Pour les configurations de compte qui prennent en charge cette fonctionnalité, comme les comptes Custom, vous assumez la responsabilité des comptes connectés s’ils ne sont pas en mesure de rembourser les [soldes négatifs](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

## Définir des contrôles de dépenses

Vous pouvez utiliser les composants intégrés d’Issuing Connect pour afficher et, si vous le souhaitez, modifier les [contrôles de dépenses](https://docs.stripe.com/issuing/controls/spending-controls.md) de vos cartes en activant l’attribut `showSpendControls` du composant Issuing.

#### JavaScript

```js
const issuingCardsList = stripeConnectInstance.create('issuing-cards-list');
issuingCardsList.setShowSpendControls(true);
document.body.appendChild(issuingCardsList);
```

Pour activer la modification des contrôles de dépenses dans le composant, transmettez la fonctionnalité `spend_control_management: true` lorsque vous [créez une AccountSession](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md#server-endpoint).

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[issuing_cards_list][enabled]=true" \
  -d "components[issuing_cards_list][features][spend_control_management]=true"
```

## Affichage des données sensibles

Les composants intégrés d’Issuing&nbsp;Connect s’intègrent à [Issuing Elements](https://docs.stripe.com/issuing/elements.md) pour fournir un moyen conforme à la norme PCI permettant à vos administrateurs de visualiser les numéros de cartes (PAN) et les CVV ou CVC pour les cartes virtuelles. Les données sensibles sont affichées dans des iframes hébergés par Stripe et ne transitent jamais sur vos serveurs.

Les composants peuvent utiliser une clé éphémère pour récupérer en toute sécurité les informations de carte bancaire de l’API Stripe sans exposer publiquement vos clés secrètes.

Pour activer cette fonctionnalité, vous devez&nbsp;:

1. Configurer un échange de clés éphémères sur votre serveur.
2. Transmettre un rappel asynchrone aux composants.

Stripe génère un `nonce` à partir de l’[ID de la carte](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) dans le composant Issuing&nbsp;Card ou Issuing&nbsp;Cards&nbsp;List lorsqu’une carte est sélectionnée ou chargée. Stripe appelle ensuite votre fonction de rappel qui renvoie une clé éphémère, puis un bouton `Show numbers` si la clé éphémère est valide.

### Échange de clés éphémères

Votre endpoint côté serveur doit accepter un [ID de carte](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) et un `nonce`. Il peut ensuite créer une clé éphémère à l’aide de Stripe.

Voici comment implémenter un endpoint de création de clés éphémères dans des frameworks d’applications Web dans différents langages&nbsp;:

#### Node.js

```javascript
// This example sets up an endpoint using the Express framework.

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
const stripe = require('stripe')('<<YOUR_SECRET_KEY>>');

app.post('/ephemeral-keys', async (request, response) => {
  const { card_id, nonce } = request.body;

  const ephemeralKey = await stripe.ephemeralKeys.create({
    nonce: nonce,
    issuing_card: card_id,
  }, {
    apiVersion: '2026-08-26.dahlia',
    stripeAccount: '{{CONNECTED_ACCOUNT_ID}}',
  });

  response.json({
    ephemeralKeySecret: ephemeralKey.secret,
    nonce: nonce,
    issuingCard: card_id,
  });
});
```

### Rappel asynchrone

Vous devez définir une fonction asynchrone qui accepte un argument nommé avec la propriété `issuingCard`, qui est un ID de [carte](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) et une propriété `nonce`. Cette fonction doit renvoyer un `Object` avec les propriétés `issuingCard`, `nonce` et `ephemeralKeySecret` récupérées de l’endpoint que vous avez configuré à l’étape précédente.

Voici comment implémenter ce rappel&nbsp;:

#### JavaScript

```js
const issuingCard = stripeConnectInstance.create('issuing-card');
const fetchEphemeralKey = async (fetchParams) =>  {
  const { issuingCard, nonce } = fetchParams;

  // This may vary greatly based on your implementation
  const response = await myServer.getEphemeralKey({issuingCard, nonce})

  return {
    issuingCard: response.issuingCard,
    nonce: response.nonce,
    ephemeralKeySecret: response.ephemeralKeySecret
  }
}

issuingCard.setFetchEphemeralKey(fetchEphemeralKey);
document.body.appendChild(issuingCard);
```