与 CodaComponent SDK 交互

CodaComponent SDK 是一个客户端 JavaScript 库，用于将支付渠道 UI 渲染到您的结账页面中。使用此参考文档可以管理组件的生命周期并处理状态驱动事件。

CodaComponent()

创建一个新的CodaComponent实例。

代码示例

const codaComponent = CodaComponent();

返回

SDK实例：包含该函数的对象components。

.components({ clientSecret })

设置支付元素的环境并授权会话。

参数

• clientSecret（字符串）：必填项。后端创建收费时返回的 JWT。

代码示例

const components = codaComponent.components({
  clientSecret: 'eyJ...'
});

返回

组件工厂：用于生成特定支付 UI 元素的对象：{ create: Function }。

.create(type)

生成特定的支付组件实例，例如卡片输入表单。

参数

• type（字符串）：必填项。要创建的组件类型（目前支持'charge'）。

代码示例

const chargeComponent = components.create('charge');

返回

ChargeComponent用于挂载和管理支付表单的实例。

.mount(selector)

将安全支付表单注入到页面上的特定 DOM 元素中。

参数

• selector（字符串）：必需。用于标识表单应渲染到的容器的 CSS 选择器（例如，'#payment-form'）。

代码示例

chargeComponent.mount('#payment-form');

.on(event, callback)

注册特定组件事件的监听器，以使 UI 与支付状态同步。

可用的事件

userLoaded	() => void	表单加载完成
success	() => void	付款已成功完成
failed	() => void	付款失败

代码示例

chargeComponent.on('success', () => {
  console.log('Payment successful!');
});