コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要
アカウントのダッシュボードを設定する

Issuing カード非公開プレビュー

個人に発行されたカードを表示します。

Issuing カードは、連結アカウントに対して発行された個別の card (カード) の詳細を表示します。

アカウントセッションを作成する際は、components パラメーターの issuing_card を指定して、 Issuingカードのコンポーネントを有効にします。

Command Line
curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -H "Stripe-Version: 2024-11-20.acacia; embedded_connect_beta=v2;" \
  -d account=
{{CONNECTED_ACCOUNT_ID}}
 \
  -d "components[issuing_card][enabled]"=true \
  -d "components[issuing_card][features][card_management]"=true \
  -d "components[issuing_card][features][cardholder_management]"=true \
  -d "components[issuing_card][features][card_spend_dispute_management]"=true \
  -d "components[issuing_card][features][spend_control_management]"=true

アカウントセッションを作成して ConnectJS を初期化すると、フロントエンドに Issuingカードのコンポーネントを表示できます。

issuing-card.js
// Include this element in your HTML
const issuingCard = stripeConnectInstance.create('issuing-card');
issuingCard.setDefaultCard('{{ISSUING_CARD_ID_ID');
issuingCard.setShowSpendControls(true);
container.appendChild(issuingCard);

この埋め込みコンポーネントは、次の属性に対応します。

Setterタイプ説明
setDefaultCard(string) => void初回の読み込み時に表示する Issuing Card ID を設定します。
setCardSwitching(boolean) => voidカードのドロップダウンセレクターを表示するかどうかを設定します。デフォルトは true です。
setFetchEphemeralKey(function) => voidカードの一時キーを取得するコールバックを設定します。機密データの表示をご覧ください。

Set spending controls

You can use Issuing Connect embedded components to view and, optionally, edit spending controls on your cards by turning on the Issuing component’s showSpendControls attribute.

const issuingCard = stripeConnectInstance.create('issuing-card');
issuingCard.setShowSpendControls(true);
document.body.appendChild(issuingCard);

To enable editing spend controls in the component, pass spend_control_management: true as a feature when you create an AccountSession.

Command Line
curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -H "Stripe-Version: 2024-11-20.acacia; embedded_connect_beta=v2;" \
  -d account=
{{CONNECTED_ACCOUNT_ID}}
 \
  -d "components[issuing_card][enabled]"=true \
  -d "components[issuing_card][features][spend_control_management]"=true

Sensitive data display

Issuing Connect embedded components integrate with Issuing Elements to provide a PCI-compliant way for you to allow your admins to view card numbers (PANs) and CVV or CVCs for virtual cards. The sensitive data renders inside Stripe-hosted iframes and never touches your servers.

The components can use an ephemeral key to securely retrieve card information from the Stripe API without publicly exposing your secret keys.

To enable this functionality you must:

  1. Set up an ephemeral key exchange on your server.
  2. Pass an asynchronous callback to the components.

Stripe generates a nonce from the Card ID in the Issuing Card or Issuing Cards List component when a card is selected or loaded. Stripe then calls your callback function which returns an ephemeral key, and then renders a Show numbers button if the ephemeral key is valid.

Ephemeral key exchange

Your server-side endpoint needs to accept a Card ID and a nonce. It can then create an ephemeral key using Stripe.

Here’s how you might implement an ephemeral key creation endpoint in web application frameworks across various languages:

server.js
// 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_4eC39HqLyjWDarjtT1zdp7dc'
);

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: '2024-11-20.acacia',
    stripeAccount: '{{CONNECTED_ACCOUNT_ID}}',
  });

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

Asynchronous callback

You must define an asynchronous function that accepts a named argument with property issuingCard which is a Card ID and additionally, a nonce property. This function must return an Object with properties issuingCard, nonce, and ephemeralKeySecret which are retrieved from the endpoint you set up in the previous step.

Here’s how you might implement this callback:

const issuingCard = stripeConnectInstance.create('issuing-card');
const fetchEphemeralKey = async (fetchParams) =>  {
  const { issuingCard, nonce } = fetchParams;

  // This may vary greatly based on your implementation
  const response = await myServer.getEphemeralKey({issuingCard, nonce})

  return {
    issuingCard: response.issuingCard,
    nonce: response.nonce,
    ephemeralKeySecret: response.ephemeralKeySecret
  }
}

issuingCard.setFetchEphemeralKey(fetchEphemeralKey);
document.body.appendChild(issuingCard);

アクセスをリクエストする プライベートプレビュー

サインインして、プレビュー版の Connect の埋込型コンポーネントへのアクセスをリクエストします。

Stripe アカウントがない場合は、今すぐ登録できます。

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
Stripe の製品変更ログを確認してください。
ご不明な点がございましたら、お問い合わせください。
Powered by Markdoc