Issuing カード管理をウェブサイトに埋め込むベータ
構築済みの UI コンポーネントを使用して、Issuing カード管理をウェブサイトに埋め込みます。
ベータ
Issuing の埋め込みコンポーネントはプライベートベータです。アクセスをリクエストするには、baas-embedded-components@stripe.com までメールをお送りください。
Connect の埋め込みコンポーネントを使用して、ウェブサイトで Issuing カード管理機能へのアクセスを連結アカウントに提供します。Connect の埋め込みコンポーネントを使用すると、最小限のコーディングと設定で Stripe プロダクトとの複雑な連携を簡単に作成できます。
Stripe は、Issuing カード管理用に 2 種類のコンポーネントを提供しています。
- Issuing カードのコンポーネント
- Issuing カードのリストコンポーネント
セキュリティのヒント
これらのコンポーネントは、連結アカウントの管理ユーザーを対象としています。管理ユーザーは、連結アカウント全体のカードおよびカード保有者に関する機密データにアクセスできます。これらのコンポーネントは、いかなる状況でも個々のカード保有者の UI を表示するためには使用しないでください。
クイックスタート![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Issuing Connect の埋め込みコンポーネントには、Issuing と Connect へのアクセスが必要です。
埋め込みコンポーネントの仕組みについては、Connect の埋め込みコンポーネントガイドをご覧ください。対応する埋め込みコンポーネントのクイックスタートをご覧いただくと、システム環境の設定に役立ちます。
Issuing カード管理をウェブサイトに埋め込むには、以下の手順を実行します。
- Issuing ケイパビリティを使用する連結アカウントを作成する手順に従います。
- その連結アカウントのカード保有者とカードを作成します。
issuing_
またはcard: {enabled: true} issuing_
を指定して AccountSession を作成します。cards_ list: {enabled: true} issuing-card
またはissuing-cards-list
コンポーネントを DOM に追加します。
Issuing カードのコンポーネント![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Issuing カードのコンポーネントを使用すると、管理者は個々のカードの詳細を表示できます。このビューからは、カードの有効化、無効化 (凍結)、キャンセルを行うことができます。機密データの表示を実装する場合、バーチャルカードのカード番号 (PAN) と CVV またはセキュリティコードも表示できます。
Issuing カードを設定する![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
この埋め込みコンポーネントは、次のパラメーターに対応します。
Issuing カードのリストコンポーネント![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Issuing カードのリストコンポーネントを使用すると、管理者は連結アカウントのすべてのカードを表示できます。カード保有者、作成日、カードタイプでカードを絞り込むことができます。
管理者が表の行をクリックすると、選択したカードのビューが表示され、カードの有効化、無効化 (凍結)、キャンセルを行うことができます。機密データの表示を実装する場合、バーチャルカードのカード番号 (PAN) とセキュリティコードまたは CVV も表示できます。
Issuing カードのリストの設定![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
この埋め込みコンポーネントは、次のパラメーターに対応します。
Sensitive data display![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
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:
- Set up an ephemeral key exchange on your server.
- 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![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
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:
Asynchronous callback![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
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:
追加設定![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
連結アカウントの埋め込みコンポーネントをウェブサイトのデザインに合わせてカスタマイズし、設定することができます。この設定は、StripeConnectInstance
を初期化する際に行うことができます。詳細については、Connect の埋め込みコンポーネントのデザインをカスタマイズするをご覧ください。