调至内容部分
创建账户
或
登录
Stripe 文档徽标
/
询问人工智能
创建账户
登录
开始
付款
销售收入
平台和交易市场
资金管理
开发人员资源
概览
开始使用 Connect
集成基础知识
集成示例
账户管理
账户入驻
配置账户管理平台
    开始使用 Connect 嵌入式组件
      快速开始
    自定义 Connect 嵌入式组件
    支持的 Connect 嵌入式组件
    Stripe 管理平台定制
    Stripe 管理平台账户的平台控制
    Express 管理平台
使用 Connect 子账户类型
付款处理中
接受付款
给账户打款
平台管理
管理您的 Connect 平台
Connect 平台的税表
首页平台和交易市场Configure account Dashboards

开始使用 Connect 嵌入式组件

了解如何在您的网站中嵌入管理平台功能。

使用 Connect 嵌入式组件向您的网站添加关联账户管理平台功能。这些库及其支持的 API 允许您直接在您的管理平台和移动应用中为用户提供对 Stripe 产品的访问权限。

设置 StripeConnect
客户端
服务器端

Stripe 使用 AccountSession 来表达您将 API 访问权限授予 Connect 子账户的意图。

AccountSessions API 返回一个客户端密钥,允许嵌入式组件访问关联账户的资源,就像您在为它们进行 API 调用一样。

创建 AccountSession Server

您的应用必须向您的服务器发起请求才能获取账户会话。目前,仅支持账户注册。您可以在服务器上创建一个新端点,该端点将客户端密钥返回给应用:

main.rb
Ruby
Python
PHP
Java
Node
Go
.NET
No results
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

创建 Account Session API

Create Account Session API 确定 Connect 嵌入式组件的组件和功能访问权限。Stripe 对与账户会话对应的任何组件都强制执行这些参数。如果您的应用支持多个用户角色,请确保为该账户会话启用的组件和功能与当前用户的角色相对应。例如,您可以只为您网站的管理员启用 refund management,而不能为其他用户启用。若要确保强制访问用户角色,必须将网站的用户角色映射到账户会话组件。

安装 StripeConnect SDK Client

Stripe Android SDK 是开源的,且有完整的文档。

安装 SDK 时,将 connect 添加到您的 app/build.gradle 文件的 dependencies 块中:

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

注意

有关最新 SDK 发布及过往版本的详细信息,请查看 GitHub 上的发布页面。要想在新版本发布时接收通知,请查看仓库的发布情况。

初始化 EmbeddedComponentManager Client

使用您的公钥实例化 EmbeddedComponentManager,并通过调用您在服务器上创建的新端点来检索客户端私钥的 lambda。要处理配置更改,请将 EmbeddedComponentManager 实例保留在 Activity 或 Fragment ViewModel 中。

MyActivityViewModel.kt
Kotlin
Java
No results
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 } }

要创建组件,先在 Activity 的 onCreate 方法中调用 EmbeddedComponentManager.onActivityCreate()。然后,在上面实例化的 EmbeddedComponentManager 上调用相应的创建方法。这将返回一个控制器,可用于在应用中呈现组件。

MyActivity.kt
Kotlin
Java
No results
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 工具包包含每个组件、常见模式和一个示例应用程序。您可以使用它来可视化和设计网站中的嵌入式用户界面。

我们提供了一组选项来定制 Connect 嵌入式组件的外观。这些定制会影响我们设计系统中的按钮、图标和其他元素。

必要的弹出窗口

嵌入式组件中的某些行为(例如用户验证)必须在经过验证的 WebView 中呈现。您无法定制嵌入式组件以消除此类 WebView。

初始化 EmbeddedComponentManager 时,可以使用 Appearance 设置这些选项。

MyActivityViewModel.kt
Kotlin
Java
No results
// 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
Java
No results
val appearance = Appearance.Builder() .colors( Colors.Builder() .primary(ContextCompat.getColor(context, R.color.primary)) .build() ) .build() embeddedComponentManager.update(appearance = appearance)

验证

我们提供了一组 API 来管理 Connect 嵌入式组件中的账户会话和用户凭证。

刷新客户端私钥

在长时间运行的会话中,来自最初提供的客户端私钥的会话可能会过期。当它过期时,我们会自动用 fetchClientSecret 检索新的客户端私钥并刷新会话。您不需要传入任何额外参数。

MyActivityViewModel.kt
Kotlin
Java
No results
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
Greek (Greece)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 账户会话功能控制。我们建议将实施双重验证 (2FA) 或等效安全措施作为最佳实践。对于支持此功能的账户配置(如 Custom 账户),如果关联账户无法偿还负余额,则由您承担责任。

需要验证的组件

关联账户将在您的应用中看到经过验证的 WebView。关联账户必须先进行验证,才能在 WebView 中继续其工作流程。

Stripe 托管的验证流程会显示您在 Connect 设置中设置的品牌名称、颜色和图标,且在验证完成前不会使用来自嵌入式组件管理器的定制外观和字体。

Android 限制

由于 Android API 的限制,嵌入式组件无法在已验证的 WebView 中使用定制字体,即使验证完成后也是如此。

以下组件要求关联账户在特定场景下进行验证:

  • 账户入驻

处理加载错误

如果组件不加载,可以通过实施组件的 onLoadError 侦听器方法对失败做出反应。根据失败的原因,可能会多次调用 onLoadError 方法。由 onLoadError 触发的任何逻辑都必须是幂等的。

MyActivity.kt
Kotlin
Java
No results
// 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? Read llms.txt.
  • Powered by Markdoc