Carte Issuing

La section Carte Issuing affiche les informations d’une carte spécifique émise pour vos comptes connectés.

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, activez le composant Issuing Card en spécifiant issuing_card dans le paramètre components.

curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d account=
{{CONNECTED_ACCOUNT_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, vous pouvez générer le rendu du composant Issuing Card dans le front-end :

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

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 de vos cartes en activant l’attribut showSpendControls du composant Issuing.

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.

curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d account=
{{CONNECTED_ACCOUNT_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 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.
2. Transmettre un rappel asynchrone aux composants.

Stripe génère un nonce à partir de l’ID de la carte 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 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 :

// 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 }));

const stripe = require('stripe')(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2');

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: '2025-05-28.basil',
    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 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 :

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);