Issuing Elements verwenden

Stripe.js enthält eine browserseitige JavaScript-Bibliothek, mit der Sie die sensiblen Daten Ihrer Issuing-Karten im Web unter Einhaltung der PCI-Anforderungen anzeigen können. Die sensiblen Daten werden in von Stripe gehosteten iFrames gerendert und gelangen nicht auf Ihre Server.

Authentifizierung mit temporären Schlüsseln

Stripe.js verwendet temporäre Schlüssel, um Karteninformationen sicher von der Stripe -API abzurufen, ohne Ihre geheimen Schlüssel öffentlich zugänglich zu machen. Um dies einzurichten, müssen Sie einen Teil des temporären Schlüsselaustauschs auf dem Server durchführen.

Der Erstellungsprozess eines temporären Schlüssels beginnt im Browser, indem eine Nonce mit Stripe.js erstellt wird. Eine Nonce ist ein einmalig verwendbares Token, das einen temporären Schlüssel erstellt. Diese Nonce wird an Ihren Server gesendet, wo Sie sie durch Aufrufen der Stripe -API (mithilfe Ihres geheimen Schlüssels) gegen einen temporären Schlüssel eintauschen.

Nachdem Sie auf der Server-Seite einen temporären Schlüssel erstellt haben, übergeben Sie ihn zur Verwendung mit Stripe.js zurück an den Browser.

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

Sicherheitsanforderungen

Wenn Sie issuingCardPinDisplay verwenden, müssen Sie Maßnahmen ergreifen, um sicherzustellen, dass nur autorisierte Nutzer/innen darauf zugreifen können. Insbesondere müssen Sie eine Zwei-Faktor-Authentifizierung (2FA) anwenden, bevor Sie Zugriff auf eine Seite gewähren, die issuingCardPinDisplay verwendet. Wenn Stripe feststellt, dass Ihre Sicherheitsmaßnahmen unzureichend sind, können wir Ihren Zugang zu diesem Element sperren.

Zusätzliche Informationen

Das zurückgegebene Kartenobjekt verfügt über PCI-Felder (z. B. die Nummer), die vollständig aus der Nutzlast result.issuingCard entfernt wurden.

Zusätzlich zur Methode .mount() aus den vorherigen Beispielen unterstützen die Elements auch folgende Methoden:

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

Issuing Elements und native Anwendungen

Issuing Elements unterstützt keine nativen Anwendungsplattformen wie iOS, Android oder React Native direkt.

Verwenden Sie eine Webansicht, um sensible Kartendaten mit Issuing Elements in Ihrer nativen App anzuzeigen. Erstellen Sie eine Webintegration auf Ihren Servern, indem Sie diesen Leitfaden befolgen, und verweisen Sie dann die URL einer Webansicht auf diese Integration. Informationen zur Implementierung von Webansichten für native Apps finden Sie in diesen externen Ressourcen:

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