# すべてが埋め込まれた Connect プラットフォームの連携

自社のウェブサイトを通じて Connect の機能を連結アカウントに提供します。

Connect の組み込みコンポーネントを使用すると、SaaS プラットフォームやマーケットプレイスなど、連結アカウントに提供するカスタムインターフェイスに、Stripe が管理する機能を追加できます。Stripe ダッシュボードを使用することなく、ここで決済関連のアクティビティを実行できます。完全組み込み型の導入では、以下が実現します。

- 連結アカウントは、プラットフォームのアプリケーションに埋め込まれたコンポーネントを使用して、Stripe に関連するデータ、フォーム、通知にアクセスします。連結アカウントには、Stripe ダッシュボードへのアクセス権がありません。
- Stripe は連結アカウントのクレジットリスクと不正利用リスクを管理します。リスクやコンプライアンスに関する対応については、Stripe が連結アカウントと直接やり取りし、連結アカウントは埋め込みコンポーネントを操作して対応します。
- Stripe のメール通知により、連結アカウントは、情報を確認したり、必要なアクションを行ったりするために、ユーザーのウェブサイトの埋め込みコンポーネントに誘導されます。ユーザーはこれらのコンポーネントの URL を Stripe に提供する必要があります。

## デモのサイトを見る

Stripe では、[架空ビジネス Furever のデモサイト](http://furever.dev)を構築しました。Furever は、ペットトリマーが支払いを回収できるようにするソフトウェアを提供するプラットフォームです。このデモでは、アカウント登録やアカウント管理など、多くの埋め込みコンポーネントを操作できます。

## はじめに

埋め込み型の組み込みを構築する前に、次の前提条件をすべて満たす必要があります。

1. [プラットフォームを登録](https://dashboard.stripe.com/connect)します。
2. [ダッシュボードでビジネスの詳細の確認と追加](https://dashboard.stripe.com/account/onboarding)。
3. [プラットフォームプロフィールを完成](https://dashboard.stripe.com/connect/settings/profile)させます。
4. [ブランド設定をカスタマイズ](https://dashboard.stripe.com/settings/connect/stripe-dashboard/branding)します。ビジネス名、アイコン、ブランドカラーを追加します。

プラットフォームが独自の料金体系を提供するかどうかを決定する必要もあります。そのようにする場合、 Stripe はプラットフォームから決済手数料を徴収し、お客様は連結アカウントに請求します。そのようにしない場合は、 Stripe が独自の料金体系を提供し、連結アカウントから直接、決済手数料を徴収します。

## 連結アカウントを作成

次の例では、Stripe が [リスクを管理](https://docs.stripe.com/connect/risk-management.md)し、料金体系を管理し、アカウントのユーザー登録に関する要件の責任を引き受ける連結アカウントを作成します。プラットフォームは組込みコンポーネントを使用し、連結アカウントのマイナス残高に対する責任を負いません。連結アカウントは、Stripe がホストするダッシュボードにアクセスできません。

> この例では Stripe が料金を管理しているため、[Documents embedded component](https://docs.stripe.com/connect/supported-embedded-components/documents.md) を実装する必要があります。また、税額明細や 1099 のダウンロード準備が完了すると、Stripe から連結アカウントにメールで通知が送信されます。プラットフォームが料金を管理するアカウントを作成する場合、Documents コンポーネントは不要であり、税額明細や 1099 に関する連結アカウントへの通知も Stripe からは送信されません。

アカウントのユーザー登録後に、特定の決済手段などの追加ケイパビリティをリクエストできます。

次のパラメーターを指定して [/v1/accounts](https://docs.stripe.com/api/accounts/create.md) を呼び出します。

- アカウントの `country`
- `controller.stripe_dashboard.type` = `none`
- `card_payments` ケイパビリティと `transfers` ケイパビリティをリクエストする

```curl
curl https://api.stripe.com/v1/accounts \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d country=US \
  -d "controller[stripe_dashboard][type]=none" \
  -d "capabilities[card_payments][requested]=true" \
  -d "capabilities[transfers][requested]=true"
```

```json
{
  "id": ""{{CONNECTED_ACCOUNT_ID}}"",
  "object": "account",
  "controller": {
    "type": "application",
    "is_controller": true,
    "losses": {"payments": "stripe"},
    "fees": {"payer": "account"},
    "requirement_collection": "stripe",
    "stripe_dashboard": {
      "type": "none"
    }
  },
  "type": "none",
  ...
}
```

## 組込みコンポーネントを設定する

連結アカウントは、アカウントや主要な決済機能にプラットフォームで直接アクセスします。Stripe が提供するダッシュボードにはアクセスできないため、ウェブサイトを介して特定の機能へのアクセスを提供する必要があります。

実装には、以下の組込みコンポーネントを含める必要があります。

- [アカウントユーザー登録](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [アカウント管理](https://docs.stripe.com/connect/supported-embedded-components/account-management.md)
- [通知バナー](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md)
- [Documents](https://docs.stripe.com/connect/supported-embedded-components/documents.md) (Stripe が Stripe 手数料を連結アカウントから直接回収する場合)

導入では、個別の決済に関する反証資料で不審請求の申し立てに対応する方法も提供する必要があります。これは、[Stripe の API](https://docs.stripe.com/disputes/api.md) または組込みコンポーネント ([Payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md)、[Payment details](https://docs.stripe.com/connect/supported-embedded-components/payment-details.md)、[Disputes for a payment](https://docs.stripe.com/connect/supported-embedded-components/disputes-for-a-payment.md)) を使用して実装できます。

マイナス残高を回避し、ビジネスの中断を防ぐために、必要に応じて連結アカウントが資金を追加できるようにする方法を提供することをお勧めします。これは、組込みコンポーネント ([Balances](https://docs.stripe.com/connect/supported-embedded-components/balances.md) または [Payouts](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)) を使用して実装できます。

また、[追加の組込みコンポーネント](https://docs.stripe.com/connect/supported-embedded-components.md)を導入することや、API を使用して独自の UI を構築することもできます。

連結アカウントのユーザー登録前に、[組込みコンポーネントを設定](https://docs.stripe.com/connect/get-started-connect-embedded-components.md)していることを確認してください。

## ベストプラクティス

導入の効果を最大化するには、以下の戦略を検討してください。

1. **ユーザー重視**: [アカウントユーザー登録](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)コンポーネントを使用し、プロセスをシンプルなステップに分割してわかりやすい手順を提供することで、ユーザー登録プロセスを直感的なものにします。これにより、ユーザーはアカウントの作成と管理をスムーズに行えます。
2. **法令遵守を促す**: [通知バナー](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md) コンポーネントを使用して、ユーザーが法令遵守ステータスや未対応の要件を常に把握できるようにします。ダッシュボードのホームページなど、アプリケーションの目立つ場所にバナーを配置し、バナーが表示されるようにして、必要な書類や更新に対してタイムリーなアクションを促します。
3. **レスポンシブ設計**: 導入するコンポーネントがデバイス間でレスポンシブであることを確認します。連結アカウントはモバイル端末など、さまざまなデバイスからプラットフォームにアクセスする可能性があるため、ユーザー登録と管理インターフェイスがさまざまな画面サイズで効果的に機能することを確認します。
4. **ユーザー認証とセキュリティ**: ユーザー登録とアカウント管理のプロセス中に強力な[認証手段](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#user-authentication-in-connect-embedded-components)を実装します。Stripe 認証は機密性の高いアカウント情報と入金情報の変更機能を保護しますが、その他の機密情報は製品の認証とセキュリティのみに依存します。ワンタイム SMS コードや二要素認証などの方法を使用して、全体的なセキュリティを強化できます。
5. **フィードバックメカニズム**: ユーザー登録フローと管理コンポーネントにフィードバックオプションを導入します。ユーザーが問題を報告し、改善を提案できるようにすることで、ユーザーからのフィードバックに基づいてプラットフォームを継続的に強化できます。
6. **プロアクティブなエンゲージメント**: メールまたはプラットフォームの通知を通じて法令遵守義務に関するリマインダーやアラートを送信することで、ユーザーにアクティブなアカウントの維持を促します。このプロアクティブなアプローチは、アカウントの停止やそれに伴う不満の防止に役立ちます。

## 連結アカウントをユーザー登録する

Stripe は [AccountSession](https://docs.stripe.com/api/account_sessions.md) を使用して、連結アカウントに組込みコンポーネントアクセスを提供する意図を表します。`AccountSession` を使用すると、組込みアカウントユーザー登録コンポーネントは、リクエストされたケイパビリティに基づき必要なすべての情報を収集します。

### アカウントを事前入力する

`AccountSession` を作成する前に、`Account` プロパティに既知の情報を事前入力することで、連結アカウントのユーザー登録フローを効率化できます。ユーザー登録コンポーネントは、`Account` にすでに存在する情報をリクエストしません。以下の手順に従って、会社、個人、外部アカウント情報など、できるだけ多くの情報を事前入力します。

1. [必要な確認情報](https://docs.stripe.com/connect/required-verification-information.md)ツールを使用して、連結アカウントの所在地、事業形態、リクエストされたケイパビリティに基づく要件を確認します。
2. 要件に一致する事前入力可能な情報を収集します。
3. `Account` の作成時に収集した情報を提供するか、`Account` を更新してユーザー登録前に追加します。

`Account` を作成してケイパビリティをリクエストしたら、[requirements](https://docs.stripe.com/api/accounts/object.md#account_object-requirements) プロパティでそのアカウント固有の要件を確認できます。

プラットフォームはマイナス残高に対する責任を負わないため、入金口座や法人情報など、一部の連結アカウント情報へのアクセスが制限されます。連結アカウントがアカウントユーザー登録の組込みコンポーネントを使用してユーザー登録を完了すると、プラットフォームはそれらのプロパティを更新できなくなります。連結アカウント自身がそれらを更新する必要があります。

### 組込みユーザー登録コンポーネントを使用してユーザー登録を行う

[Furever のデモサイト](https://furever.dev)で、ユーザー登録コンポーネントの配置例を確認してください。

連結アカウントが支払いと入金を有効にするには、ユーザー登録を行い、必要な情報を提供する必要があります。連結アカウントをユーザー登録するには、自社のサイトで[ユーザー登録の組込みコンポーネント](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)をホストし、そこに新しいアカウントを誘導します。

### アカウントセッションを作成する

[アカウントセッションの作成](https://docs.stripe.com/api/account_sessions/create.md)時に、`components` パラメーターで `account_onboarding` を指定して、アカウント登録を有効にします。

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

### アカウントのユーザ登録コンポーネントを表示する

アカウントセッションを作成して [ConnectJS を初期化](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions)すると、フロントエンドにアカウント登録コンポーネントを表示できます。

#### JavaScript

```js
// Include this element in your HTML
const accountOnboarding = stripeConnectInstance.create('account-onboarding');
accountOnboarding.setOnExit(() => {
  console.log('User exited the onboarding flow');
});
container.appendChild(accountOnboarding);

// Optional: make sure to follow our policy instructions above
// accountOnboarding.setFullTermsOfServiceUrl('{{URL}}')
// accountOnboarding.setRecipientTermsOfServiceUrl('{{URL}}')
// accountOnboarding.setPrivacyPolicyUrl('{{URL}}')
// accountOnboarding.setCollectionOptions({
//   fields: 'eventually_due',
//   futureRequirements: 'include',
//   requirements: {
//     exclude: ['business_profile.product_description']
//   }
// })
// accountOnboarding.setOnStepChange((stepChange) => {
//   console.log(`User entered: ${stepChange.step}`);
// });
```

アカウントの主たる所有者にユーザー登録フローを表示します。主たる所有者とは Stripe での認証を設定し、アカウント情報の編集とリスクに対する対処が可能なユーザーです。連結アカウントに設定可能な Stripe に対する認証情報は 1 つのみです。認証情報が設定されたユーザーは、ワンタイム SMS コードを使用して、入金先の銀行口座の更新や更新後の法人情報の提供などの機密性の高い操作を実行できます。

### ユーザー登録イベントを待ち受ける

連結アカウントがユーザー登録を進める際、[account.updated](https://docs.stripe.com/api/events/types.md#event_types-account.updated) イベントが設定済みの [Connect Webhook](https://docs.stripe.com/connect/webhooks.md) にも送信されます。アカウントが詳細の送信を完了すると、`Account` の `details_submitted` プロパティが true に変わります。Webhook ハンドラの `account.updated` イベント本文で `details_submitted: true` を探すか、[Account を取得](https://docs.stripe.com/api/account/retrieve.md)して、ステータスを確認します。`details_submitted` が false の場合は、組込みユーザー登録コンポーネントを再度表示します。このコンポーネントは、すでに送信済みの情報をスキップし、送信されていない要件のみを収集します。

連結アカウントが詳細を送信してユーザー登録フローを完了すると、組込みのユーザー登録コンポーネントは、[コンポーネントを表示する際に設定した](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) `onExit` ハンドラを呼び出します。このコールバックを使用して、アカウントを次のアクションに誘導します。終了ハンドラを設定しない場合、またはこのハンドラ内でアクションを行わない場合、アカウントには、次に実行する明確なステップが示されずに完了メッセージが表示されます。

### 追加のケイパビリティをリクエストする (オプション)

連結アカウントのユーザー登録後も、プラットフォームで [追加のケイパビリティ](https://docs.stripe.com/connect/account-capabilities.md#creating)を引き続きリクエストできます。たとえば、アカウントに対して有効にするすべての決済手段のケイパビリティをリクエストする必要があります。

リクエストされたケイパビリティで追加情報が必要な場合、連結アカウントは[組込み通知バナー](https://docs.stripe.com/connect/build-full-embedded-integration.md#embed-the-notification-banner)を介して通知を受け取ります。

## 継続的な法令遵守とリスクの更新を処理する

Stripe が連結アカウントのクレジットリスクと不正利用リスクを管理するため、アカウントは Stripe からのアラートを確認し、これに対応できなければなりません。これらを容易にするために、プラットフォームに通知バナーとアカウント管理の組込みコンポーネントを組み込む必要があります。これらのコンポーネントを通じて Stripe が連結アカウントをどのようにサポートするかについて詳しくは、[組込み型 Connect サポート](https://docs.stripe.com/connect/embedded-support.md)をご覧ください。

## 通知バナーを組み込む

Stripe は[通知バナー組込みコンポーネント](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md)を使用して、未対応の法令遵守要件やその他の[リスク関連リクエスト](https://docs.stripe.com/connect/embedded-risk.md)を連結アカウントに通知します。これらの通知に対応することで、アカウントは、決済処理と入金受け取りができるように法令遵守を維持できます。未対応の通知がない場合は、組込み通知バナーは表示されません。

ウェブサイトのアクセスしやすい目立つ店舗に通知バナーを組み込みます。たとえば、決済画面の上部などに組み込むことができます。

### アカウントセッションを作成する

[アカウントセッションの作成](https://docs.stripe.com/api/account_sessions/create.md)時に、`components` パラメーターで `notification_banner` を指定して、通知バナーを有効にします。

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

### 通知バナーコンポーネントを表示する

#### JavaScript

```js
// Include this element in your HTML
const notificationBanner = stripeConnectInstance.create('notification-banner');
container.appendChild(notificationBanner);

// Optional:
// notificationBanner.setCollectionOptions({
//   fields: 'eventually_due',
//   futureRequirements: 'include',
// })
```

バナー通知に応答するには、アカウントは通知内のボタンをクリックします。アカウント管理の組込みコンポーネントにリダイレクトする必要はありません。

## アカウント管理を組み込む

Stripe ではリスクを管理する際に[アカウント管理組込みコンポーネント](https://docs.stripe.com/connect/supported-embedded-components/account-management.md)を必要とします。このコンポーネントを、アカウントが自身の設定やプロフィールを更新するウェブサイトに組み込んでください。

### アカウントセッションを作成する

[アカウントセッションの作成](https://docs.stripe.com/api/account_sessions/create.md)時に、`components` パラメーターで `account_management` を指定して、アカウント管理を有効にします。

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

### アカウント管理コンポーネントを表示する

#### JavaScript

```js
// Include this element in your HTML
const accountManagement = stripeConnectInstance.create('account-management');
container.appendChild(accountManagement);

// Optional:
// accountManagement.setCollectionOptions({
//   fields: 'eventually_due',
//   futureRequirements: 'include',
// })
```

このコンポーネントを使用すると、アカウントは、アカウントの詳細の更新、履行義務のある法令遵守要件への対応、認証情報の更新を行うことができます。

## 決済を導入する

必要な組込みコンポーネントを導入した後、決済の実装を設定します。決済と入金の組込みコンポーネントをプラットフォームに追加することや、自社のワークフローを構築することができます。

[Connect Webhook](https://docs.stripe.com/connect/webhooks.md) を設定し、`account.updated` イベントをリッスンします。連結アカウントは、`charges_enabled` プロパティが true の場合、決済を受け付ける準備ができています。

## 組込み型決済機能と入金機能を導入する

[payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md) と [payouts](https://docs.stripe.com/connect/supported-embedded-components/payouts.md) の組込みコンポーネントを、決済システムを構築する *前に* プラットフォームに追加します。これにより、連結アカウントは主要な決済ワークフローに簡単にアクセスして管理できます。

Payments コンポーネントには、連結アカウントの決済のリストが表示され、フィルタリングと個別の決済の詳細ビューが含まれます。アカウントは、このコンポーネントを使用して、返金を発行し、個別の決済に関する反証資料で不審請求の申し立てに対応できます。代わりに、完全に API 主導のカスタム決済リストを作成して維持することを選択した場合でも、[Payment details](https://docs.stripe.com/connect/supported-embedded-components/payment-details.md) コンポーネント、[Disputes for a payment](https://docs.stripe.com/connect/supported-embedded-components/disputes-for-a-payment.md) コンポーネント、または Stripe の [API](https://docs.stripe.com/disputes/api.md) を使用して、返金と不審請求の申し立てを有効にできます。

## アカウントセッションを作成する

[アカウントセッションの作成](https://docs.stripe.com/api/account_sessions/create.md) 時に、`components` パラメーターで `payments` を指定して、決済の組み込みコンポーネントを有効にします。`payments` で `features` パラメーターを指定することにより、決済のコンポーネントの個々の機能を有効または無効にすることができます。

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[payments][enabled]=true" \
  -d "components[payments][features][refund_management]=true" \
  -d "components[payments][features][dispute_management]=true" \
  -d "components[payments][features][capture_payments]=true" \
  -d "components[payments][features][destination_on_behalf_of_charge_management]=false"
```

連結アカウントはダイレクト支払いに関するすべての情報を表示できます。アカウントセッションの作成時に対応する機能を有効にした場合は、返金の管理、不審請求の申請の管理、支払いのキャプチャーも行うことができます。

## 支払いコンポーネントを表示する

アカウントセッションを作成して [ConnectJS を初期化](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions) すると、フロントエンドで決済コンポーネントをレンダリングできます。

#### JavaScript

```js
// Include this element in your HTML
const payments = stripeConnectInstance.create('payments');
container.appendChild(payments);

// Optional: specify filters to apply on load
// payments.setDefaultFilters({
//   amount: {greaterThan: 100},
//   date: {before: new Date(2024, 0, 1)},
//   status: ['partially_refunded', 'refund_pending', 'refunded'],
//   paymentMethod: 'card',});

```

Payouts コンポーネントは、連結アカウントの最近の入金、現在の残高、売上が利用可能になる時期を示します。

[アカウントセッションの作成](https://docs.stripe.com/api/account_sessions/create.md)時に、`components` パラメーターで `payouts` を指定して、入金の埋め込みコンポーネントを有効にします。`payouts` で `features` パラメーターを指定することにより、入金のコンポーネントの個々の機能を有効または無効にすることができます。

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

アカウントセッションを作成して [ConnectJS を初期化](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions)すると、フロントエンドで入金コンポーネントを表示できます。

#### JavaScript

```js
// Include this element in your HTML
const payouts = stripeConnectInstance.create('payouts');
container.appendChild(payouts);
```

組込みコンポーネントを実装するための実践ガイドについては、[Connect 組込みコンポーネント導入のクイックスタート](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md)をご覧ください。

## 決済を受け付ける

連結アカウントが顧客と直接取引する場合は、[ダイレクト支払い](https://docs.stripe.com/connect/direct-charges.md)を使用します。

`controller.fees.payer` が `account` に設定されていない場合、[Account](https://docs.stripe.com/api/accounts/object.md) について、Stripe は決済取引手数料をお客様のプラットフォームに課します。さらに、お客様には、連結アカウントに決済処理手数料を請求する責任があります。各決済で[プラットフォーム手数料](https://docs.stripe.com/connect/direct-charges.md#collect-fees)の値を指定するか、[プラットフォーム料金ツール](https://docs.stripe.com/connect/platform-pricing-tools.md)を使用して、インテグレーションに組み込むことなく連結アカウントから手数料を自動的に差し引くことができます。

(See full diagram at https://docs.stripe.com/connect/build-full-embedded-integration)

```text
[customer] -- ダイレクト支払い --> [10 USD の支払い]
[10 USD の支払い] --> [0.59 USD のプラットフォーム手数料]
[10 USD の支払い] -- 純額 9.41 USD --> [bank]
[0.59 USD のプラットフォーム手数料] -- (0.23 USD) Stripe --> [stripe]
[0.59 USD のプラットフォーム手数料] -- 0.36 USD の純収入 --> [bank]
[account]
[platform]
```

決済の受け付けには、Stripe がオンラインで提供する事前構築済みのページである [Stripe Checkout](https://docs.stripe.com/payments/checkout.md) の使用をお勧めします。Checkout は複数の支払い方法に対応し、顧客に最適な方法を自動的に表示します。

事前構築された UI コンポーネントである [Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用することもできます。これを埋め込むと、一度の導入で別の支払い方法を受け付けることができます。

#### 支払う

### Checkout セッションを作成する (クライアント側) (サーバー側)

Checkout セッションは、ラインアイテム、注文金額と通貨、および受け付け可能な支払い方法など、Stripe のオンライン決済ページで顧客に表示する内容を制御します。ダイレクト支払いを実行するとき、Checkout では連結アカウントのブランディング設定を使用します。詳細については、[ブランディングをカスタマイズする](https://docs.stripe.com/connect/direct-charges.md?platform=web&ui=stripe-hosted#branding)セクションをご覧ください。

デスティネーション支払いや支払いと送金別方式とは異なり、ダイレクト支払いの不審請求の申請に対処する責任は、連結アカウントが負います。プラットフォームは責任を負いません。

Checkout セッションを作成するには、サーバー側のエンドポイントを呼び出す決済ボタンをウェブサイトに追加します。

```html
<html>
  <head>
    <title>Checkout</title>
  </head>
  <body>
    <form action="/create-checkout-session" method="POST">
      <button type="submit">Pay</button>
    </form>
  </body>
</html>
```

サーバー側で、Stripe API に以下の呼び出しを行います。Checkout セッションを作成したら、レスポンスで返された [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) に顧客をリダイレクトします。

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \
  -d mode=payment \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d "payment_intent_data[application_fee_amount]=123" \
  --data-urlencode "success_url=https://example.com/success"
```

- `line_items` - このパラメーターは、顧客が購入し、オンラインのユーザインターフェイスに表示されるアイテムを表します。
- `success_url`: この引数は、支払いを完了した顧客のリダイレクト先を示します。
- `Stripe-Account`: このヘッダーは、連結アカウントの[ダイレクト支払い](https://docs.stripe.com/connect/direct-charges.md)を示します。ダイレクト支払いの場合、連結アカウントは Stripe 手数料、返金、およびチャージバックに対する責任を負います。Checkout では連結アカウントのブランディングが使用されるため、プラットフォームではなく連結アカウントと直接やり取りしているような印象を顧客に与えることができます。
- (オプション) `payment_intent_data[application_fee_amount]` - この引数は、プラットフォームが取引から受け付ける予定の金額を指定します。連結アカウントで支払いが処理された後、`application_fee_amount` がプラットフォームに送金され、連結アカウントの残高から Stripe 手数料が差し引かれます。

### 支払い後のイベントを処理する (サーバー側)

支払いが完了すると、Stripe は [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) イベントを送信します。[Webhook を使用してこれらのイベントを受信](https://docs.stripe.com/webhooks/quickstart.md)し、顧客への注文確認メールの送信、データベースへの売上記録の登録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックの実行前に顧客がブラウザーのウィンドウを閉じたり、アプリケーションを終了したりする可能性があります。また、一部の支払い方法では支払いの確定までに 2 ～ 14 日かかることがあります。実装で非同期イベントをリッスンするように設定すると、1 つの実装で複数の[支払い方法](https://stripe.com/payments/payment-methods-guide)に対応できるようになります。

Checkout で支払いを回収するときは、`checkout.session.completed` イベントの処理に加えて、以下の 2 つのイベントも処理することをお勧めします。

| イベント | 説明 | 次のステップ |
| --- | --- | --- |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | 顧客が Checkout フォームを送信して、支払いを正常に承認しました。 | 支払いの成功または失敗の結果を待ちます。 |
| [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | 顧客の支払いが成功しました。 | 購入された商品やサービスのフルフィルメントを行います。 |
| [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | 何らかの理由により決済が拒否されたか、失敗しました。 | 顧客にメールで連絡して、新たに注文するように依頼します。 |

これらのイベントのすべてに、[Checkout Session (Checkout セッション)](https://docs.stripe.com/api/checkout/sessions.md) オブジェクトが含まれています。支払いが成功すると、基となる *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) のステータスが `processing` から `succeeded` に変わります。

#### Payment Element

### PaymentIntent を作成する (サーバー側)

Stripe は [PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents.md) オブジェクトを使用して、顧客から支払いを回収する意図を示し、プロセス全体を通して請求の実施と支払い状態の変化を追跡します。
![決済フロー全体の概要図](https://b.stripecdn.com/docs-statics-srv/assets/accept-a-payment-payment-element.5cf6795a02f864923f9953611493d735.svg)

購入プロセスで顧客に表示される支払い方法は、PaymentIntent にも含まれています。Stripe によってダッシュボードの設定から支払い方法を自動的に取得することも、手動でリストすることもできます。

実装で、支払い方法を提供するためにコードベースのオプションが必要になる場合を除き、自動化されたオプションを使用することをお勧めします。これは、Stripe が通貨、支払い方法の制約、その他のパラメーターを評価し、対応可能な支払い方法のリストが決定されるためです。自動化されたオプションでは、購入完了率の向上につながり、使用通貨と顧客の所在地に最適な支払い方法が優先的に表示されます。優先度の低い支払い方法は、オーバーフローメニュー (⋯) に隠れた状態になります。

#### ダッシュボードで支払い方法を管理する

サーバーで、金額と通貨を指定する PaymentIntent を作成します。最新バージョンの API では、この機能がデフォルトで有効になっているため、`automatic_payment_methods` パラメーターの指定が任意になりました。支払い方法は[ダッシュボード](https://dashboard.stripe.com/settings/payment_methods)で管理できます。Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。これにより、PaymentIntent がダッシュボードで設定した支払い方法に適切に対応できるようにします。支払い金額は、クライアント側ではなく、常に信頼できる環境であるサーバー側で指定してください。これにより、悪意のある顧客が金額を恣意的に選択できないようにします。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \
  -d amount=1099 \
  -d currency=eur \
  -d "automatic_payment_methods[enabled]=true" \
  -d application_fee_amount=123
```

#### 支払い方法を手動で一覧表示する

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]=bancontact" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=eps" \
  -d "payment_method_types[]=ideal" \
  -d "payment_method_types[]=p24" \
  -d "payment_method_types[]=sepa_debit" \
  -d "payment_method_types[]=sofort" \
  -d application_fee_amount=123
```

`PaymentIntent` を作成する際は、特定のパラメーターを指定する必要があります。

- `amount`: 指定した金額で、サーバー側に `PaymentIntent` を作成します。サーバー側は信頼できる環境であるため、請求額は常にサーバー側で決定します。このアプローチにより、悪意のある顧客が金額を恣意的に選択できないようにします。
- `currency`: `PaymentIntent` に含める通貨によって顧客に表示される決済手段が絞り込まれるため、提供する決済手段に基づいて選択します。たとえば、`eur` を渡し、ダッシュボードで OXXO を有効にしている場合、OXXO は EUR 決済に対応していないため、顧客には表示されません。一部の決済手段は、複数の通貨や国に対応しています。このガイドのサンプルコードでは、Bancontact、クレジットカード、EPS、iDEAL、Przelewy24、SEPA ダイレクトデビット、Sofort を使用しています。
- `"payment_method_types[]"`: サポートするすべての決済手段を手動で指定します。
- (任意) `payment_intent_data[application_fee_amount]`: この引数は、プラットフォームが取引から取得する予定の金額を指定します。[ダッシュボード](https://dashboard.stripe.com/test/settings/connect/platform_pricing/payments)から Stripe の[プラットフォーム料金設定ツール](https://docs.stripe.com/connect/platform-pricing-tools.md)を使用して、プラットフォーム手数料の価格を管理している場合は、この引数を含めないでください (ツールによって設定された価格ロジックが上書きされるため)。連結アカウントで決済が処理された後、Stripe は `application_fee_amount` をプラットフォームに送金し、連結アカウントの残高から Stripe 手数料を差し引きます。

> 各決済手段は、`PaymentIntent` で渡された通貨と、ビジネス拠点の国に対応している必要があります。詳細については、[決済手段の実装オプション](https://docs.stripe.com/payments/payment-methods/integration-options.md)を参照してください。

### client secret を取得する

PaymentIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

#### 1 ページのアプリケーション

ブラウザーの `fetch` 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

その後、クライアント側で JavaScript を使用して client secret を取得します。

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### サーバ側のレンダリング

サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。

決済フォームに [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

### 支払い情報を収集する (クライアント側)

Payment Element を使用してクライアント側で支払い詳細を収集します。Payment Element は事前構築された UI コンポーネントであり、さまざまな支払い方法の支払い詳細の収集を容易にします。

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を `http://` ではなく `https://` にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を[有効](https://docs.stripe.com/security/guide.md#tls)にしてください。

#### Stripe.js を設定する

#### HTML + JS

Payment Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの `head` にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

購入ページで以下の JavaScript を使用して、`Stripe` のインスタンスを作成します。

```javascript
// Initialize Stripe.js with the same connected account ID used when creating
// the PaymentIntent.
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>', {
  stripeAccount: '{{CONNECTED_ACCOUNT_ID}}'
});
```

### Stripe Elements と Payment Element を決済ページに追加する

決済ページには Payment Element を配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Pay</button>
</form>
```

フォームが読み込まれたら、Payment Element のインスタンスを作成して、それを前のステップの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) とともに、コンテナーの DOM ノードにマウントします。[Elements](https://docs.stripe.com/js/elements_object/create) インスタンスの作成時に、オプションとしてこの値を渡します。

client secret は支払いを完了できるため、慎重に扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩したりすることがないようにしてください。

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with the Appearance API
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form using the client secret
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");
```

Payment Element によって動的なフォームが表示され、顧客が支払い方法を選択できるようになります。顧客が選択した支払い方法に必要なすべての支払い詳細が、フォームで自動的に収集されます。`Elements` オブジェクトを設定するときに、自社のサイトのデザインに合わせて [Payment Element のデザインをカスタマイズ]](/elements/appearance-api)できます。

#### React

Connect.js と React Connect.js のライブラリを [npm のパブリックレジストリー](https://www.npmjs.com/package/@stripe/react-connect-js)からインストールします。

```bash
npm install --save @stripe/connect-js @stripe/react-connect-js
```

### Elements プロバイダーを決済ページに追加して設定する

Payment Element コンポーネントを使用するには、決済ページのコンポーネントを [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)でラップします。公開キーを使用して `loadStripe` を呼び出し、前のステップの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を `options` にして、返された `Promise` と一緒に `Elements` プロバイダーに渡します。

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe("<<YOUR_PUBLISHABLE_KEY>>", {
  stripeAccount: '{{CONNECTED_ACCOUNT_ID}}'
});

function App() {
  const options = {
    // pass the client secret from the previous step
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with the Appearance API
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

#### PaymentElement コンポーネントを追加する

`PaymentElement` コンポーネントを使用して、フォームを構築します。

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Payment Element によって動的なフォームが表示され、顧客は支払い方法のタイプを選択できます。このフォームは、顧客が選択した支払い方法に必要なすべての支払い詳細を自動的に収集します。`Elements` プロバイダーを設定するときに、自社のサイトのデザインに合わせて [Payment Element のデザインをカスタマイズ](https://docs.stripe.com/elements/appearance-api.md)できます。

### Stripe に支払いを送信する (クライアント側)

Payment Element からの詳細を指定して [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を使用し、支払いを完了します。ユーザーが支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) を指定します。ユーザーはまず、銀行のオーソリページなどの中間サイトにリダイレクトされ、その後 `return_url` にリダイレクトされます。カード支払いでは、支払いが正常に完了するとすぐに `return_url` にリダイレクトします。

カード決済で支払いの完了後にリダイレクトを行わない場合は、[redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) に `if_required` を設定できます。これで、リダイレクトベースの決済手段で購入する顧客のみがリダイレクトされます。

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

支払いフォームコンポーネントから [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を呼び出すには、[useStripe](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#usestripe-hook) と [useElements](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#useelements-hook) フックを使用します。

フックよりも従来のクラスコンポーネントを希望する場合は、代わりに [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#elements-consumer) を使用できます。

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

export default CheckoutForm;
```

`return_url` が、Web サイト上の支払いステータスを表示するページと対応していることを確認します。Stripe が顧客を `return_url` にリダイレクトするときは、以下の URL クエリーパラメーターが指定されます。

| パラメーター | 説明 |
| --- | --- |
| `payment_intent` | `PaymentIntent` の一意の識別子。 |
| `payment_intent_client_secret` | `PaymentIntent` オブジェクトの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret)。 |

> 顧客のブラウザーセッションを追跡するツールを利用している場合、リファラー除外リストに `stripe.com` ドメインの追加が必要になる場合があります。リダイレクトを行うと、一部のツールでは新しいセッションが作成され、セッション全体の追跡ができなくなります。

クエリパラメーターのいずれか 1 つを使用して PaymentIntent を取得します。[PaymentIntent のステータス](https://docs.stripe.com/payments/paymentintents/lifecycle.md)を調べて、顧客に表示する内容を決定します。また、`return_url` を指定するときにカスタムのクエリパラメーターを追加することもできます。このパラメーターはリダイレクトプロセスの間維持されます。

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});
```

#### React

```jsx
import React, {useState, useEffect} from 'react';
import {useStripe} from '@stripe/react-stripe-js';

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

### ウォレット情報の収集

Apple Pay または Google Pay を受け付ける場合は、送信ハンドラーの先頭で [elements.submit()](https://docs.stripe.com/js/elements/submit) を呼び出します。これにより、フォームの検証がトリガーされ、ネイティブの支払いシートが表示されるため、顧客は支払いのオーソリを行うことができます。

#### HTML + JS

```javascript
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Confirm the payment
});
```

#### React

```jsx
const handleSubmit = async (event) => {
  event.preventDefault();

  if (!stripe || !elements) {
    // Stripe.js hasn't yet loaded.
    // Make sure to disable form submission until Stripe.js has loaded.
    return;
  }

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Confirm the payment
};
```

### 支払い後のイベントを処理する (サーバー側)

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。[ダッシュボードの Webhook ツール](https://dashboard.stripe.com/webhooks)を使用するか [Webhook のガイド](https://docs.stripe.com/webhooks/quickstart.md)に従ってこれらのイベントを受信し、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアントでは、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了する場合、また悪意を持つクライアントがレスポンスを不正操作する場合もあります。非同期型のイベントをリッスンするよう組み込みを設定すると、単一の組み込みで[複数の異なるタイプの支払い方法](https://stripe.com/payments/payment-methods-guide)を受け付けることができます。

Payment Element を使用して支払いを回収する場合は、`payment_intent.succeeded` イベントのほかにこれらのイベントを処理することをお勧めします。

| イベント | 説明 | アクション |
| --- | --- | --- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | 顧客が正常に支払いを完了したときに送信されます。 | 顧客に注文の確定を送信し、顧客の注文の*フルフィルメント* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected)を実行します。 |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | 顧客が正常に支払いを開始したが、支払いがまだ完了していない場合に送信されます。このイベントは、多くの場合、顧客が口座引き落としを開始するときに送信されます。その後、`payment_intent.succeeded` イベント、また、失敗の場合は `payment_intent.payment_failed` イベントが送信されます。 | 顧客に注文確認メールを送信し、支払いが保留中であることを示します。デジタル商品では、支払いの完了を待たずに注文のフルフィルメントを行うことが必要になる場合があります。 |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | 顧客が支払いを試みたが、支払いに失敗する場合に送信されます。 | 支払いが `processing` から `payment_failed` に変わった場合は、顧客に再度支払いを試すように促します。 |

## 連結アカウントへのメール通信を設定する

Stripe は、お客様の代理として連結アカウントとやり取りし、リスク管理と継続的なコンプライアンスの確保を担います。お客様は、メールドメインとプラットフォームのブランディングでこれらのメール通信のブランドをカスタマイズすることができます。

Stripe は連結アカウントに以下のメールを送信します。

- **アカウントに関するメール**は、メールアドレス、電話番号、銀行口座の追加や変更など、アカウントの情報を確認します。
- **法令順守に関するメール**は、必要な情報を提供するようアカウントに通知します。Stripe は、金融パートナーに関連する規制を順守するために追加情報を収集しなければならないことがよくあります。
- **リスクメール**は、リスクレビュー中のアカウントに送信されます。このメールには通常、リスクアクションの解決に関する情報 (入金の一時停止を解除する方法など) を送信するための手順が記載されています。
- **税金に関するメール** (Stripe が Stripe 手数料を連結アカウントから直接回収する場合のみ)は、タックス請求書または 1099 申告書のダウンロードが可能になったことをユーザーに通知します。

支払い関連のその他のメールを連結アカウントに送信する必要のある場合は、お客様自身で送信する必要があります。たとえば、新たな不審請求の申請に関するメールを送信するには、連結アカウントの `charge.dispute.created` イベントを[リッスン](https://docs.stripe.com/webhooks.md)します。そのイベントが発生したら、[Disputes API](https://docs.stripe.com/api/disputes.md) を使用して詳細を取得し、アカウントにメールで送信します。

Stripe からのメール通知で連結アカウントを正しいページに誘導できるように、決済や連結アカウントワークフローに使用している [URL を Connect 設定に更新](https://dashboard.stripe.com/settings/connect/site-links)する必要があります。本番環境で `AccountSession` または `AccountLink` を作成する前に、これらのリンクを更新する必要があります。

## メールリンクからのリダイレクトを処理する

Stripe から送信される行動喚起を含むメールには、その行動へのリンクを含める必要があります。たとえば、連結アカウントでの行動を指示するメールを送信する場合、そのメールにはアカウント管理コンポーネントへのリンクを含める必要があります。

本番環境のアカウントセッションを作成する前に、埋め込みコンポーネントを組み込んだウェブサイトの URL を指定する必要があります。送信元のメールドメインと埋め込みコンポーネントの URL を[貴社プラットフォームの Connect 設定](https://dashboard.stripe.com/settings/connect/site-links)の **サイトのリンク** セクションで設定します。

> テスト環境では、本番環境と同じ URL を使用します。

サイトに組み込まれた埋め込みコンポーネントの場合は、**はい**を選択し、コンポーネントをホストするページの URL を入力します。埋め込みコンポーネントで処理されないアクションについては、**いいえ**を選択し、アカウントがそのアクションを実行できるサイトのページの URL を入力します。 URL を入力したら、正しいページが開くかテストして検証します。

以下の URL を設定する必要があります。

- 通知バナー
- アカウント管理
- 支払い
- 入金
- 残高
- 書類 (Stripe が Stripe 手数料を連結アカウントから直接回収する場合)

メールを送信する際、 Stripe は連結アカウントの ID を `stripe_account_id` パラメーターとしてリダイレクト URL に自動的に追加します。このパラメーターを使用して、アカウントを識別し、認証済みであることを確認します。パラメーターを読み取り、正確な埋め込みコンポーネントを表示するためのルートをサーバー上に設定します。

Stripe での連結アカウント向けメール通信の設定について詳しくは、[埋込型 Connect 連携でのメール通信](https://docs.stripe.com/connect/embedded-comms.md)をご覧ください。

## メールのブランディングと設定を構成する

Stripe は、プラットフォームのブランド設定を反映したメールを、お客様のメールドメインから連結アカウントに送信できます。Stripe で連結アカウント向けのメール通信を設定するには、プラットフォームのダッシュボードの[メール](https://dashboard.stripe.com/settings/connect/emails)をご覧ください。

## 本番環境への移行

この時点では、以下を使用してプラットフォームの連携が完了しています。

- 正しい設定で作成された連結アカウント
- 連結アカウントがウェブサイトでアカウント登録、アカウントの管理、リスクアクションへの対応を行えるように統合された埋め込みコンポーネント
- プラットフォーム手数料を設定してダイレクト支払いを使用する支払いを設定する
- ブランド名の入ったメール通信を設定して、Stripe がコンプライアンス、リスクアクション、必要書類についてユーザーと通信できるようにする

## 実装内容をテストする

プラットフォームに導入された埋め込みアカウント登録を使用して、アカウント作成フローをテストします。連結アカウントの支払い方法の設定をテストするには、いずれかのテストアカウントにログインし、[支払い方法の設定](https://dashboard.stripe.com/settings/payment_methods)に移動します。テストキーとテストアカウントを使用して、決済フローをテストします。[テストカード](https://docs.stripe.com/testing.md)を使用して決済フローをテストし、さまざまな支払い結果をシミュレーションすることができます。