PayKKa Checkout UI Component 使用文档

当前版本： V0.5.12

安装

PayKKa Checkout UI 支持通过 npm 或 CDN 进行引入：

npm

安装 @paykka/card-checkout-ui：

为了正常的展示组件，需要全局引入样式：

CDN

通过 CDN 链接引入：

初始化

在正式使用组件之前，您可以进行一些初始化配置，当然这不是必要的，目前可配置项在下方列出：

国际化

默认情况下，收银台的语言为自身设置的语言，但如果您想固定展示某种语言，可以使用如下方式设置：

目前 PayKKa Checkout UI 支持如下 11 种国际化语言，按照 IETF BCP 47 格式展示：

de-DE：德语（德国）

en-GB：英语（英国）

es-ES：西班牙语（西班牙）

fr-FR：法语（法国）

ja-JP：日语（日本）

ko-KR：韩语（韩国）

pt-PT：葡萄牙语（葡萄牙）

ru-RU：俄语（俄罗斯）

zh-CN：中文（中国）

zh-HK：中文（香港）

zh-TW：中文（台湾）

收银台组件的语言不支持动态改变，请务必在组件创建前进行设置！

Radar

关于 Radar 的配置，请参考 PayKKa Radar SDK 使用文档。

如何使用组件

在使用组件之前，需要先创建组件实例，@paykka/card-checkout-ui 提供 create 方法用于创建组件实例，举个例子，假设我们需要引入组件 A：

如果你是使用 CDN 的方式引入脚本，脚本会在全局定义一个 PaykkaCardCheckoutUi 对象，里面暴露出了对应组件和方法，你可以直接这样获取：

调用 create 方法，传入组件所需参数 props 即可创建组件实例：

mount 方法支持传入 HTMLElement 对象或者 CSS 选择器字符串，并将组件实例渲染，挂载到真实dom中：

组件实例会提供 mount 方法用来将组件渲染到 dom 上：

到此，组件就成功渲染到页面上了。

Card

示例

Card 组件使用示例如下：

可以下载如下附件并解压，运行 npm i & npm run dev 即可查看效果：

Card-Demo-Vue.zip

API

CardProps

必填参数用 * 标识

名称	说明	类型	默认值
*sessionId	收银台 ID，用来创建收银台	`string`
clientKey	客户端密钥	`string`	`undefined`
i18n	国际化配置	`I18n`	`undefined`
showCardBrands	是否展示支持的发卡行 icon	`boolean`	`true`
onSubmit	表单提交回调，点击支付按钮后触发 `formValidateError` 为表单校验不通过的错误信息	`(formValidateError?: Record<string, FormValidateError[]>) => void`	`undefined`
onSuccess	点击支付按钮支付成功后的回调 `returnUrl` 为支付成功后需要跳转的 url	`(returnUrl: string) => void`	`undefined`
onError	支付失败后的回调	`(error: any) => void`	`undefined`
onTimeout	支付超时后的回调	`() => void`	`undefined`
onAuthorized	交易受到风控滞留后的回调	`() => void`	`undefined`
onExpired	会话过期或失效后的回调，或者支付成功后再次调起组件也会触发	`() => void`	`undefined`
onThreeDS	3DS 验证中的回调 `url` 为 3DS 验证链接 `incomplete` 为 `false` 表示为本次 3DS 验证中，为 `true` 表示上一次 3DS 验证中	`(url: string, incomplete: boolean) => void`	`undefined`

3DS

目前 Card 组件处理 3DS 时只会向外部发出回调，商户拿到 3DS 验证链接后需自行处理（如在页面弹窗中展示验证页面），验证完成后调用 checkThreeDS 方法进行支付结果查询：

Sandbox 环境使用

组件库默认配置的链接是生产环境的，如果想在 Sandbox 环境下使用，需要在初始化收银台组件之前进行如下配置，确保可以正常运行：

如果是 CDN 方式引入，需要引入 Sandbox 环境的链接：

需要调用 setApiUrl 和 setCDNUrl 方法配置组件请求的链接：

PayKKa Checkout UI Component 使用文档

安装#

npm#

CDN#

初始化#

国际化#

Radar#

如何使用组件#

Card#

示例#

API#

3DS#

Sandbox 环境使用#

安装

npm

CDN

初始化

国际化

Radar

如何使用组件

Card

示例

API

3DS

Sandbox 环境使用