> For the complete documentation index, see [llms.txt](https://docs.coda.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.coda.co/https-coda-payments.gitbook.io-zhong-wen-coda-private-technical-documentation/codapay/tuo-guan-zu-jian-ji-cheng/qi-ta-zhi-fu-fang-shi/yu-codacomponent-sdk-jiao-hu.md).

# 与 CodaComponent SDK 交互

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

#### `CodaComponent()` <a href="#codacomponent" id="codacomponent"></a>

*创建一个新的*CodaComponent*实例。*

**代码示例**

```
const codaComponent = CodaComponent();
```

**返回**

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

#### `.components({ clientSecret })` <a href="#components-clientsecret" id="components-clientsecret"></a>

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

**参数**

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

**代码示例**

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

**返回**

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

#### `.create(type)` <a href="#create-type" id="create-type"></a>

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

**参数**

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

**代码示例**

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

**返回**

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

#### `.mount(selector)` <a href="#mount-selector" id="mount-selector"></a>

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

**参数**

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

**代码示例**

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

#### `.on(event, callback)` <a href="#on-event-callback" id="on-event-callback"></a>

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

**可用的事件**

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

**代码示例**

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.coda.co/https-coda-payments.gitbook.io-zhong-wen-coda-private-technical-documentation/codapay/tuo-guan-zu-jian-ji-cheng/qi-ta-zhi-fu-fang-shi/yu-codacomponent-sdk-jiao-hu.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.