Utilisation des Elements Issuing

La première étape de l’intégration à Issuing Elements consiste à créer un endpoint sécurisé côté serveur afin de générer des clés éphémères pour la carte que vous souhaitez afficher. Votre intégration Web Issuing Elements appelle cet endpoint.

Voici comment implémenter un endpoint de création de clés éphémères dans un framework d’applications Web dans différents langages :

// This example sets up an endpoint using the Express framework.
// Watch this video to get started: https://youtu.be/rPR2aJ6XnAc

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-03-31.basil',
  });

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

Tout d’abord, ajoutez Stripe.js à votre page. Pour en savoir plus sur la configuration de Stripe.js, consultez la rubrique sur l’intégration de Stripe.js.

Créez une instance Stripe et un nonce de clé éphémère pour la carte que vous souhaitez récupérer à l’aide de stripe.createEphemeralKeyNonce. Utilisez le nonce pour récupérer la clé éphémère en appelant l’endpoint côté serveur que vous avez créé :

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
const ephemeralKeyResult = await fetch('/ephemeral-keys', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    card_id: cardId,
    nonce: nonce,
  })
});

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

Maintenant que vous avez une clé éphémère, vous pouvez afficher les informations sensibles de votre carte bancaire. Pour ce faire, vous pouvez utiliser l’un des composants Elements suivants et réutiliser la même paire de nonce et clé éphémère pour plusieurs Elements sur la même page :

Chaque composant Element prend la configuration suivante :

Voici un exemple d’affichage de l’un de ces Elements à l’aide de la paire nonce et clé éphémère créée dans l’exemple ci-dessus :

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

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

Ajout d’un bouton de copie

Outre les « Elements d’affichage des données de carte » dont nous avons déjà parlé, nous fournissons également un Element issuingCardCopyButton. Ce dernier génère, à partir d’un argument toCopy, un bouton « Copier dans le presse-papiers » qui prend la place de son parent <div>. Ce bouton intercepte tous les événements de clics grâce à un gestionnaire de clics qui reprend les données de carte correspondantes spécifiées lors de l’initialisation et qui les copie dans le presse-papiers.

Ainsi, vous pouvez afficher des boutons « Copier dans le presse-papiers » à côté du numéro, de la date d’expiration et du cvc de la carte bancaire, ce qui évite aux titulaires de carte d’avoir à copier manuellement les données de leur carte. Nous limitons la fonctionnalité de copie à l’<iframe>, conformément aux exigences PCI de Stripe.

L’Element issuingCardCopyButton présente la configuration suivante :

Voici un exemple d’utilisation de ce composant :

const cardNumber = elements.create('issuingCardNumberDisplay', {
  issuingCard: cardId,
  nonce: nonce,
  ephemeralKeySecret: ephemeralKeySecret,
});

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

const cardNumberCopy = elements.create('issuingCardCopyButton', {
  toCopy: 'number',
  style: {
    base: {
      fontSize: '12px',
      lineHeight: '24px',
    },
  },
});

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

Si votre bouton ne réagit pas comme il se doit aux clics, veillez à bien aligner l’iframe sur votre bouton. Vous pouvez personnaliser à votre guise l’image et le conteneur <div> dans vos feuilles de style.

#card-number-copy {
  height: 24px;
  width: 24px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('data:image/svg+xml;base64,...');
}

Pour finir, offrez à vos utilisateurs l’option « commentaire post-clic ». Pour ce faire, utilisez l’événement de clic du composant Element issuingCardCopyButton. Il est possible qu’une nouvelle icône s’affiche temporairement, comme illustré ci-dessous.

#card-number-copy-success {
  display: none;
  height: 24px;
  width: 24px;
  background-image: url('data:image/svg+xml;base64,...');
  background-size: 100%;
}

// Example of hiding, replacing, and re-showing icons upon click
const timeout = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};
const hideAndShowSuccess = (iconElementId, successIconElementId) => {
  const el = document.getElementById(iconElementId);
  el.style.display = 'none';
  const elSuccess = document.getElementById(successIconElementId);
  elSuccess.style.display = 'block';
  timeout(2000).then(() => {
    elSuccess.style.display = 'none';
    el.style.display = 'block';
  });
};

cardNumberCopy.on('click', () => {
  hideAndShowSuccess('card-number-copy', 'card-number-copy-success');
});