Utilisation des Elements Issuing

Stripe.js fournit une bibliothèque JavaScript côté navigateur qui vous permet d’afficher les données sensibles de vos cartes Issuing sur le Web en conformité avec les normes PCI. Les données sensibles sont affichées dans des iframes hébergés par Stripe et ne transitent jamais sur vos serveurs.

Authentification par clé éphémère

Stripe.js utilise des clés éphémères pour récupérer les informations de carte bancaire en toute sécurité à partir de l’API Stripe sans révéler publiquement vos clés secrètes. Pour ce faire, vous devez effectuer une partie de l’échange de clés éphémères côté serveur.

Le processus de création d’une clé éphémère commence dans le navigateur par la création d’un nonce à l’aide de Stripe.js. Un nonce est un token à usage unique qui crée une clé éphémère. Ce nonce est envoyé à votre serveur, où vous l’échangez contre une clé éphémère en appelant l’API Stripe (à l’aide de votre clé secrète).

Créez une clé éphémère côté serveur, puis transmettez-la au navigateur pour que Stripe.js puissiez l’utiliser.

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

  /* Important: Authenticate your user here! */

  const ephemeralKey = await stripe.ephemeralKeys.create({
    nonce: nonce,
    issuing_card: card_id,
  }, {
    apiVersion: '2025-08-27.basil',
  });

  response.json({
    ephemeralKeySecret: ephemeralKey.secret,
  });
});

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');


// Initialize Elements which you'll need later
const elements = stripe.elements();

// Use Stripe.js to create a nonce
const cardId = 'ic_1ITi6XKYfU8ZP6raDAXem8ql';
const nonceResult = await stripe.createEphemeralKeyNonce({
  issuingCard: cardId,
});
const nonce = nonceResult.nonce;

// Call your ephemeral key creation endpoint to fetch the ephemeral key.
// Note that the ephemeral key expires after 15 minutes.
const ephemeralKeyResult = await fetch('/ephemeral-keys', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': /* Important: this endpoint must be authenticated. */
  },
  body: JSON.stringify({
    card_id: cardId,
    nonce: nonce,
  })
});

const ephemeralKeyResponse = await ephemeralKeyResult.json();
const ephemeralKeySecret = ephemeralKeyResponse.ephemeralKeySecret;

const element = elements.create(elementName, options);
element.mount("#my-parent-container");

const number = elements.create('issuingCardNumberDisplay', {
  issuingCard: cardId,
  nonce: nonce,
  ephemeralKeySecret: ephemeralKeySecret,
  style: {
    base: {
      color: '#fff',
      fontSize: '16px'
    },
  },
});

number.mount('#card-number');

Exigences en matière de sécurité

si vous choisissez d’utiliser issuingCardPinDisplay, vous devez implémenter des mesures pour vous assurer que seuls les utilisateurs autorisés peuvent y accéder. plus précisément, vous devez appliquer l’authentification à deux facteurs (2fa) avant d’accorder l’accès à toute page qui utilise issuingCardPinDisplay. si Stripe détermine que vos mesures de sécurité sont inadéquates, nous pouvons suspendre votre accès à ce composant Element.

Informations supplémentaires

Les champs PCI (tels que le numéro) de l’objet Card renvoyé sont entièrement supprimés de la charge utile result.issuingCard.

In addition to .mount() in the previous examples, the Elements also support the following methods:

• .destroy()
• .unmount()
• '.update(options)

Issuing Elements et applications natives

Émission Elements ne directement prendre en charge les plateformes formulaire d’inscription natives telles qu’iOS, Android ou React Native.

Pour afficher les informations sensibles des cartes avec Issuing Elements dans votre application native, utilisez une vue Web. Créez une intégration Web sur vos serveurs en suivant ce guide, puis faites pointer l’URL d’une vue Web vers cette intégration. Pour en savoir plus sur l’implémentation des vues Web pour les applications natives, consultez ces ressources externes :

• iOS et iPadOS : WKWebView
• Android : WebView
• React Native : react-native-webview
• Flutter : webview-flutter