Issuing Elements verwenden

Der erste Schritt bei der Integration mit Issuing Elements besteht darin, einen sicheren, serverseitigen Endpoint zu erstellen, um temporäre Schlüssel für die Karte zu generieren, die Sie anzeigen möchten. Ihre Issuing Elements-Webintegration ruft diesen Endpoint auf.

So können Sie einen Endpoint zur Erstellung temporärer Schlüssel im Webanwendungs-Framework in verschiedenen Sprachen implementieren:

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

Fügen Sie zunächst Stripe.js in Ihre Seite ein. Weitere Informationen zum Einrichten von Stripe.js finden Sie unter Einbindung von Stripe.js.

Erstellen Sie eine Stripe-Instanz und eine temporäre Schlüsselnonce für die Karte, die Sie abrufen möchten, indem Sie stripe.createEphemeralKeyNonce verwenden. Verwenden Sie die Nonce, um den temporären Schlüssel abzurufen, indem Sie den von Ihnen erstellten serverseitigen Endpoint aufrufen:

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;

Nachdem Sie nun einen temporären Schlüssel haben, können Sie sensible Kartendaten anzeigen. Dazu können Sie eines der folgenden Elemente verwenden und Sie können dasselbe Nonce- und temporäre Schlüsselpaar für mehrere Elemente auf derselben Seite wiederverwenden:

Jedes Element nimmt die folgende Konfiguration an:

Im Folgenden finden Sie ein Beispiel dafür, wie eines dieser Elemente mithilfe des im obigen Beispiel erstellten Nonce- und temporären Schlüsselpaars angezeigt wird:

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

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

Eine Schaltfläche zum Kopieren hinzufügen

Zusätzlich zu den bereits erläuterten „Elementen zur Darstellung von Kartendaten“ stellen wir auch das Element issuingCardCopyButton zur Verfügung. Dieses akzeptiert das Argument toCopy und stellt die transparente Schaltfläche „In Zwischenablage kopieren“ dar, die den Platz des übergeordneten <div> einnimmt. Dadurch wird es ermöglicht, alle Klick-Ereignisse mit einem Klick-Handler abzufangen, der die entsprechenden Kartendaten, die bei der Initialisierung angegeben wurden, übernimmt und in die Zwischenablage kopiert.

Damit können Sie die Schaltfläche „In Zwischenablage kopieren“ neben der Kartennummer, dem Ablaufdatum und der Prüfziffer anzeigen. Dadurch wird verhindert, dass die Karteninhaber/innen die Kartendaten manuell kopieren. Die Kopierfunktion ist auf den PCI-konformen <iframe> von Stripe beschränkt.

Das Element issuingCardCopyButton erhält die folgende Konfiguration:

Nachfolgend finden Sie ein Beispiel für die Verwendung dieser Komponente:

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

Wenn Sie Schwierigkeiten mit der Reaktion Ihrer Schaltfläche auf Klicks haben, achten Sie darauf, den iframe richtig an Ihrer Schaltfläche auszurichten. Sie können Ihr Bild und die <div> in Ihren Stylesheets nach Belieben anpassen.

#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,...');
}

Als letzten Schritt sollten Sie Ihren Nutzer/innen ein „After-Click-Feedback“ anbieten. Verwenden Sie dazu das On-Click-Ereignis des issuingCardCopyButton-Elements. Dies könnte vorübergehend ein neues Symbol sein, wie unten dargestellt.

#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');
});