# Connect の埋め込みコンポーネントの使用を開始する ダッシュボードの機能をウェブサイトに埋め込む方法をご紹介します。 Connect の埋め込みコンポーネントを使用して、連結アカウントのダッシュボード機能をウェブサイトに追加します。これらのライブラリ、およびそのサポート API を使用することで、ダッシュボードやモバイルアプリケーションから Stripe プロダクトに直接アクセスできる許可をユーザーに付与できます。 より実践的なガイドについては、[Connect の埋め込みコンポーネント導入のクイックスタート](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md)をご覧ください。こちらからサンプルの実装をダウンロードすることもできます。Connect の埋め込みコンポーネントのデザインをカスタマイズするには、`StripeConnectInstance` を初期化する際に `appearance` オプションを使用します。[デザインパラメーターの全リスト](https://docs.stripe.com/connect/customize-connect-embedded-components.md)をご覧ください。 ## Connect.js を初期化する [クライアント側] [サーバー側] Stripe は [AccountSession](https://docs.stripe.com/api/account_sessions.md) を使用して、API アクセスを連結アカウントに委任する意図を表します。 AccountSessions API は *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) を返し、連結アカウントに対して API コールを行うときと同じように、埋め込みコンポーネントが連結アカウントのリソースにアクセスできるようにします。 ### AccountSession を作成する (サーバー) 1 ページのアプリケーションでは、クライアントがサーバーへのリクエストを開始して、アカウントセッションを取得します。client secret をブラウザーに返す新しいエンドポイントを、サーバー側で作成できます。 #### Ruby ```ruby require 'sinatra' require 'stripe' # This is a placeholder - it should be replaced with your secret API key. # Sign in to see your own test API key embedded in code samples. # Don’t submit any personally identifiable information in requests made with this key. Stripe.api_key = '<>' post '/account_session' do content_type 'application/json' # Create an AccountSession begin account_session = Stripe::AccountSession.create({ account: {{CONNECTED_ACCOUNT_ID}}, components: { payments: { enabled: true, features: { refund_management: true, dispute_management: true, capture_payments: true } } } }) { client_secret: account_session[:client_secret] }.to_json rescue => error puts "An error occurred when calling the Stripe API to create an account session: #{error.message}"; return [500, { error: error.message }.to_json] end end ``` ### Create Account Session API [ Account Session 作成 API](https://docs.stripe.com/api/account_sessions/create.md) によって、Connect 埋め込みコンポーネントでどのコンポーネントを表示し、どの機能へのアクセスを可能にするかが決定されます。Stripe はアカウントセッションに対応するすべてのコンポーネントにこれらのパラメーターを適用します。お客様のサイトが複数のユーザーの役割をサポートしている場合には、そのアカウントセッションで有効にされたコンポーネントと機能が現在のユーザーの役割に対応していることをご確認ください。 例えば、[返金の管理](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management)はお客様のサイトの管理者に対してのみ有効になり、他のユーザーはアクセスできません。ユーザーの役割へのアクセスを適用するには、サイトのユーザーの役割をアカウントセッションコンポーネントにマッピングする必要があります。 ### Connect.js を設定する (クライアント) 次の例に示すように、npm を使用して Connect.js を設定することをお勧めしますが、[npm を使用せずに](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#without-npm)設定することもできます。 #### HTML + JS [npm パッケージ](https://github.com/stripe/connect-js)をインストールして、Connect.js をモジュールとして使用します。 ```bash npm install --save @stripe/connect-js ``` #### 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 ``` ### Connect.js を読み込んで初期化する (クライアント) 公開可能キーと、サーバー上に作成した新しいエンドポイントを呼び出してクライアントシークレットを取得する機能を指定して、`loadConnectAndInitialize` を呼び出します。返された `StripeConnectInstance` を使用して、埋め込みコンポーネントを作成します。Connect.js を初期化すると、DOM に対してコンポーネントのマウントとマウント解除をいつでも行うことができます。これは React や Vue ポータル内で表示されるすべての要素に適用できます。 #### HTML + JS コンポーネントを作成するには、上記で作成した `StripeConnectInstance` で `create` を呼び出します。これにより、Connect.js が登録して DOM を自動的に Stripe に接続するために使用する[カスタム要素](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)が作成されます。その後、この要素を DOM に `append` できます。 `payments` を指定して `create` を呼び出したら、結果を DOM に追加して、決済 UI を表示します。 #### React React ラッパーで Connect の埋め込みコンポーネントを使用するには、`ConnectComponentsProvider` で自社のアプリをラップし、以前作成した `StripeConnectInstance` に渡します。 自社のページ の `ConnectPayments` を使用して、決済 UI を表示します。 #### HTML + JS ```html

Payments

``` ```javascript import {loadConnectAndInitialize} from '@stripe/connect-js'; const fetchClientSecret = async () => { // Fetch the AccountSession client secret const response = await fetch('/account_session', { method: "POST" }); if (!response.ok) { // Handle errors on the client side here const {error} = await response.json(); console.error('An error occurred: ', error); document.querySelector('#error').removeAttribute('hidden'); return undefined; } else { const {client_secret: clientSecret} = await response.json(); document.querySelector('#error').setAttribute('hidden', ''); return clientSecret; } } const stripeConnectInstance = loadConnectAndInitialize({ // This is a placeholder - it should be replaced with your publishable API key. // Sign in to see your own test API key embedded in code samples. // Don’t submit any personally identifiable information in requests made with this key. publishableKey: "<>", fetchClientSecret: fetchClientSecret, }); const paymentComponent = stripeConnectInstance.create("payments"); const container = document.getElementById("container"); container.appendChild(paymentComponent); ``` [サポートされている埋め込みコンポーネントの一覧を参照 →](https://docs.stripe.com/connect/supported-embedded-components.md) ## Configure Connect.js [クライアント側] クライアントの `loadConnectAndInitialize` メソッドは、Connect.js を設定するさまざまなオプションを受け取ります。 | オプション | 説明 | | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----- | | `publishableKey` | 構築しているシステムの[公開可能キー](https://docs.stripe.com/keys.md)。 | 必須 | | `fetchClientSecret` | `/v1/account_sessions` によって返された *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) を取得する関数。これにより、アクセスを委任するアカウントを `StripeConnectInstance` に指示します。この関数は、有効期限が切れたときにセッションを更新する client secret 関数を取得するためにも使用されます。`fetchClientSecret` は常に新しいアカウントセッションを作成し、新しい `client_secret` を返します。 | 必須 | | `appearance` | Connect 埋め込みコンポーネントのデザインをカスタマイズするオブジェクト。 | オプション | | `locale` | Connect 埋め込みコンポーネントが使用する[ロケール](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization)を指定するパラメーター。ロケールのデフォルトはブラウザーの言語です。指定されたロケールが直接は対応していない場合は、妥当な代替言語を使用します (たとえば、`fr-be` は `fr-fr` に戻る可能性があります)。サポートされているロケールのリストについては、[各地域への適応](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization)を参照してください。 | オプション | | `fonts` | `StripeConnectInstance` から作成された埋め込みコンポーネントで使用できるカスタムフォントの配列。フォントは、[CssFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#css-font-source) または [CustomFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#custom-font-source) オブジェクトとして指定できます。 | オプション | ### Connect 埋め込みコンポーネントのデザインをカスタマイズする [埋め込みコンポーネント Figma UI ツールキット](https://www.figma.com/community/file/1438614134095442934)には、すべてのコンポーネント、一般的なパターン、サンプルアプリケーションが含まれています。これを使用して、ウェブサイトに埋め込まれた UI を可視化してデザインできます。 Stripe は、Connect 埋め込みコンポーネントのデザインをカスタマイズするための[一連のオプション](https://docs.stripe.com/connect/embedded-appearance-options.md)を提供しています。これらをカスタマイズすると、デザインシステムのボタン、アイコン、その他のアクセントに影響します。 > #### 必要なポップアップ > > [ユーザー認証](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components)など、埋め込みコンポーネントの一部の動作はポップアップに表示する必要があります。埋め込みコンポーネントをカスタマイズして、このようなポップアップを表示することはできません。 これらのオプションは、`StripeConnectInstance` の初期化時に、Appearance を `appearance` オブジェクトに渡すことで設定できます。Connect 埋め込みコンポーネントのスタイルを変更するのに使用できるのは、[Connect.js のオプション](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect)のみです。Connect 埋め込みコンポーネントのフォントファミリーと背景色は、親の HTML コンテナから継承されます。他のすべてのオプションを明示的に設定する必要があります。 ```javascript const stripeConnectInstance = loadConnectAndInitialize({ publishableKey: "<>", fetchClientSecret: fetchClientSecret, fonts: [ { cssSrc: "https://myfonts.example.com/mycssfile.css", }, { src: `url(https://my-domain.com/assets/my-font-2.woff)`, family: 'My Font' } ], appearance: { // See all possible variables below overlays: "dialog", variables: { fontFamily: 'My Font', colorPrimary: "#FF0000", }, }, }); ``` [デザイン変数の一覧](https://docs.stripe.com/connect/embedded-appearance-options.md)を参照してください。 ### fonts オブジェクト `stripeConnect.initialize` の `fonts` オブジェクトは、[CssFontSource](https://docs.stripe.com/js/appendix/css_font_source_object) または [CustomFontSource](https://docs.stripe.com/js/appendix/custom_font_source_object) オブジェクトの配列を受け取ります。 ページでカスタムフォント (`.woff` ファイルや `.tff` ファイルなど) を使用する場合は、Connect 埋め込みコンポーネントの初期化時にフォントファイルを指定する必要があります。これにより、Connect 埋め込みコンポーネントでフォントを適切にレンダリングできます。ファイルは次のように指定できます。 #### CssFontSource `StripeConnectInstance` の作成時にカスタムフォントを定義するスタイルシートの URL を渡すには、このオブジェクトを使用します。`CssFontSource` オブジェクトでは、[CSP 設定](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#csp-and-http-header-requirements) で、CssFontSource として指定された CSS ファイルの URL に関連付けられたドメインの取得を許可する必要があります。 | 名前 | タイプ | 値の例 | | -------- | -------------- | --------------------------------------------------- | | `cssSrc` | 文字列 `required` | `https://fonts.googleapis.com/css?family=Open+Sans` | [@font-face](https://developer.mozilla.org/en/docs/Web/CSS/@font-face) 定義を持つ CSS ファイルを指す相対 URL または絶対 URL。ファイルは https でホストされている必要があります。[コンテンツセキュリティポリシー(CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) を使用する場合、ファイルに[追加のディレクティブ](https://docs.stripe.com/security/guide.md#content-security-policy)が必要になることがあります。 | #### CustomFontSource `StripeConnectInstance` の作成時にカスタムフォントを渡すには、このオブジェクトを使用します。 | 名前 | タイプ | 値の例 | | -------------- | -------------- | ----------------------------------------------- | | `family` | 文字列 `required` | `Avenir` | フォントに付ける名前。 | | `src` | 文字列 `required` | `url(https://my-domain.com/assets/avenir.woff)` | Custom フォントファイルを指す有効な [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) 値。これは、通常 (常にではありませんが) `.woff`、`.otf`、または `.svg` のサフィックスを持つファイルへのリンクです。ファイルは HTTPS でホスティングされている必要があります。 | | `display` | 文字列 `optional` | `auto` | 有効な [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) 値。 | | `style` | 文字列 `optional` | `normal` | `normal`、`italic`、`oblique` のいずれか。 | | `unicodeRange` | 文字列 `optional` | `U+0-7F` | 有効な [unicode-range](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range) 値。 | | `weight` | 文字列 `optional` | `400` | 有効な [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)。これは文字列であり、数値ではありません。 | ### 初期化後に Connect 埋め込みコンポーネントを更新する `update` メソッドは、初期化後の Connect 埋め込みコンポーネントの更新に対応しています。これを使用して、実行時に (ページを更新せずに) デザインオプションを切り替えることができます。これを行うには、`initialize` で作成したのと同じ `stripeConnectInstance` オブジェクトを使用し、そのオブジェクトに対して `update` メソッドを呼び出します。 ```javascript stripeConnectInstance.update({ appearance: { variables: { colorPrimary: "#FF0000", }, }, locale: 'en-US', }); ``` > すべてのオプション (`fonts` など) を更新できるわけではありません。このメソッドで対応しているオプションは、`initialize` で提供されているオプションのサブセットです。そうすることによって、`appearance` と `locale` の更新に対応しています。 ### 幅と高さ Connect 埋め込みコンポーネントは、通常の `block` HTML 要素と同様に動作します。デフォルトでは、親 HTML 要素の `width` の 100% に設定し、内部にレンダリングされるコンテンツに応じて高さを大きくします。HTML の親の `width` を指定することで、Connect 埋め込みコンポーネントの `width` を制御できます。`height` はレンダリングされるコンテンツによって変わるため、直接制御することはできませんが、他の HTML `block` 要素と同じように、`maxHeight` と `overflow: scroll` で高さを制限できます。 ## 認証 Stripe は、Connect 埋め込みコンポーネントでアカウントセッションとユーザー認証情報を管理するための一連の API を提供しています。 ### Client Secret を更新する 長時間実行されるセッションでは、最初に提供された *Client Secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) によるセッションが期限切れになることがあります。有効期限が切れると、Stripe は自動的に `fetchClientSecret` を使用して新しい Client Secret を取得し、セッションを更新します。貴社が追加のパラメーターを渡す必要はありません。 ```javascript import { loadConnectAndInitialize } from "@stripe/connect-js"; // Example method to retrieve the client secret from your server const fetchClientSecret = async () => { const response = await fetch('/account_session', { method: "POST" }); const {client_secret: clientSecret} = await response.json(); return clientSecret; } const stripeConnectInstance = loadConnectAndInitialize({ publishableKey: "{{PUBLISHABLE_KEY}}", fetchClientSecret: fetchClientSecret, }); ``` ### ログアウトする ユーザーがアプリからログアウトした後に、`stripeConnectInstance` で `logout` を呼び出して、関連するアカウントセッションオブジェクトを破棄することをお勧めします。そうすることで、その `stripeConnectInstance` に関連付けられているすべての Connect 埋め込みコンポーネントが無効になります。 > #### 必要なポップアップ > > アプリユーザーがログアウトした場合のみ `logout` を呼び出してください。コンポーネントのアンマウント時 (別のページに移動したときやページを閉じたとき) や他のコンポーネントを読み込んでいるときには logout を呼び出さないでください。Logout を呼び出すと、現在のアカウントセッションと [stripe user session](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#user-authentication-in-connect-embedded-components) が完全に無効化されます。`logout` の呼び出し後は、コンポーネントは関連する `stripeConnectInstance` にレンダリングされなくなります。 ```javascript // Call this when your user logs out stripeConnectInstance.logout(); ``` ## CSP と HTTP ヘッダーの要件 ウェブサイトに*コンテンツセキュリティポリシー* (Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks)を実装している場合は、次のルールを追加してポリシーを更新する必要があります。 - `frame-src` `https://connect-js.stripe.com` `https://js.stripe.com` - `img-src` `https://*.stripe.com` - `script-src` `https://connect-js.stripe.com` `https://js.stripe.com` - `style-src` `sha256-0hAheEzaMe6uXIKV4EehS9pu1am1lj/KnnzrOYqckXk=` (空のスタイル要素の SHA) CSS ファイルを使用して Connect の埋め込みコンポーネントで使用する[ウェブフォント](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#fonts-object)を読み込む場合は、その URL がお客様の [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) CSP ディレクティブで許可されている必要があります。 特定の [HTTP レスポンスヘッダー](https://developer.mozilla.org/en-US/docs/Glossary/Response_header)を設定すると、Connect 埋め込みコンポーネントの全機能が有効になります。 - [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy): `unsafe-none`。これ (`unsafe-none`) はヘッダーのデフォルト値であるため、このヘッダーを設定しなくても機能します。`same-origin` など他の値を設定すると、Connect 埋め込みコンポーネントの[ユーザー認証](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components)が機能しなくなります。 ## サポートされているブラウザー Stripe では、[Stripe ダッシュボードが現在対応しているブラウザー](https://docs.stripe.com/dashboard/basics.md)と同じ組み合わせに対応しています。 - Chrome と Firefox の最新の 20 個のメジャーバージョン - Safari と Edge の最新の 2 つのメジャーバージョン - iOS モバイル Safari の最新の 2 つのメジャーバージョン Connect 埋め込みコンポーネントは、モバイルアプリやデスクトップアプリ内の埋め込みウェブビューで使用することはできません。Connect 埋め込みコンポーネントをモバイルアプリ内で使用するには、[iOS](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=ios)、[Android](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=android)、または [React Native](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=react-native) SDK をご利用ください。 組込みコンポーネントがモバイル SDK でまだサポートされていない場合は、組込みコンポーネントを表示可能な Web ブラウザへのリンクを推奨します。 ## 各地域への適応 [Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions) を初期化するときに、`locale` パラメーターを渡すことができます。埋め込みコンポーネントのロケールをウェブサイトのロケールに合わせるには、ウェブサイトでレンダリングする UI のロケールを `locale` パラメーターに渡します。 `locale` パラメーターのデフォルト値は、ブラウザーに設定されているロケールによって決まります。指定されたロケールが直接は対応していない場合は、妥当な代替言語が使用されます (たとえば、`fr-be` は `fr-fr` に戻る可能性があります)。 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` | ## 読み込みエラーを処理する コンポーネントの読み込みに失敗した場合、埋め込みコンポーネントに読み込みエラーハンドラを指定することで、失敗に対応できます。失敗の原因に応じて、読み込みエラーハンドラは複数回呼び出されます。読み込みエラーハンドラによってトリガーされるロジックは、べき等でなければなりません。 #### HTML + JS ```js // Load errors are emitted by all components. We use Balances as an example here. const balances = stripeConnectInstance.create('balances'); balances.setOnLoadError((loadError) => { const componentName = loadError.elementTagName const error = loadError.error console.log(componentName + " failed to load") console.log(`${error.type}: ${error.message}`); }); container.appendChild(balances); ``` #### HTML + JS | 方法 | 説明 | 変数 | | ---------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `setOnLoadError` | 読み込みの失敗が発生すると、コンポーネントがこのコールバック関数を実行します。 | - `loadError.error`: [load error オブジェクト](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)を参照してください - `loadError.elementTagName`:ブラウザーでコンポーネントを表示するために使用される HTML タグの名前 | #### React | React プロパティ | 説明 | 変数 | | ------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `onLoadError` | 読み込みの失敗が発生すると、コンポーネントがこのコールバック関数を実行します。 | - `loadError.error`: [load error オブジェクト](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)を参照してください - `loadError.elementTagName`:ブラウザーでコンポーネントを表示するために使用される HTML タグの名前 | #### load `error` オブジェクト 読み込みエラーが発生するたびに、以下のプロパティを持つ `error` オブジェクトが読み込みエラーハンドラに渡されます。 | 氏名 | タイプ | 値の例 | | --------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------- | | `type` | [読み込み障害の種類](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)を参照してください。 | `authentication_error` | エラーの種類 | | `message` | string | undefined | `Failed to fetch account session` | エラーの詳しい説明 | #### 読み込み障害の種類 コンポーネントのロードが失敗すると、エラーのタイプが検出され、以下のいずれかのタイプにマッピングされます。ロードエラーのタイプを特定できない場合は、`api_error` としてマークされます。 | タイプ | 説明 | | ------------------------------ | ------------------------------------------------------- | | `api_connection_error` | Stripe の API への接続の失敗 | | `authentication_error` | Connect 埋め込み型コンポーネント内で認証フローを実行しない | | `account_session_create_error` | アカウントセッションの作成に失敗しました | | `invalid_request_error` | リクエストが 4xx ステータスコードで失敗しました。これは通常、プラットフォーム設定の問題が原因で発生します | | `rate_limit_error` | 異常なリクエスト率が検出されたため、リクエストが失敗しました | | `render_error` | コンポーネントのレンダリングに失敗しました。通常はブラウザの拡張機能やネットワークの問題が原因です | | `api_error` | Stripe のサーバーの一時的な問題など、その他のタイプの問題を対象とする API エラー | #### 読み込みエラーの UI ほとんどの場合、組み込みコンポーネントは読み込みに失敗したときにエラーメッセージを表示するため、その必要はありません。読み込みエラーハンドラーは、アナリティクスや、読み込みエラーが影響する可能性のあるサイトの他の要素に使用できます。 ただし、組み込みコンポーネントは [onLoaderStart](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-component-display) コールバックを呼び出す前に発生したエラーについては、UI をまったく表示しないため、メッセージは表示されません。この場合、コードでエラー UI が表示される必要があります。 ## 埋め込みコンポーネントの表示を検出する コンポーネントが作成された後は、コンポーネントの javascript がブラウザーに読み込まれて解析されるまで、UI はユーザーに表示されません。そのため、コンポーネントが読み込みの完了後にポップアップ表示されることがあります。これを回避するには、コンポーネントが作成される前に独自の読み込み UI を表示し、コンポーネントが表示された後に UI が非表示になるよう設定します。すべての埋め込みコンポーネントは、UI (読み込みインジケーターを含む) がユーザーに表示されたときに即座に呼び出されるコールバック関数を受け入れることができます。 #### HTML + JS ```html
``` ```js // Loader start events are emitted by all components. We use Balances as an example here. const container = document.getElementById('balances-container'); const balances = stripeConnectInstance.create('balances'); balances.setOnLoaderStart((event) => { container.getElementById("spinner").style.display = "none"; console.log(`${event.elementTagName} is visible to users`) }); container.appendChild(balances); ``` #### HTML + JS | 方法 | 説明 | 変数 | | ------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------- | | `setOnLoaderStart` | コンポーネントは、いずれかの UI (読み込みインジケーターを含む) がユーザーに表示されると、このコールバック関数を実行します。 | - `event.elementTagName`: ブラウザーでコンポーネントを表示するために使用される HTML タグの名前 | #### React | React プロパティ | 説明 | 変数 | | --------------- | ----------------------------------------------------------------- | --------------------------------------------------------------- | | `onLoaderStart` | コンポーネントは、いずれかの UI (読み込みインジケーターを含む) がユーザーに表示されると、このコールバック関数を実行します。 | - `event.elementTagName`: ブラウザーでコンポーネントを表示するために使用される HTML タグの名前 | ## npm を使用せずに Connect.js を使用する Stripe の [javascript](https://github.com/stripe/connect-js) と [React コンポーネントのラッパー](https://github.com/stripe/react-connect-js)を導入することをお勧めします。これにより、Connect の埋め込みコンポーネントを簡単に読み込み、当社がサポートするインターフェイスの TypeScript 定義を得ることができます。貴社のビルドシステムが現在、パッケージへの依存をサポートしていない場合、このパッケージなしで導入することができます。 自社サイトの各ページの `` に、Connect.js スクリプトタグを手動で追加します。 ```html ``` After Connect.js completes loading, it initializes the global window variable `StripeConnect` and calls `StripeConnect.onLoad`, if defined. You can safely initialize Connect.js by setting up an `onload` function and calling `StripeConnect.init` with the same [Connect.js options](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) as `loadConnectAndInitialize`. You can use the Connect instance returned by `init` in the same way you use the instance returned by `loadConnectAndInitialize` to create embedded components in an [HTML + JS integration](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?client=js&platform=web#load-and-initialize-connectjs). ```javascript window.StripeConnect = window.StripeConnect || {}; StripeConnect.onLoad = () => { const stripeConnectInstance = StripeConnect.init({ // This is a placeholder - it should be replaced with your publishable API key. // Sign in to see your own test API key embedded in code samples. // Don't submit any personally identifiable information in requests made with this key. publishableKey: "<>", fetchClientSecret: fetchClientSecret, }); const payments = stripeConnectInstance.create('payments'); document.body.appendChild(payments); }; ``` ## Connect の埋め込みコンポーネントでのユーザー認証 通常、Connect の埋め込みコンポーネントはユーザー認証を必要としません。特定のシナリオで Connect の埋め込みコンポーネントは、必要な機能 (例: [アカウント登録](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)コンポーネントを使用したアカウントの法人情報の入力) にアクセスする前に、連結アカウントが Stripe アカウントでサインインする必要があります。その他のコンポーネントの場合、最初にレンダリングされた後でコンポーネント内での認証が必要になることがあります。 要件が変更された場合に Stripe が更新情報を収集する責任を負う場合、認証は必須です。要件が期限切れになったときや変更されたときに最新情報を収集する責任を負う連結アカウント (Custom アカウントなど) の場合、Stripe の認証はアカウントセッション機能 ([disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication)) によって制御されます。[ベストプラクティス](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs)として、2 段階認証または同等のセキュリティ対策を導入することをお勧めします。Custom など、この機能をサポートするアカウント設定では、連結アカウントが[マイナス残高](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability)を返済できない場合、お客様がそのアカウントに対する責任を負うことになります。 ### 認証が必要なコンポーネント 認証には、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/balances.md) - [入金](https://docs.stripe.com/connect/supported-embedded-components/payouts.md) - [通知バナー](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md) - [金融口座](https://docs.stripe.com/connect/supported-embedded-components/financial-account.md) - [Issuing カードリスト](https://docs.stripe.com/connect/supported-embedded-components/issuing-cards-list.md) ## パフォーマンスのベストプラクティス Connect 埋め込みコンポーネントの読み込み時間をできるだけ短くしたい場合は、次の推奨事項をお試しください。 - **フローの初期の段階で `loadConnectAndInitialize` を呼び出します**。 - **単一の Connect インスタンスの作成**: セッションごとに `loadConnectAndInitialize` を一度だけ呼び出して、単一の Connect インスタンスを作成します。そのインスタンスを再利用して、複数のコンポーネントを作成・管理してください。よくある間違いとして、コンポーネントごとに Connect インスタンスを作成したり、セッションごとに複数の Connect インスタンスを作成したりすることがあります。これにより、追加のリソース消費や API リクエストが発生します。React を使用している場合は、状態管理ライブラリや React コンテキストを使用して、このインスタンスを管理できます。 - **最新バージョンの適切な SDK を使用する**:最新バージョンの [connect-js](https://www.npmjs.com/package/@stripe/connect-js) または [react-connect-js](https://www.npmjs.com/package/@stripe/react-connect-js) npm パッケージ SDK を使用します。これらの SDK は、埋め込みコンポーネントを初期化してパフォーマンスの最大化を図ります。SDK はバージョンを重ねるごとにパフォーマンスが改善されているため、古いバージョンを使用している場合はアップグレードすることをお勧めします。 - **`connect.js` スクリプトをできるだけ早くフローに読み込みます**。HTML の `head` にこのスクリプトを含めることで、スクリプトをすぐに読み込ませることができます。npm パッケージ SDK のデフォルトの動作を応用することもできます。この場合、ページの Javascript が読み込まれたときにスクリプトの読み込みが開始します。 ## StripeConnect を設定する [クライアント側] [サーバー側] Stripe は [AccountSession](https://docs.stripe.com/api/account_sessions.md) を使用して、API アクセスを連結アカウントに委任する意図を表します。 AccountSessions API は *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) を返し、連結アカウントに対して API コールを行うときと同じように、埋め込みコンポーネントが連結アカウントのリソースにアクセスできるようにします。 ### AccountSession を作成する (サーバー) アカウントセッションを取得するために、アプリからサーバーへのリクエストを開始する必要があります。Client Secret をアプリに返すための新しいエンドポイントをサーバーに作成します。 #### Ruby ```ruby require 'sinatra' require 'stripe' # This is a placeholder - it should be replaced with your secret API key. # Sign in to see your own test API key embedded in code samples. # Don’t submit any personally identifiable information in requests made with this key. Stripe.api_key = '<>' post '/account_session' do content_type 'application/json' # Create an AccountSession begin account_session = Stripe::AccountSession.create({ account: {{CONNECTED_ACCOUNT_ID}}, components: { account_onboarding: { enabled: true, features: { # We recommend disabling authentication for a better user experience when possible disable_stripe_user_authentication: true, } } } }) { client_secret: account_session[:client_secret] }.to_json rescue => error puts "An error occurred when calling the Stripe API to create an account session: #{error.message}"; return [500, { error: error.message }.to_json] end end ``` ### Create Account Session API [ Account Session 作成 API](https://docs.stripe.com/api/account_sessions/create.md) によって、Connect 埋め込みコンポーネントでどのコンポーネントを表示し、どの機能へのアクセスを可能にするかが決定されます。Stripe はアカウントセッションに対応するすべてのコンポーネントにこれらのパラメーターを適用します。お客様のアプリが複数のユーザーの役割をサポートしている場合には、そのアカウントセッションで有効にされたコンポーネントと機能が現在のユーザーの役割に対応していることをご確認ください。 例えば、[返金の管理](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management)はお客様のサイトの管理者に対してのみ有効になり、他のユーザーはアクセスできません。ユーザーの役割へのアクセスを適用するには、サイトのユーザーの役割をアカウントセッションコンポーネントにマッピングする必要があります。 ### StripeConnect SDK をインストールする (クライアント) [Stripe iOS SDK](https://github.com/stripe/stripe-ios) はオープンソースです。[詳細なドキュメントが提供されており](https://stripe.dev/stripe-ios/index.html)、iOS 15 以降をサポートするアプリと互換性があります。 #### Swift Package Manager SDK をインストールするには、以下のステップに従います。 1. Xcode で、**File (ファイル)** > **Add Package Dependencies… (パッケージ依存関係を追加)** を選択し、リポジトリー URL として `https://github.com/stripe/stripe-ios-spm` を入力します。 1. [リリースページ](https://github.com/stripe/stripe-ios/releases)から最新のバージョン番号を選択します。 1. **StripeConnect** 製品を[アプリのターゲット](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app)に追加します。 #### CocoaPods 1. まだインストールしていない場合は、[CocoaPods](https://guides.cocoapods.org/using/getting-started.html) の最新バージョンをインストールします。 1. 既存の [Podfile](https://guides.cocoapods.org/syntax/podfile.html) がない場合は、以下のコマンドを実行して作成します。 ```bash pod init ``` 1. この行を `Podfile` に追加します。 ```podfile pod 'StripeConnect' ``` 1. 以下のコマンドを実行します。 ```bash pod install ``` 1. これ以降は、Xcode でプロジェクトを開く際に、`.xcodeproj` ファイルではなく、必ず `.xcworkspace` ファイルを使用するということを忘れないでください。 1. 今後、SDK の最新バージョンに更新するには、以下を実行します。 ```bash pod update StripeConnect ``` #### Carthage 1. まだインストールしていない場合は、[Carthage](https://github.com/Carthage/Carthage#installing-carthage) の最新バージョンをインストールします。 1. この行を `Cartfile` に追加します。 ```cartfile github "stripe/stripe-ios" ``` 1. [Carthage のインストール手順](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos)に従います。必ず、[こちら](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking)にリストされている必要なフレームワークのすべてを埋め込んでください。 1. 今後、SDK の最新バージョンに更新するには、以下のコマンドを実行します。 ```bash carthage update stripe-ios --platform ios ``` #### 手動のフレームワーク 1. Stripe の [GitHub リリースページ](https://github.com/stripe/stripe-ios/releases/latest)に移動して、**Stripe.xcframework.zip** をダウンロードして解凍します。 1. **StripeConnect.xcframework** を、Xcode プロジェクトの **General (一般) ** 設定の **Embedded Binaries (埋め込みバイナリー)** セクションにドラッグします。**Copy items if needed (必要に応じてアイテムをコピーする)** を必ず選択してください。 1. [こちら](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking)にリストされている必要なフレームワークのすべてに対して、ステップ 2 を繰り返します。 1. 今後、Stripe の SDK の最新バージョンに更新するには、ステップ 1 から 3 を繰り返します。 > SDK の最新リリースおよび過去バージョンの詳細については、GitHub の [Releases (リリース)](https://github.com/stripe/stripe-ios/releases) ページをご覧ください。リポジトリの[リリースをウォッチ](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository)して、新しいリリースの公開時に通知を受け取ることも可能です。 ### カメラ認証を設定する (クライアント側) Stripe Connect iOS SDK では、本人確認書類をキャプチャーするためにデバイスのカメラにアクセスする必要があります。アプリからカメラへのアクセスの許可をリクエストできるようにするには、次の操作を行います。 1. Xcode で、プロジェクトの **Info.plist** を開きます。 1. `NSCameraUsageDescription` キーを追加します。 1. アプリにカメラへのアクセスの許可が必要な理由をユーザーに説明する文字列値を追加します。 > このアプリは、カメラを使用して本人確認書類の写真を撮影します。 カメラ認証のリクエストについて、詳細は [Apple のドキュメント](https://developer.apple.com/documentation/avfoundation/cameras_and_media_capture/requesting_authorization_for_media_capture_on_ios)を参照してください。 ### EmbeddedComponentManager を初期化する (クライアント) `StripeAPI.shared` を使用して公開可能キーを設定し、サーバー上に作成した新しいエンドポイントを呼び出してクライアントシークレットを取得するクロージャを持つ[ EmbeddedComponentManager](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager) をインスタンス化します。コンポーネントを作成するには、上記でインスタンス化した `EmbeddedComponentManager` の適切な create メソッドを呼び出します。 [アカウントのユーザー登録](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) は、独自のプレゼンテーションを管理するコントローラを返します。[決済](https://docs.stripe.com/connect/supported-embedded-components/payments.md) のような他のコンポーネントは、より柔軟にアプリで表示できる [UIViewController](https://developer.apple.com/documentation/uikit/uiviewcontroller) を返します。 #### UIKit ```swift import StripeConnect import UIKit class MyViewController: UIViewController { let errorView: UIView func fetchClientSecret() async -> String? { let url = URL(string: "https://{{YOUR_SERVER}}/account_session")! var request = URLRequest(url: url) request.httpMethod = "POST" do { // Fetch the AccountSession client secret let (data, _) = try await URLSession.shared.data(for: request) let json = try JSONSerialization.jsonObject(with: data) as? [String : Any] errorView.isHidden = true return json?["client_secret"] as? String } catch let error { // Handle errors on the client side here print("An error occurred: \(error)") errorView.isHidden = false return nil } } override func viewDidLoad() { super.viewDidLoad() // This is your test publishable API key. STPAPIClient.shared.publishableKey = "{{PUBLISHABLE_KEY}}", let embeddedComponentManager = EmbeddedComponentManager( fetchClientSecret: fetchClientSecret ) // Account onboarding presents modally and fullscreen let controller = embeddedComponentManager.createAccountOnboardingController() controller.title = "Onboard with Stripe" controller.present(from: self) // All other components can be flexibly presented let paymentsViewController = embeddedComponentManager.createPaymentsViewController() present(paymentsViewController) } } ``` ## Configure the Embedded Component Manager [クライアント側] [参考資料 :external: をご覧ください](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/init(apiClient:appearance:fonts:fetchClientSecret:)。 ### Connect 埋め込みコンポーネントのデザインをカスタマイズする [埋め込みコンポーネント Figma UI ツールキット](https://www.figma.com/community/file/1438614134095442934)には、すべてのコンポーネント、一般的なパターン、サンプルアプリケーションが含まれています。これを使用して、ウェブサイトに埋め込まれた UI を可視化してデザインできます。 Stripe は、Connect 埋め込みコンポーネントのデザインをカスタマイズするための[一連のオプション](https://docs.stripe.com/connect/embedded-appearance-options.md)を提供しています。これらをカスタマイズすると、デザインシステムのボタン、アイコン、その他のアクセントに影響します。 > #### 必要なポップアップ > > [ユーザー認証](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components)などの埋め込みコンポーネントの一部の動作は、認証済みの WebView に表示する必要があります。埋め込みコンポーネントをカスタマイズして、これらの WebView を排除することはできません。 これらのオプションは、`EmbeddedComponentManager` を初期化するときに [EmbeddedComponentManager.Appearance](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/appearance) を使用して設定できます。 ```swift func fetchClientSecret() async -> String? { let url = URL(string: "https://{{YOUR_SERVER}}/account_session")! var request = URLRequest(url: url) request.httpMethod = "POST" do { let (data, _) = try await URLSession.shared.data(for: request) let json = try JSONSerialization.jsonObject(with: data) as? [String : Any] return json?["client_secret"] as? String } catch { return nil } } // Specify custom fonts var customFonts: [CustomFontSource] = [] let myFont = UIFont(name: "My Font", size: 16)! let fontUrl = Bundle.main.url(forResource: "my-font-2", withExtension: "woff")! do { let customFontSource = try CustomFontSource(font: myFont, fileUrl: fontUrl) customFonts.append(customFontSource) } catch { print("Error loading custom font: \(error)") } // Customize appearance var appearance = EmbeddedComponentManager.Appearance() appearance.typography.font.base = myFont appearance.typography.fontSizeBase = 16 // Unscaled font size appearance.colors.primary = UIColor { traitCollection in if traitCollection.userInterfaceStyle == .dark { return UIColor(red: 0.455, green: 0.424, blue: 1.000, alpha: 1.0) } else { return UIColor(red: 0.404, green: 0.365, blue: 1.000, alpha: 1.0) } } STPAPIClient.shared.publishableKey = "{{PUBLISHABLE_KEY}}", let embeddedComponentManager = EmbeddedComponentManager( appearance: appearance, fonts: customFonts, fetchClientSecret: fetchClientSecret ) ``` [ダークモード](https://developer.apple.com/design/human-interface-guidelines/dark-mode)や[アクセシビリティコントラスト](https://developer.apple.com/documentation/uikit/uiaccessibilitycontrast)など、[ダイナミックプロバイダー](https://developer.apple.com/documentation/uikit/uicolor/3238041-init)を使用したデザインの色は、[UITraitCollection](https://developer.apple.com/documentation/uikit/uitraitcollection) が更新されたときに Connect 埋め込みコンポーネントに自動的に適用されます。デフォルトのデザインにはダークモードの色は含まれていないため、アプリでダークモードを対応するには、`EmbeddedComponentManager` にダイナミックカラーを使用したデザインを指定する必要があります。 フォントサイズを指定する場合は、デバイスのデフォルトサイズクラスに表示される、拡大縮小されていないフォントサイズを使用します。埋め込みコンポーネントは、[UITraitCollection](https://developer.apple.com/documentation/uikit/uitraitcollection) に基づいてフォントサイズを自動的に拡大縮小します。 iOS のデザインオプションの[全リスト](https://docs.stripe.com/connect/embedded-appearance-options.md)をご覧ください。 ### カスタムフォントを使用する アプリでカスタムフォントを使用する場合 (例えばアプリバイナリに埋め込まれた `.otf` や `.tff` のファイルから)、`EmbeddedComponentManager` を初期化するときに `fonts` 引数に渡される [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) で、そのフォントファイルを指定する必要があります。これにより Connect 埋め込みコンポーネントからこれらのフォントファイルにアクセスできるようになり、フォントを適切にレンダリングできます。 `appearance` で指定されたフォントは、正しくレンダリングするために、初期化時に `EmbeddedComponentManager` に渡される[サポート対象のシステムフォント](https://developer.apple.com/fonts/system-fonts/)または [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) を使用する必要があります。 [参考資料 :external: をご覧ください](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource)。 ### 初期化後に Connect 埋め込みコンポーネントを更新する `update` メソッドを呼び出して、初期化後に埋め込みコンポーネントのデザインを変更します。 ```swift var appearance = EmbeddedComponentManager.Appearance() appearance.colors.primary = UIColor.red manager.update(appearance: appearance) ``` ## 認証 Stripe は、Connect 埋め込みコンポーネントでアカウントセッションとユーザー認証情報を管理するための一連の API を提供しています。 ### Client Secret を更新する 長時間実行されるセッションでは、最初に提供された *Client Secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) によるセッションが期限切れになることがあります。有効期限が切れると、Stripe は自動的に `fetchClientSecret` を使用して新しい Client Secret を取得し、セッションを更新します。貴社が追加のパラメーターを渡す必要はありません。 ```swift func fetchClientSecret() async -> String? { var request = URLRequest(url: URL(string: "https://{{YOUR_SERVER}}/account_session")!) request.httpMethod = "POST" do { let (data, _) = try await URLSession.shared.data(for: request) let json = try JSONSerialization.jsonObject(with: data) as? [String : Any] return json?["client_secret"] as? String } catch let error { return nil } } STPAPIClient.shared.publishableKey = "{{PUBLISHABLE_KEY}}", let embeddedComponentManager = EmbeddedComponentManager( fetchClientSecret: fetchClientSecret ) ``` ## 各地域への適応 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 の埋め込みコンポーネントは、必要な機能 (例: [アカウント登録](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)コンポーネントを使用したアカウントの法人情報の入力) にアクセスする前に、連結アカウントが Stripe アカウントでサインインする必要があります。その他のコンポーネントの場合、最初にレンダリングされた後でコンポーネント内での認証が必要になることがあります。 要件が変更された場合に Stripe が更新情報を収集する責任を負う場合、認証は必須です。要件が期限切れになったときや変更されたときに最新情報を収集する責任を負う連結アカウント (Custom アカウントなど) の場合、Stripe の認証はアカウントセッション機能 ([disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication)) によって制御されます。[ベストプラクティス](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs)として、2 段階認証または同等のセキュリティ対策を導入することをお勧めします。Custom など、この機能をサポートするアカウント設定では、連結アカウントが[マイナス残高](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability)を返済できない場合、お客様がそのアカウントに対する責任を負うことになります。 ### 認証が必要なコンポーネント 連結アカウントには、アプリケーション内で認証済みの [WebView](https://developer.apple.com/documentation/authenticationservices/aswebauthenticationsession) が表示されます。WebView 内でワークフローを続行する前に、連結アカウントは認証を終える必要があります。 Stripe のオンライン認証フローには、[Connect の設定](https://dashboard.stripe.com/account/applications/settings)で設定されているブランド名、色、アイコンが表示され、認証が完了するまで[埋め込みコンポーネントマネージャー](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect)のカスタムデザインとフォントは適用されません。 以下のコンポーネントは、特定のシナリオでは連結アカウントによる認証が必要になります。 - [アカウント登録](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) - [入金](https://docs.stripe.com/connect/supported-embedded-components/payouts.md) ## 読み込みエラーを処理する [クライアント側] コンポーネントの `onLoadError` リスナーメソッドを実装することにより、コンポーネントのロードの失敗に対応します。 さまざまな失敗原因によって `onLoadError` メソッドが複数回呼び出される可能性があります。したがって、`onLoadError` によってトリガーされるロジックはすべてべき等である必要があります。 #### Swift ```swift // All components emit load errors. This example uses AccountOnboarding. // All components support didFailLoadWithError. class MyViewController: UIViewController, AccountOnboardingControllerDelegate { func openAccountOnboarding() { let accountOnboardingController = embeddedComponentManager.createAccountOnboardingController(); accountOnboardingController.delegate = self accountOnboardingController.present(from: self) } // MARK: - AccountOnboardingControllerDelegate func accountOnboarding(_ accountOnboarding: AccountOnboardingController, didFailLoadWithError error: Error) { print("Account onboarding failed to load with error '\(error)'") } } ``` ## StripeConnect を設定する [クライアント側] [サーバー側] Stripe は [AccountSession](https://docs.stripe.com/api/account_sessions.md) を使用して、API アクセスを連結アカウントに委任する意図を表します。 AccountSessions API は *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) を返し、連結アカウントに対して API コールを行うときと同じように、埋め込みコンポーネントが連結アカウントのリソースにアクセスできるようにします。 ### AccountSession を作成する (サーバー) アカウントセッションを取得するために、アプリからサーバーへのリクエストを開始する必要があります。Client Secret をアプリに返すための新しいエンドポイントをサーバーに作成します。 #### Ruby ```ruby require 'sinatra' require 'stripe' # This is a placeholder - it should be replaced with your secret API key. # Sign in to see your own test API key embedded in code samples. # Don’t submit any personally identifiable information in requests made with this key. Stripe.api_key = '<>' post '/account_session' do content_type 'application/json' # Create an AccountSession begin account_session = Stripe::AccountSession.create({ account: {{CONNECTED_ACCOUNT_ID}}, components: { account_onboarding: { enabled: true, features: { # We recommend disabling authentication for a better user experience when possible disable_stripe_user_authentication: true, } } } }) { client_secret: account_session[:client_secret] }.to_json rescue => error puts "An error occurred when calling the Stripe API to create an account session: #{error.message}"; return [500, { error: error.message }.to_json] end end ``` ### Create Account Session API [ Account Session 作成 API](https://docs.stripe.com/api/account_sessions/create.md) によって、Connect 埋め込みコンポーネントでどのコンポーネントを表示し、どの機能へのアクセスを可能にするかが決定されます。Stripe はアカウントセッションに対応するすべてのコンポーネントにこれらのパラメーターを適用します。お客様のアプリが複数のユーザーの役割をサポートしている場合には、そのアカウントセッションで有効にされたコンポーネントと機能が現在のユーザーの役割に対応していることをご確認ください。 例えば、[返金の管理](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management)はお客様のサイトの管理者に対してのみ有効になり、他のユーザーはアクセスできません。ユーザーの役割へのアクセスを適用するには、サイトのユーザーの役割をアカウントセッションコンポーネントにマッピングする必要があります。 ### StripeConnect SDK をインストールする (クライアント) [Stripe Android SDK](https://github.com/stripe/stripe-android) はオープンソースであり、[詳細なドキュメントが提供されています](https://stripe.dev/stripe-android/)。 SDK をインストールするには、[app/build.gradle](https://developer.android.com/studio/build/dependencies) ファイルの `dependencies` ブロックに `connect` を追加します。 #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Connect Android SDK implementation("com.stripe:connect:23.1.0") } ``` > SDK の最新リリースおよび過去バージョンの詳細については、GitHub の [Releases](https://github.com/stripe/stripe-android/releases) ページをご覧ください。新しいリリースの公開時に通知を受け取るには、[リポジトリのリリースを確認](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository)してください。 ### EmbeddedComponentManager を初期化する (クライアント) 公開可能キーと、サーバー上に作成した新しいエンドポイントを呼び出して client secret を取得するラムダを使用して、[EmbeddedComponentManager](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html) をインスタンス化します。設定の変更を処理するには、アクティビティーまたはフラグメントの `ViewModel` に `EmbeddedComponentManager` インスタンスを保持します。 #### Kotlin ```kotlin class MyActivityViewModel : ViewModel() { val embeddedComponentManager: EmbeddedComponentManager = EmbeddedComponentManager( // This is a placeholder - it should be replaced with your publishable API key. // Sign in to see your own test API key embedded in code samples. // Don't submit any personally identifiable information in requests made with this key. publishableKey = "<>", fetchClientSecret = ::fetchClientSecret, ) private suspend fun fetchClientSecret(): String? = try { // Fetch the AccountSession client secret Fuel.post("https://{{YOUR_SERVER_BASE_URL}}/account_session") .awaitString() .let { JSONObject(it).getString("client_secret") } } catch (error: CancellationException) { throw error } catch (error: Exception) { // Handle errors on the client side here println("Error fetching client secret: ${error.message}") null } } ``` コンポーネントを作成するには、まず、Activity の `onCreate` メソッドで `EmbeddedComponentManager.onActivityCreate()` を呼び出します。次に、上記でインスタンス化した `EmbeddedComponentManager` の適切な create メソッドを呼び出します。 [アカウントのユーザー登録](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) は、独自のプレゼンテーションを管理するコントローラを返します。[Payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md) のような他のコンポーネントは、[View](https://developer.android.com/reference/android/view/View) を返します。 #### コントローラのレンダリング #### Kotlin ```kotlin class MyActivity : FragmentActivity() { private val viewModel: MyActivityViewModel by viewModels() private lateinit var accountOnboardingController: AccountOnboardingController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) EmbeddedComponentManager.onActivityCreate(this) setContentView(R.layout.my_activity) accountOnboardingController = viewModel.embeddedComponentManager.createAccountOnboardingController(this) } private fun openAccountOnboarding() { accountOnboardingController.show() } } ``` #### `View` のレンダリング #### Kotlin ```kotlin class MyActivity : FragmentActivity() { private val viewModel: MyActivityViewModel by viewModels() private lateinit var paymentsView: View override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) EmbeddedComponentManager.onActivityCreate(this) setContentView(R.layout.my_activity) paymentsView = viewModel.embeddedComponentManager.createPaymentsView(this) // Add the view to your layout val container = findViewById(R.id.payments_container) container.addView(paymentsView) } } ``` ## Configure the Embedded Component Manager [クライアント側] [参考資料 :external: をご覧ください](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html)。 ### Connect 埋め込みコンポーネントのデザインをカスタマイズする [埋め込みコンポーネント Figma UI ツールキット](https://www.figma.com/community/file/1438614134095442934)には、すべてのコンポーネント、一般的なパターン、サンプルアプリケーションが含まれています。これを使用して、ウェブサイトに埋め込まれた UI を可視化してデザインできます。 Stripe は、Connect 埋め込みコンポーネントのデザインをカスタマイズするための[一連のオプション](https://docs.stripe.com/connect/embedded-appearance-options.md)を提供しています。これらをカスタマイズすると、デザインシステムのボタン、アイコン、その他のアクセントに影響します。 > #### 必要なポップアップ > > [ユーザー認証](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components)などの埋め込みコンポーネントの一部の動作は、認証済みの WebView に表示する必要があります。埋め込みコンポーネントをカスタマイズして、これらの WebView を排除することはできません。 これらのオプションは、`EmbeddedComponentManager` の初期化時に [Appearance (デザイン)](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance/-appearance/index.html) を使用して設定できます。 #### Kotlin ```kotlin // Specify custom fonts val customFonts = listOf( CustomFontSource( // Font file located in `assets/` folder assetsFilePath = "fonts/myCustomFont.ttf", name = "myCustomFont", weight = 1000, ) ) // Customize appearance val appearance = Appearance.Builder() .typography( Typography.Builder() .fontFamily("myCustomFont") // Same name as the custom font above .fontSizeBase(16f) // Unscaled font size .build() ) .colors( Colors.Builder() .primary(Color.RED) .build() ) .build() val embeddedComponentManager = EmbeddedComponentManager( publishableKey = "<>", fetchClientSecret = ::fetchClientSecret, appearance = appearance, customFonts = customFonts, ) ``` フォントサイズを指定する場合は、デバイスのデフォルトサイズクラスに表示される、拡大縮小されていないフォントサイズを使用します。埋め込みコンポーネントは、ユーザー[補助機能のフォント設定](https://support.google.com/accessibility/android/answer/11183305?sjid=3094445894544346025-NA#fontsize)に基づいてフォントサイズを自動的に拡大縮小します。 Android の[デザインオプションの一覧](https://docs.stripe.com/connect/embedded-appearance-options.md?platform=android)をご覧ください。 ### カスタムフォントを使用する アプリでカスタムフォントを使用する場合 (たとえば、アプリのバイナリに埋め込まれた `.otf` ファイルや `.tff` ファイルなど)、`EmbeddedComponentManager` の初期化時に `customFonts` 引数に渡される [CustomFontSource](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) でフォントファイルを指定する必要があります。そうすることで、Connect 埋め込みコンポーネントがフォントファイルにアクセスできるようになり、フォントを適切にレンダリングできます。 `appearance` で指定されたフォントが正しくレンダリングされるようにするには、初期化時に `EmbeddedComponentManager` に渡される [CustomFontSource](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) を使用する必要があります。 [リファレンスドキュメントをご覧ください :external:](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html)。 ### 初期化後に Connect 埋め込みコンポーネントを更新する `update` メソッドを呼び出して、初期化後に埋め込みコンポーネントのデザインを変更します。 #### Kotlin ```kotlin val appearance = Appearance.Builder() .colors( Colors.Builder() .primary(ContextCompat.getColor(context, R.color.primary)) .build() ) .build() embeddedComponentManager.update(appearance = appearance) ``` ## 認証 Stripe は、Connect 埋め込みコンポーネントでアカウントセッションとユーザー認証情報を管理するための一連の API を提供しています。 ### Client Secret を更新する 長時間実行されるセッションでは、最初に提供された *Client Secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) によるセッションが期限切れになることがあります。有効期限が切れると、Stripe は自動的に `fetchClientSecret` を使用して新しい Client Secret を取得し、セッションを更新します。貴社が追加のパラメーターを渡す必要はありません。 #### Kotlin ```kotlin val embeddedComponentManager: EmbeddedComponentManager = EmbeddedComponentManager( publishableKey = "<>", fetchClientSecret = ::fetchClientSecret, ) private suspend fun fetchClientSecret(): String? = try { Fuel.post("https://{{YOUR_SERVER_BASE_URL}}/account_session") .awaitString() .let { JSONObject(it).getString("client_secret") } } catch (error: CancellationException) { throw error } catch (error: Exception) { null } ``` ## 各地域への適応 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 の埋め込みコンポーネントは、必要な機能 (例: [アカウント登録](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)コンポーネントを使用したアカウントの法人情報の入力) にアクセスする前に、連結アカウントが Stripe アカウントでサインインする必要があります。その他のコンポーネントの場合、最初にレンダリングされた後でコンポーネント内での認証が必要になることがあります。 要件が変更された場合に Stripe が更新情報を収集する責任を負う場合、認証は必須です。要件が期限切れになったときや変更されたときに最新情報を収集する責任を負う連結アカウント (Custom アカウントなど) の場合、Stripe の認証はアカウントセッション機能 ([disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication)) によって制御されます。[ベストプラクティス](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs)として、2 段階認証または同等のセキュリティ対策を導入することをお勧めします。Custom など、この機能をサポートするアカウント設定では、連結アカウントが[マイナス残高](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability)を返済できない場合、お客様がそのアカウントに対する責任を負うことになります。 ### 認証が必要なコンポーネント 連結アカウントには、アプリケーション内で認証済みの [WebView](https://developer.chrome.com/docs/android/custom-tabs) が表示されます。WebView 内でワークフローを続行する前に、連結アカウントは認証を終える必要があります。 Stripe のオンライン認証フローには、[Connect の設定](https://dashboard.stripe.com/account/applications/settings)で設定されているブランド名、色、アイコンが表示され、認証が完了するまで[埋め込みコンポーネントマネージャー](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect)のカスタムデザインとフォントは適用されません。 > #### Android の制限事項 > > Android API の制限により、埋め込みコンポーネントは、認証が完了した後でも認証済みの WebView 内でカスタムフォントを使用することはできません。 以下のコンポーネントは、特定のシナリオでは連結アカウントによる認証が必要になります。 - [アカウント登録](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) - [入金](https://docs.stripe.com/connect/supported-embedded-components/payouts.md) ## 読み込みエラーを処理する [クライアント側] コンポーネントの `onLoadError` リスナーメソッドを実装することにより、コンポーネントのロードの失敗に対応します。 さまざまな失敗原因によって `onLoadError` メソッドが複数回呼び出される可能性があります。したがって、`onLoadError` によってトリガーされるロジックはすべてべき等である必要があります。 #### Kotlin ```kotlin // All components emit load errors. This example uses AccountOnboarding. // All components support onLoadError. class MyActivity : FragmentActivity() { private lateinit var accountOnboardingController: AccountOnboardingController override fun onCreate(savedInstanceState: Bundle?) { accountOnboardingController = embeddedComponentManager.createAccountOnboardingController(this) accountOnboardingController.listener = MyAccountOnboardingListener() } private fun openAccountOnboarding() { accountOnboardingController.show() } private inner class MyAccountOnboardingListener : AccountOnboardingListener { override fun onLoadError(error: Throwable) { println("Error loading account onboarding: ${error.message}") } } } ``` ## StripeConnect を設定する [クライアント側] [サーバー側] Stripe は [AccountSession](https://docs.stripe.com/api/account_sessions.md) を使用して、API アクセスを連結アカウントに委任する意図を表します。 AccountSessions API は *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) を返し、連結アカウントに対して API コールを行うときと同じように、埋め込みコンポーネントが連結アカウントのリソースにアクセスできるようにします。 ### AccountSession を作成する (サーバー) アカウントセッションを取得するために、アプリからサーバーへのリクエストを開始する必要があります。Client Secret をアプリに返すための新しいエンドポイントをサーバーに作成します。 #### Ruby ```ruby require 'sinatra' require 'stripe' # This is a placeholder - it should be replaced with your secret API key. # Sign in to see your own test API key embedded in code samples. # Don’t submit any personally identifiable information in requests made with this key. Stripe.api_key = '<>' post '/account_session' do content_type 'application/json' # Create an AccountSession begin account_session = Stripe::AccountSession.create({ account: {{CONNECTED_ACCOUNT_ID}}, components: { account_onboarding: { enabled: true, features: { # We recommend disabling authentication for a better user experience when possible disable_stripe_user_authentication: true, } } } }) { client_secret: account_session[:client_secret] }.to_json rescue => error puts "An error occurred when calling the Stripe API to create an account session: #{error.message}"; return [500, { error: error.message }.to_json] end end ``` ### Create Account Session API [ Account Session 作成 API](https://docs.stripe.com/api/account_sessions/create.md) によって、Connect 埋め込みコンポーネントでどのコンポーネントを表示し、どの機能へのアクセスを可能にするかが決定されます。Stripe はアカウントセッションに対応するすべてのコンポーネントにこれらのパラメーターを適用します。お客様のアプリが複数のユーザーの役割をサポートしている場合には、そのアカウントセッションで有効にされたコンポーネントと機能が現在のユーザーの役割に対応していることをご確認ください。 例えば、[返金の管理](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management)はお客様のサイトの管理者に対してのみ有効になり、他のユーザーはアクセスできません。ユーザーの役割へのアクセスを適用するには、サイトのユーザーの役割をアカウントセッションコンポーネントにマッピングする必要があります。 ### Stripe React Native SDK (Client) をインストールする npm または yarn を使用して Stripe React Native SDKをインストールします。 ```bash npm install @stripe/stripe-react-native react-native-webview # or yarn add @stripe/stripe-react-native react-native-webview ``` ### StripeConnectProvider (Client) を初期化する アプリケーションを `ConnectComponentsProvider` で囲み、公開可能キーを渡します。また、サーバー上に作成した新しいエンドポイントを呼び出して Client Secret を取得する関数も併せて指定してください。 ```javascript import { useState } from 'react'; import { ConnectComponentsProvider } from '@stripe/stripe-react-native'; const fetchClientSecret = async (): Promise => { const response = await fetch('https://{{YOUR_SERVER}}/account_session', { method: 'POST', }); const { client_secret: clientSecret } = await response.json(); return clientSecret; }; export default function App() { const [stripeConnectInstance] = useState(() => { return loadConnectAndInitialize({ // This is a placeholder - it should be replaced with your publishable API key. // Sign in to see your own test API key embedded in code samples. // Don't submit any personally identifiable information in requests made with this key. publishableKey: "<>", fetchClientSecret: fetchClientSecret, }) }); return ( ); } ``` 埋め込みコンポーネントを使用するには、それをインポートして `ConnectComponentsProvider` 内でレンダリングします。 ```javascript import { ConnectAccountOnboarding } from '@stripe/stripe-react-native'; import { useState } from 'react'; import { View } from 'react-native'; import Button from '../components/Button'; export default function AccountOnboardingScreen() { const [visible, setVisible] = useState(false); return (