开发者
嵌入式小组件
客户无需离开您的域名即可完成付款。您通过API创建发票,并在自己的页面上渲染CryBit支付表单。
1. 创建一张发票
使用相同的 POST /api/v1/payments。响应中始终包含confirmation.confirmation_token,其值等于发票uuid。请求中的confirmation字段为可选项。
2. 加载脚本并添加容器
HTML
<script src="https://pay.crybit.net/widget.js"></script>
<div id="payment-form"></div>3. 渲染表单
JavaScript
const checkout = new CryBitCheckout({
confirmation_token: 'INVOICE-UUID',
return_url: 'https://merchant.example/thanks',
lang: 'en',
error_callback: (err) => console.log(err),
})
checkout.render('payment-form').then(() => { /* the form is shown */ })
checkout.on('success', () => { /* status paid: confirm the order by webhook or GET */ })
checkout.on('fail', () => { /* expired, cancelled or refunded */ })
checkout.on('complete', () => checkout.destroy())弹窗
如果页面上没有容器,可通过customization: { modal: true }(或modal: true)以弹窗形式在网站上打开小组件,并在不传参数的情况下调用checkout.render()。
配置选项与事件
| 选项 | 含义 |
|---|---|
confirmation_token | 必填。发票uuid(别名:uuid、invoice_uuid)。 |
return_url | 客户付款后跳转的地址。 |
lang | 界面语言;未指定时使用浏览器语言。 |
modal / customization.modal | 设为true则以弹窗形式显示,而非使用容器。 |
error_callback, success_callback | 在发生错误(无token、无容器)以及状态变为paid时被调用。 |
事件:ready、status、success、fail、complete、close、error。方法:render(id)、on(event, fn)、destroy()。
请通过webhook或查询状态来确认订单。小组件事件仅用于用户界面展示。
FAQ
我可以测试该小组件吗?
可以。在测试商户环境下,小组件会显示一个按钮用于将发票标记为已支付,且余额不会实际入账。