Intégrer la gestion des cartes Issuing à votre site Web

Donnez à vos comptes connectés l’accès à la fonctionnalité de gestion des cartes Issuing sur votre site Web à l’aide des composants intégrés Connect. Les composants intégrés Connect vous permettent de créer des intégrations complexes avec des produits Stripe qui ne nécessitent que peu de code et de configuration.

Stripe propose deux composants différents pour la gestion des cartes Issuing :

• Composant Issuing Card
• Composant Issuing Cards List

Démarrage rapide

Les composants intégrés Issuing Connect nécessitent un accès à Issuing et Connect.

Pour en savoir plus sur le fonctionnement des composants intégrés, consultez le guide sur les composants intégrés Connect. Le Quickstart des composants intégrés correspondant peut vous aider à configurer votre environnement.

Pour intégrer la gestion des cartes Issuing à votre site Web :

1. Suivez les étapes permettant de créer un compte connecté avec des fonctionnalités Issuing.
2. Créez un titulaire de carte et des cartes pour ce compte connecté.
3. Créez une AccountSession avec issuing_card: {enabled: true} ou issuing_cards_list: {enabled: true}.
4. Ajoutez le composant issuing-card ou issuing-cards-list au DOM.

Composant Issuing Card

Le composant Issuing Card permet aux administrateurs d’afficher les détails de chaque carte. Depuis cette vue, ils peuvent définir des contrôles de dépenses, et activer, désactiver (bloquer) ou annuler des cartes. Si vous implémentez l’affichage des données sensibles, ils peuvent également afficher les numéros de carte (PAN) et les CVV ou CVC des cartes virtuelles.

Configuration du composant Issuing Card

Ce composant intégré prend en charge les paramètres suivants :

Composant Issuing Cards List

Le composant Issuing Cards List permet aux administrateurs d’afficher toutes les cartes d’un compte connecté. Ils peuvent filtrer les cartes par titulaire, date de création et type de carte.

Lorsque l’administrateur clique sur une ligne du tableau, une vue de la carte sélectionnée lui permet d’activer, de désactiver (bloquer) ou d’annuler la carte. Si vous implémentez l’affichage des données sensibles, il peut également afficher les numéros de carte (PAN) et le CVC ou les CVV (pour les cartes virtuelles).

Configuration du composant Issuing Cards List

Ce composant intégré prend en charge les paramètres 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);

Configuration supplémentaire

Vous pouvez personnaliser et configurer vos composants intégrés Connect de façon à ce qu’ils s’adaptent à votre site Web. Vous pouvez définir cette configuration lorsque vous initialisez StripeConnectInstance. Consultez la page Personnaliser l’apparence des composants intégrés Connect pour en savoir plus.