# Issuing カード管理をウェブサイトに埋め込む

構築済みの UI コンポーネントを使用して、Issuing カード管理をウェブサイトに埋め込みます。

[Connect の埋め込みコンポーネント](https://docs.stripe.com/connect/get-started-connect-embedded-components.md)を使用して、ウェブサイトで Issuing カード管理機能へのアクセスを連結アカウントに提供します。Connect の埋め込みコンポーネントを使用すると、最小限のコーディングと設定で Stripe プロダクトとの複雑な連携を簡単に作成できます。

Stripe は、Issuing カード管理用に 2 種類のコンポーネントを提供しています。

- Issuing カードのコンポーネント
- Issuing カードのリストコンポーネント

> これらのコンポーネントは、連結アカウントの**管理ユーザー**を対象としています。管理ユーザーは、連結アカウント全体のカードおよびカード保有者に関する機密データにアクセスできます。これらのコンポーネントは、いかなる状況でも個々のカード保有者の UI を表示するためには使用しないでください。

## クイックスタート

Issuing Connect の埋め込みコンポーネントには、[Issuing と Connect](https://docs.stripe.com/issuing/connect.md) へのアクセスが必要です。

埋め込みコンポーネントの仕組みについては、[Connect の埋め込みコンポーネント](https://docs.stripe.com/connect/get-started-connect-embedded-components.md)ガイドをご覧ください。対応する[埋め込みコンポーネントのクイックスタート](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md)をご覧いただくと、システム環境の設定に役立ちます。

Issuing カード管理をウェブサイトに埋め込むには、以下の手順を実行します。

1. [Issuing ケイパビリティを使用する連結アカウントを作成](https://docs.stripe.com/issuing/connect.md#create-connected-accounts-with-issuing-capabilities)する手順に従います。
1. その連結アカウントの[カード保有者とカードを作成](https://docs.stripe.com/issuing/connect/cardholders-and-cards.md)します。
1. `issuing_card: {enabled: true}` または `issuing_cards_list: {enabled: true}` を指定して [AccountSession を作成](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md#server-endpoint)します。
1. [`issuing-card` または `issuing-cards-list` コンポーネントを DOM に追加](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md#embedded-component)します。

## Issuing カードコンポーネント

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

Issuing カードのコンポーネントを使用すると、管理者は個々のカードの詳細を表示できます。このビューからは、支出管理の設定、カードの有効化、無効化 (凍結)、キャンセルを行うことができます。[機密データの表示](https://docs.stripe.com/issuing/connect/embedded-components.md#sensitive-data-display)を実装する場合、バーチャルカードのカード番号 (PAN) と CVV またはセキュリティコードも表示できます。

### Issuing カードを設定する

この埋め込みコンポーネントは、次のパラメーターに対応します。

#### HTML + JS

| メソッド                   | タイプ        | 説明                                                                                                                                  |
| ---------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `setShowSpendControls` | `boolean`  | 支出管理タブを表示するかどうかを指定します。デフォルト値は false です。                                                                                             |
| `setDefaultCard`       | `string`   | 初回の読み込み時に表示する Issuing [Card](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) ID を設定します。                 |
| `setCardSwitching`     | `boolean`  | カードのドロップダウンセレクターを表示するかどうかを設定します。デフォルトでは、`true` に設定されています。                                                                           |
| `setFetchEphemeralKey` | `Function` | カードの一時キーを取得するコールバックを設定します。[機密データの表示](https://docs.stripe.com/issuing/connect/embedded-components.md#sensitive-data-display)をご覧ください。 |

#### React

| React のプロパティー       | タイプ        | 説明                                                                                                                            |
| ------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `showSpendControls` | `boolean`  | 支出管理タブを表示するかどうかを指定します。デフォルト値は false です。                                                                                       |
| `defaultCard`       | `string`   | 初回の読み込み時に表示する Issuing [Card](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) ID。                  |
| `cardSwitching`     | `boolean`  | カードのドロップダウンセレクターを表示するかどうか。これはデフォルトで true です。                                                                                  |
| `fetchEphemeralKey` | `Function` | カードの一時キーを取得するコールバック。[機密データの表示](https://docs.stripe.com/issuing/connect/embedded-components.md#sensitive-data-display)をご覧ください。 |

## Issuing カードリストコンポーネント

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

Issuing カードのリストコンポーネントを使用すると、管理者は連結アカウントのすべてのカードを表示できます。カード保有者、作成日、カードタイプでカードを絞り込むことができます。

管理者が表の行をクリックすると、選択したカードのビューが表示され、カードの有効化、無効化 (凍結)、キャンセルを行うことができます。[機密データの表示](https://docs.stripe.com/issuing/connect/embedded-components.md#sensitive-data-display)を実装する場合、バーチャルカードのカード番号 (PAN) とセキュリティコードまたは CVV も表示できます。

### Issuing カードのリストの設定

この埋め込みコンポーネントは、次のパラメーターに対応します。

#### HTML + JS

| メソッド                   | タイプ        | 説明                                                                                                                                           |
| ---------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `setShowSpendControls` | `boolean`  | 支出管理タブを表示するかどうかを指定します。デフォルト値は false です。                                                                                                      |
| `setFetchEphemeralKey` | `Function` | 現在選択されているカードの一時キーを取得するコールバックを設定します。[機密データの表示](https://docs.stripe.com/issuing/connect/embedded-components.md#sensitive-data-display)をご覧ください。 |

#### React

| React のプロパティー       | タイプ        | 説明                                                                                                                                     |
| ------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `showSpendControls` | `boolean`  | 支出管理タブを表示するかどうかを指定します。デフォルト値は false です。                                                                                                |
| `fetchEphemeralKey` | `Function` | 現在選択されているカードの一時キーを取得するコールバック。[機密データの表示](https://docs.stripe.com/issuing/connect/embedded-components.md#sensitive-data-display)をご覧ください。 |

## 支出管理を設定する

Issuing Connect の埋め込みコンポーネントを使用して Issuing コンポーネントの `showSpendControls` 属性をオンにすることで、カードの[支出管理](https://docs.stripe.com/issuing/controls/spending-controls.md)を表示したり、必要に応じて編集したりすることが可能になります。

#### JavaScript

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

コンポーネントで支出管理の編集を有効にするには、[AccountSession の作成](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md#server-endpoint)時に `spend_control_management: true` を機能として渡します。

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[issuing_card][enabled]=true" \
  -d "components[issuing_card][features][spend_control_management]=true"
```

## 機密データの表示

Issuing Connect の埋め込み型コンポーネントは [Issuing Elements](https://docs.stripe.com/issuing/elements.md) と連携して、管理者がバーチャルカードのカード番号 (PAN) と CVV またはセキュリティコードを PCI に準拠した方法で表示できるようにします。機密データは Stripe 上のオンライン iframe 内にレンダリングされるため、お客様のサーバーと接触することはありません。

コンポーネントでは、シークレットキーを公開することなく、一時キーを使用して Stripe API からカード情報を安全に取得できます。

この機能を有効にするには、以下を行う必要があります。

1. サーバーで一時キー交換を設定します。
1. 非同期コールバックをコンポーネントに渡します。

Stripe は、カードが選択または読み込まれると、Issuing カードまたは Issuing カードのリストコンポーネントの [Card ID](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) から `nonce` を生成します。その後、Stripe は、一時キーを返すコールバック関数を呼び出し、一時キーが有効である場合は `Show numbers` ボタンを表示します。

### 一時キー交換

サーバー側のエンドポイントは、[Card ID](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) と `nonce` を受け入れる必要があります。その後、Stripe を使用して一時キーを作成できます。

さまざまな言語のウェブアプリケーションフレームワークに一時キー作成エンドポイントを実装する方法を以下に示します。

#### Node.js

```javascript
// 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')('<<YOUR_SECRET_KEY>>');

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: '2026-03-25.dahlia',
    stripeAccount: '{{CONNECTED_ACCOUNT_ID}}',
  });

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

### 非同期コールバック

プロパティ `issuingCard` ([Card](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-id) ID) とさらには `nonce` プロパティを持つ、名前付き引数を受け入れる非同期関数を定義する必要があります。この関数は、前のステップで設定したエンドポイントから取得したプロパティ `issuingCard`、`nonce`、`ephemeralKeySecret` を持つ `Object` を返す必要があります。

以下は、このコールバックを実装する方法です。

#### JavaScript

```js
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);
```

## 追加設定

連結アカウントの埋め込みコンポーネントをウェブサイトのデザインに合わせてカスタマイズし、設定することができます。この設定は、`StripeConnectInstance` を初期化する際に行うことができます。詳細については、[Connect の埋め込みコンポーネントのデザインをカスタマイズする](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#customize-the-look-of-connect-embedded-components)をご覧ください。