Liste des cartes Issuing

La section Liste des cartes bancaires émises affiche un tableau de toutes les cartes émises 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.

Lors de la création d’une session de compte, 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 https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d account=
{{CONNECTED_ACCOUNT_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, vous pouvez afficher le composant Issuing Cards List dans le front-end :

// 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 pour contrôler si le composant nécessite une authentification utilisateur Stripe. Par défaut, ce paramètre est défini sur la valeur « false ». Cette valeur ne peut être « true » que pour les comptes pour lesquels controller.requirement_collection est application.

Nous vous recommandons de mettre en œuvre l’authentification à deux facteurs ou des mesures de sécurité équivalentes à titre de bonne pratique. 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.

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 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.

curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d account=
{{CONNECTED_ACCOUNT_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 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);