Issuing カードリスト
発行済みのすべてのカードの一覧を表示します。
Issuing カードリストは、連結アカウントに対して発行されたすべての cards (カード) のテーブルビューを表示します。
このコンポーネントに対するアクセス許可の境界は連結アカウントレベルであり、個々のcardレベルではありません。この UI は、単一のcardにアクセスが制限されているユーザーではなく、すべてのcardsにアクセスできるユーザーに表示する必要があります。
アカウントセッションを作成する際に、components パラメーターで issuing_cards_list を指定して、Issuing カードリストコンポーネントを有効にします。Issuing カードリストコンポーネントの個々の機能は issuing_cards_list で features パラメーターを指定することで、有効または無効を設定できます。
curl https://api.stripe.com/v1/account_sessions \
-u "sk_test_BQokikJOvBiI2HlWgH4olfQ2
アカウントセッションを作成して ConnectJS を初期化すると、フロントエンドに Issuing カードリストコンポーネントを表示できます。
const issuingCardsList = stripeConnectInstance.create('issuing-cards-list');
issuingCardsList.setShowSpendControls(true);
container.appendChild(issuingCardsList);
Stripe ユーザー認証を無効にする
disable_stripe_user_authentication 機能を使用して、コンポーネントで Stripe ユーザー認証が必要かどうかを制御します。デフォルトでは、このパラメーターは false です。この値は、controller.requirement_collection が application であるアカウントに対してのみ true になります。
ベストプラクティスとして、2 段階認証または同等のセキュリティ対策を導入することをお勧めします。この機能をサポートするアカウント (Custom アカウントなど) の設定により、連結アカウントがマイナス残高を返済できない場合は、お客様がそのアカウントに代わって責任を負います。
支出管理を設定する
Issuing Connect の埋め込みコンポーネントを使用して Issuing コンポーネントの showSpendControls 属性をオンにすることで、カードの支出管理を表示したり、必要に応じて編集したりすることが可能になります。
const issuingCardsList = stripeConnectInstance.create('issuing-cards-list');
issuingCardsList.setShowSpendControls(true);
document.body.appendChild(issuingCardsList);
コンポーネントで支出管理の編集を有効にするには、AccountSession の作成時に spend_control_management: true を機能として渡します。
curl https://api.stripe.com/v1/account_sessions \
-u "sk_test_BQokikJOvBiI2HlWgH4olfQ2
機密データの表示
Issuing Connect の埋め込み型コンポーネントは Issuing Elements と連携して、管理者がバーチャルカードのカード番号 (PAN) と CVV またはセキュリティコードを PCI に準拠した方法で表示できるようにします。機密データは Stripe 上のオンライン iframe 内にレンダリングされるため、お客様のサーバーと接触することはありません。
コンポーネントでは、シークレットキーを公開することなく、一時キーを使用して Stripe API からカード情報を安全に取得できます。
この機能を有効にするには、以下を行う必要があります。
- サーバーで一時キー交換を設定します。
- 非同期コールバックをコンポーネントに渡します。
Stripe は、カードが選択または読み込まれると、Issuing カードまたは Issuing カードのリストコンポーネントの Card ID から nonce を生成します。その後、Stripe は、一時キーを返すコールバック関数を呼び出し、一時キーが有効である場合は Show numbers ボタンを表示します。
一時キー交換
サーバー側のエンドポイントは、Card ID と nonce を受け入れる必要があります。その後、Stripe を使用して一時キーを作成できます。
さまざまな言語のウェブアプリケーションフレームワークに一時キー作成エンドポイントを実装する方法を以下に示します。
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'
非同期コールバック
プロパティ issuingCard (Card ID) とさらには nonce プロパティを持つ、名前付き引数を受け入れる非同期関数を定義する必要があります。この関数は、前のステップで設定したエンドポイントから取得したプロパティ issuingCard、nonce、ephemeralKeySecret を持つ Object を返す必要があります。
以下は、このコールバックを実装する方法です。
const issuingCard = stripeConnectInstance.create('issuing-card');
const fetchEphemeralKey = async (fetchParams) => {
const { issuingCard, nonce } = fetchParams;
const response = await myServer.getEphemeralKey({issuingCard, nonce})
return {
issuingCard: response.issuingCard,
nonce: response.nonce,
ephemeralKeySecret: response.ephemeralKeySecret
}
}
issuingCard.setFetchEphemeralKey(fetchEphemeralKey);
document.body.appendChild(issuingCard);