Issuing Elements の使用

Stripe.js には、Issuing カードの機密データを PCI 要件に遵守した方法でウェブに表示するために使用できる、ブラウザー側の JavaScript ライブラリが含まれています。機密データは Stripe がオンラインで提供する iframe 内にレンダリングされるため、お客様のサーバーに影響することはありません。

一時キー認証

Stripe.js は、一時キーを使用して、シークレットキーを公開することなく安全に Stripe API からカード情報を取得します。これを設定するには、サーバー側で一時キー交換を行う必要があります。

一時キーの作成プロセスは、ブラウザで Stripe.js を使用して nonce を作成すると、ブラウザで開始されます。この nonce とは、一時キーを作成する 1 回限りのトークンです。この nonce がサーバーに送信され、そこで Stripe API を (シークレットキーを使用して) 呼び出すことで一時キーと交換します。

サーバー側の一時キーを作成したら、Stripe.js が使用できるようにそれをブラウザに渡します。

// 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-12-15.clover',
  });

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

セキュリティ要件

issuingCardPinDisplay を使用する場合は、認証済みユーザーのみがアクセスできるようにするための手段を実装する必要があります。具体的には、issuingCardPinDisplay を使用するページへのアクセスを許可する前に、2 段階認証 (2FA) を適用する必要があります。セキュリティ対策が不十分であると Stripe が判断した場合、この Element へのアクセスを停止することがあります。

その他の詳細情報

返されたカードオブジェクトには、result.issuingCard ペイロードから完全に削除された PCI フィールド (番号など) が含まれています。

上記の例の .mount() に加えて、Elements は次のメソッドもサポートしています。

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

Issuing Elements とネイティブアプリケーション

Issuing Elements は、iOS、Android、React Native などのネイティブアプリケーションプラットフォームを直接サポートしていません。

ネイティブアプリで Issuing Elements のカードの機密情報を表示するには、ウェブビューを使用します。このガイドに従ってサーバーでウェブ版の実装を構築し、その実装へのウェブビューの URL を指定します。ネイティブアプリ向けのウェブビューの実装について、詳細は以下の外部リソースをご覧ください。

• iOS および iPadOS: WKWebView
• Android: WebView
• React Native: react-native-webview
• Flutter: webview-flutter