コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
AI に質問する
アカウントを作成
サインイン
始める
支払い
売上
プラットフォームおよびマーケットプレイス
資金管理
開発者向けリソース
概要
Connect の使用を開始
導入の基本
導入の例
アカウント管理
アカウント登録
アカウントのダッシュボードを設定する
    Connect の埋め込みコンポーネントの使用を開始
      クイックスタート
    Connect の埋め込みコンポーネントをカスタマイズ
    対応可能な Connect の埋め込みコンポーネント
    Stripe ダッシュボードのカスタマイズ
    Stripe ダッシュボードアカウントのプラットフォーム制御
    Express ダッシュボード
連結アカウントのタイプの操作
決済処理
決済を受け付ける
アカウントへの送金
プラットフォーム管理
Connect プラットフォームを管理
Connect プラットフォームの納税申告書
ホームプラットフォームおよびマーケットプレイスConfigure account Dashboards

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

Connect の埋め込みコンポーネントの使用を開始する

ダッシュボードの機能をウェブサイトに埋め込む方法をご紹介します。

Connect の埋め込みコンポーネントを使用して、連結アカウントのダッシュボード機能をウェブサイトに追加します。これらのライブラリ、およびそのサポート API を使用することで、ダッシュボードやモバイルアプリケーションから Stripe プロダクトに直接アクセスできる許可をユーザーに付与できます。

StripeConnect を設定する
クライアント側
サーバー側

Stripe は AccountSession を使用して、API アクセスを連結アカウントに委任する意図を表します。

AccountSessions API は client secret を返し、連結アカウントに対して API コールを行うときと同じように、埋め込みコンポーネントが連結アカウントのリソースにアクセスできるようにします。

AccountSession を作成する サーバー

アプリは、アカウントセッションを取得するリクエストをサーバーに対して開始する必要があります。現在、アカウント登録のみがサポートされています。Client Secret をアプリに返す新しいエンドポイントをサーバー上に作成できます。

main.rb
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 =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
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

Create Account Session API は、Connect 埋め込みコンポーネントのコンポーネントと機能へのアクセスを決定します。Stripe は、アカウントセッションに対応するすべてのコンポーネントにこれらのパラメーターを適用します。アプリが複数のユーザーの役割をサポートしている場合は、そのアカウントセッションで有効になっているコンポーネントと機能が現在のユーザーの役割に対応していることを確認してください。たとえば、返金管理はサイトの管理者に対してのみ有効にでき、他のユーザーに対しては有効にできません。ユーザーの役割によるアクセスを確実に適用するには、サイトのユーザーの役割をアカウントセッションコンポーネントにマッピングする必要があります。

StripeConnect SDK をインストールする クライアント

Stripe Android SDK はオープンソースであり、詳細なドキュメントが提供されています。

SDK をインストールするには、app/build.gradle ファイルの dependencies ブロックに connect を追加します。

build.gradle.kts
Kotlin
plugins { id("com.android.application") } android { ... } dependencies { // ... // Connect Android SDK implementation("com.stripe:connect:21.20.0") }

注

SDK の最新リリースおよび過去バージョンの詳細については、GitHub の Releases ページをご覧ください。新しいリリースの公開時に通知を受け取るには、リポジトリのリリースを確認してください。

EmbeddedComponentManager を初期化する クライアント

公開可能キーと、サーバー上に作成した新しいエンドポイントを呼び出して client secret を取得するラムダを使用して、EmbeddedComponentManager をインスタンス化します。設定の変更を処理するには、アクティビティーまたはフラグメントの ViewModel に EmbeddedComponentManager インスタンスを保持します。

MyActivityViewModel.kt
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 =
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, 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 } }

コンポーネントを作成するには、まずアクティビティーの onCreate メソッドで EmbeddedComponentManager.onActivityCreate() を呼び出します。次に、上記でインスタンス化した EmbeddedComponentManager で適切な create メソッドを呼び出します。これにより、アプリでのコンポーネントの表示に使用できるコントローラーが返されます。

MyActivity.kt
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() } }

Configure the Embedded Component Manager
クライアント側

コードリファレンスをご覧ください 。

Connect 埋め込みコンポーネントのデザインをカスタマイズする

埋め込みコンポーネント Figma UI ツールキットには、すべてのコンポーネント、一般的なパターン、サンプルアプリケーションが含まれています。これを使用して、ウェブサイトに埋め込まれた UI を可視化してデザインできます。

Stripe は、Connect 埋め込みコンポーネントのデザインをカスタマイズするための一連のオプションを提供しています。これらをカスタマイズすると、デザインシステムのボタン、アイコン、その他のアクセントに影響します。

必要なポップアップ

ユーザー認証などの埋め込みコンポーネントの一部の動作は、認証済みの WebView に表示する必要があります。埋め込みコンポーネントをカスタマイズして、これらの WebView を排除することはできません。

これらのオプションは、EmbeddedComponentManager の初期化時に Appearance (デザイン) を使用して設定できます。

MyActivityViewModel.kt
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 =
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, fetchClientSecret = ::fetchClientSecret, appearance = appearance, customFonts = customFonts, )

フォントサイズを指定する場合は、デバイスのデフォルトサイズクラスに表示される、拡大縮小されていないフォントサイズを使用します。埋め込みコンポーネントは、ユーザー補助機能のフォント設定に基づいてフォントサイズを自動的に拡大縮小します。

Android のデザインオプションの一覧をご覧ください。

カスタムフォントを使用する

アプリでカスタムフォントを使用する場合 (たとえば、アプリのバイナリに埋め込まれた .otf ファイルや .tff ファイルなど)、EmbeddedComponentManager の初期化時に customFonts 引数に渡される CustomFontSource でフォントファイルを指定する必要があります。そうすることで、Connect 埋め込みコンポーネントがフォントファイルにアクセスできるようになり、フォントを適切にレンダリングできます。

appearance で指定されたフォントが正しくレンダリングされるようにするには、初期化時に EmbeddedComponentManager に渡される CustomFontSource を使用する必要があります。

リファレンスドキュメントをご覧ください 。

初期化後に Connect 埋め込みコンポーネントを更新する

update メソッドを呼び出して、初期化後に埋め込みコンポーネントのデザインを変更します。

MyActivity.kt
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 によるセッションが期限切れになることがあります。有効期限が切れると、Stripe は自動的に fetchClientSecret を使用して新しい Client Secret を取得し、セッションを更新します。貴社が追加のパラメーターを渡す必要はありません。

MyActivityViewModel.kt
Kotlin
val embeddedComponentManager: EmbeddedComponentManager = EmbeddedComponentManager( publishableKey =
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, 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 の埋め込みコンポーネントは、必要な機能 (例: アカウント登録コンポーネントを使用したアカウントの法人情報の入力) にアクセスする前に、連結アカウントが Stripe アカウントでサインインする必要があります。その他のコンポーネントの場合、最初にレンダリングされた後でコンポーネント内での認証が必要になることがあります。

要件が変更された場合に Stripe が更新情報を収集する責任を負う場合、認証は必須です。要件が期限切れになったときや変更されたときに最新情報を収集する責任を負う連結アカウント (Custom アカウントなど) の場合、Stripe の認証はアカウントセッション機能 (disable_stripe_user_authentication) によって制御されます。ベストプラクティスとして、2 段階認証または同等のセキュリティ対策を導入することをお勧めします。Custom など、この機能をサポートするアカウント設定では、連結アカウントがマイナス残高を返済できない場合、お客様がそのアカウントに対する責任を負うことになります。

認証が必要なコンポーネント

連結アカウントには、アプリケーション内で認証済みの WebView が表示されます。WebView 内でワークフローを続行する前に、連結アカウントは認証を終える必要があります。

Stripe のオンライン認証フローには、Connect の設定で設定されているブランド名、色、アイコンが表示され、認証が完了するまで埋め込みコンポーネントマネージャーのカスタムデザインとフォントは適用されません。

Android の制限事項

Android API の制限により、埋め込みコンポーネントは、認証が完了した後でも認証済みの WebView 内でカスタムフォントを使用することはできません。

以下のコンポーネントは、特定のシナリオでは連結アカウントによる認証が必要になります。

  • アカウント登録

読み込みエラーを処理する

コンポーネントが読み込まれない場合は、コンポーネントの onLoadError リスナーメソッドを実装することでエラーに対処できます。エラーの原因によっては、onLoadError メソッドが複数回呼び出される場合があります。onLoadError によってトリガーされるロジックは、べき等でなければなりません。

MyActivity.kt
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}") } } }
このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか?llms.txt を読んでください。
Powered by Markdoc