Connect の埋め込みコンポーネントの使用を開始する
ダッシュボードの機能をウェブサイトに埋め込む方法をご紹介します。
Connect の埋め込みコンポーネントを使用して、連結アカウントのダッシュボード機能をウェブサイトに追加します。これらのライブラリ、およびそのサポート API を使用することで、ダッシュボードやモバイルアプリケーションから Stripe プロダクトに直接アクセスできる許可をユーザーに付与できます。
StripeConnect を設定するクライアント側サーバー側
Stripe は AccountSession を使用して、API アクセスを連結アカウントに委任する意図を表します。
AccountSessions API は client secret を返し、連結アカウントに対して API コールを行うときと同じように、埋め込みコンポーネントが連結アカウントのリソースにアクセスできるようにします。
AccountSession を作成する サーバー
アプリは、アカウントセッションを取得するリクエストをサーバーに対して開始する必要があります。現在、アカウント登録のみがサポートされています。Client Secret をアプリに返す新しいエンドポイントをサーバー上に作成できます。
Create Account Session API
Create Account Session API は、Connect 埋め込みコンポーネントのコンポーネントと機能へのアクセスを決定します。Stripe は、アカウントセッションに対応するすべてのコンポーネントにこれらのパラメーターを適用します。アプリが複数のユーザーの役割をサポートしている場合は、そのアカウントセッションで有効になっているコンポーネントと機能が現在のユーザーの役割に対応していることを確認してください。たとえば、返金管理はサイトの管理者に対してのみ有効にでき、他のユーザーに対しては有効にできません。ユーザーの役割によるアクセスを確実に適用するには、サイトのユーザーの役割をアカウントセッションコンポーネントにマッピングする必要があります。
StripeConnect SDK をインストールする クライアント
Stripe Android SDK はオープンソースであり、詳細なドキュメントが提供されています。
SDK をインストールするには、app/build.gradle ファイルの dependencies
ブロックに connect
を追加します。
注
SDK の最新リリースおよび過去バージョンの詳細については、GitHub の Releases ページをご覧ください。新しいリリースの公開時に通知を受け取るには、リポジトリのリリースを確認してください。
EmbeddedComponentManager を初期化する クライアント
公開可能キーと、サーバー上に作成した新しいエンドポイントを呼び出して client secret を取得するラムダを使用して、EmbeddedComponentManager をインスタンス化します。設定の変更を処理するには、アクティビティーまたはフラグメントの ViewModel
に EmbeddedComponentManager
インスタンスを保持します。
コンポーネントを作成するには、まずアクティビティーの onCreate
メソッドで EmbeddedComponentManager.
を呼び出します。次に、上記でインスタンス化した EmbeddedComponentManager
で適切な create メソッドを呼び出します。これにより、アプリでのコンポーネントの表示に使用できるコントローラーが返されます。
Configure the Embedded Component Managerクライアント側
Connect 埋め込みコンポーネントのデザインをカスタマイズする
埋め込みコンポーネント Figma UI ツールキットには、すべてのコンポーネント、一般的なパターン、サンプルアプリケーションが含まれています。これを使用して、ウェブサイトに埋め込まれた UI を可視化してデザインできます。
Stripe は、Connect 埋め込みコンポーネントのデザインをカスタマイズするための一連のオプションを提供しています。これらをカスタマイズすると、デザインシステムのボタン、アイコン、その他のアクセントに影響します。
必要なポップアップ
ユーザー認証などの埋め込みコンポーネントの一部の動作は、認証済みの WebView に表示する必要があります。埋め込みコンポーネントをカスタマイズして、これらの WebView を排除することはできません。
これらのオプションは、EmbeddedComponentManager
の初期化時に Appearance (デザイン) を使用して設定できます。
フォントサイズを指定する場合は、デバイスのデフォルトサイズクラスに表示される、拡大縮小されていないフォントサイズを使用します。埋め込みコンポーネントは、ユーザー補助機能のフォント設定に基づいてフォントサイズを自動的に拡大縮小します。
Android のデザインオプションの一覧をご覧ください。
カスタムフォントを使用する
アプリでカスタムフォントを使用する場合 (たとえば、アプリのバイナリに埋め込まれた .
ファイルや .
ファイルなど)、EmbeddedComponentManager
の初期化時に customFonts
引数に渡される CustomFontSource でフォントファイルを指定する必要があります。そうすることで、Connect 埋め込みコンポーネントがフォントファイルにアクセスできるようになり、フォントを適切にレンダリングできます。
appearance
で指定されたフォントが正しくレンダリングされるようにするには、初期化時に EmbeddedComponentManager
に渡される CustomFontSource を使用する必要があります。
初期化後に Connect 埋め込みコンポーネントを更新する
update
メソッドを呼び出して、初期化後に埋め込みコンポーネントのデザインを変更します。
認証
Stripe は、Connect 埋め込みコンポーネントでアカウントセッションとユーザー認証情報を管理するための一連の API を提供しています。
Client Secret を更新する
長時間実行されるセッションでは、最初に提供された Client Secret によるセッションが期限切れになることがあります。有効期限が切れると、Stripe は自動的に fetchClientSecret
を使用して新しい Client Secret を取得し、セッションを更新します。貴社が追加のパラメーターを渡す必要はありません。
各地域への適応
Connect 埋め込みコンポーネントは、次のロケールに対応しています。
言語 | ロケールコード |
---|---|
ブルガリア語 (ブルガリア) | bg-BG |
中国語 (簡体字) | zh-Hans |
中国語 (繁体字 - 香港) | zh-Hant-HK |
中国語 (繁体字 - 台湾) | zh-Hant-TW |
クロアチア語 (クロアチア) | hr-HR |
チェコ語 (チェコ) | cs-CZ |
デンマーク語 (デンマーク) | da-DK |
オランダ語 (オランダ) | nl-NL |
英語 (オーストラリア) | en-AU |
英語 (インド) | en-IN |
英語 (アイルランド) | en-IE |
英語 (ニュージーランド) | en-NZ |
英語 (シンガポール) | en-SG |
英語 (イギリス) | en-GB |
英語 (アメリカ) | en-US |
エストニア語 (エストニア) | et-EE |
フィリピノ語 (フィリピン) | fil-PH |
フィンランド語 (フィンランド) | fi-FI |
フランス語 (カナダ) | fr-CA |
フランス語 (フランス) | fr-FR |
ドイツ語 (ドイツ) | de-DE |
ギリシャ語 (ギリシャ) | el-GR |
ハンガリー語 (ハンガリー) | hu-HU |
インドネシア語 (インドネシア) | id-ID |
イタリア語 (イタリア) | it-IT |
日本語 (日本) | ja-JP |
韓国語 (韓国) | ko-KR |
ラトビア語 (ラトビア) | lv-LV |
リトアニア語 (リトアニア) | lt-LT |
マレー語 (マレーシア) | ms-MY |
マルタ語 (マルタ) | mt-MT |
ノルウェーブークモール語 (ノルウェー) | nb-NO |
ポーランド語 (ポーランド) | pl-PL |
ポルトガル語 (ブラジル) | pt-BR |
ポルトガル語 (ポルトガル) | pt-PT |
ルーマニア語 (ルーマニア) | ro-RO |
スロバキア語 (スロバキア) | sk-SK |
スロベニア語 (スロベニア) | sl-SI |
スペイン語 (アルゼンチン) | es-AR |
スペイン語 (ブラジル) | es-BR |
スペイン語 (中南米) | es-419 |
スペイン語 (メキシコ) | es-MX |
スペイン語 (スペイン) | es-ES |
スウェーデン語 (スウェーデン) | sv-SE |
タイ語 (タイ) | th-TH |
トルコ語 (トルコ) | tr-TR |
ベトナム語 (ベトナム) | vi-VN |
Connect の埋め込みコンポーネントでのユーザー認証
通常、Connect の埋め込みコンポーネントはユーザー認証を必要としません。特定のシナリオで Connect の埋め込みコンポーネントは、必要な機能 (例: アカウント登録コンポーネントを使用したアカウントの法人情報の入力) にアクセスする前に、連結アカウントが Stripe アカウントでサインインする必要があります。その他のコンポーネントの場合、最初にレンダリングされた後でコンポーネント内での認証が必要になることがあります。
要件が変更された場合に Stripe が更新情報を収集する責任を負う場合、認証は必須です。要件が期限切れになったときや変更されたときに最新情報を収集する責任を負う連結アカウント (Custom アカウントなど) の場合、Stripe の認証はアカウントセッション機能 (disable_stripe_user_authentication) によって制御されます。ベストプラクティスとして、2 段階認証または同等のセキュリティ対策を導入することをお勧めします。Custom など、この機能をサポートするアカウント設定では、連結アカウントがマイナス残高を返済できない場合、お客様がそのアカウントに対する責任を負うことになります。
認証が必要なコンポーネント
連結アカウントには、アプリケーション内で認証済みの WebView が表示されます。WebView 内でワークフローを続行する前に、連結アカウントは認証を終える必要があります。
Stripe のオンライン認証フローには、Connect の設定で設定されているブランド名、色、アイコンが表示され、認証が完了するまで埋め込みコンポーネントマネージャーのカスタムデザインとフォントは適用されません。
Android の制限事項
Android API の制限により、埋め込みコンポーネントは、認証が完了した後でも認証済みの WebView 内でカスタムフォントを使用することはできません。
以下のコンポーネントは、特定のシナリオでは連結アカウントによる認証が必要になります。
読み込みエラーを処理する
コンポーネントが読み込まれない場合は、コンポーネントの onLoadError
リスナーメソッドを実装することでエラーに対処できます。エラーの原因によっては、onLoadError
メソッドが複数回呼び出される場合があります。onLoadError
によってトリガーされるロジックは、べき等でなければなりません。