# Carte Issuing Présentez une carte individuelle. La section Carte Issuing affiche les informations d’une [carte](https://docs.stripe.com/api/issuing/cards.md) spécifique émise 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. Lorsque vous [créez une session de compte](https://docs.stripe.com/api/account_sessions/create.md), activez le composant Issuing Card en spécifiant `issuing_card` dans le paramètre `components`. ```curl curl https://api.stripe.com/v1/account_sessions \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[issuing_card][enabled]=true" \ -d "components[issuing_card][features][card_management]=true" \ -d "components[issuing_card][features][cardholder_management]=true" \ -d "components[issuing_card][features][card_spend_dispute_management]=true" \ -d "components[issuing_card][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 générer le rendu du composant Issuing Card dans le front-end : #### JavaScript ```js // Include this element in your HTML const issuingCard = stripeConnectInstance.create('issuing-card'); issuingCard.setDefaultCard('{{ISSUING_CARD_ID_ID}}'); issuingCard.setShowSpendControls(true); container.appendChild(issuingCard); ``` Ce composant intégré prend en charge les attributs suivants : #### HTML + JS | Mutateur | Type | Description | | ---------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `setDefaultCard` | `(string) => void` | Définit l’ID de la [carte](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) Issuing à afficher lors du chargement initial. | | `setCardSwitching` | `(boolean) => void` | Définit s’il faut afficher le menu déroulant de sélection de la carte. Défini sur « true » par défaut. | | `setFetchEphemeralKey` | `(function) => void` | Définit le rappel qui récupère la clé éphémère de la carte. Consultez la section [Affichage des données sensibles](https://docs.stripe.com/connect/supported-embedded-components/issuing-card.md#sensitive-data-display). | #### React | Propriété React | Type | Description | | ------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `defaultCard` | `string` | L’ID de la [carte](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) Issuing à afficher lors du chargement initial. | | `cardSwitching` | `boolean` | Définit s’il faut afficher le menu déroulant de sélection de la carte. Défini sur « true » par défaut. | | `fetchEphemeralKey` | `() => void` | Le rappel qui récupère la clé éphémère de la carte. Consultez la section [Affichage des données sensibles](https://docs.stripe.com/connect/supported-embedded-components/issuing-card.md#sensitive-data-display). | ## 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 issuingCard = stripeConnectInstance.create('issuing-card'); issuingCard.setShowSpendControls(true); document.body.appendChild(issuingCard); ``` 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 "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[issuing_card][enabled]=true" \ -d "components[issuing_card][features][spend_control_management]=true" ``` ## Affichage des données sensibles Les composants intégrés d’Issuing 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 : 1. Configurer un échange de clés éphémères sur votre serveur. 1. 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 Card ou Issuing Cards 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 : #### 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')('<>'); 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-04-22.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 : #### 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); ```