payment-list

支付渠道列表组件

属性

属性	类型	默认值	必填	说明
theme-color	string	'#FE3666'	否	选中状态下的按钮背景色
bindchange	(e: { detail: { provider: string, provider_channel_type: string } } & Event) => void		否	点击更新选择的支付渠道触发
binderror	(e: { detail: { errMsg: string } } & Event) => void		否	点击更新选择的支付渠道触发

使用方式

<payment-list bindchange="handlePaymentSelect" binderror="handleError" />

Page({
    data: {
        payment: {
            provider: '',
            provider_channel_type: '',
        },
    },
    handlePaymentSelect(e) {
        const res = e.detail;
        this.setData({
            payment: res,
        })
    },
    handleError(e) {
        console.error('支付渠道组件初始化失败 ！')
    }
})

开发者可以获取到该组件的选择状态，应用到下游的预下单、支付流程中

注意：

• 支付渠道组件是以页面维度为生命周期，不同页面上面的该组件将独立初始化
• 支付渠道组件初始化需要一定时间，因此在面对“秒杀”等场景时，操作过快 有可能导致在该组件初始化完毕之前触发“支付”流程，因此建议开发者：在该组件第一次触发 bindchange（此时该组件一定初始化完毕）后再允许执行后续的“支付”流程
• 支付渠道组件初始化时，有可能由于网络不稳定等因素导致初始化失败，此时视图层面将不会渲染该组件，并且会通过 binderror 事件通知给开发者，建议开发者：将后续的支付流程降级到「有 UI 支付」

版本兼容处理

基础库在 v1.35.0 及其之后的版本增加了「支付渠道列表组件」

可以使用 ks.canIUse 通过判断 ks.pay 是否支持 paymentChannel 参数，来区分 <payment-list> 组件是否可用

注：可作为预下单是否携带支付去掉信息的判断依据

<payment-list ks:if="{{isPaymentListValid}}" />

Page({
    data: {
       isPaymentListValid: false,
    },
    onLoad() {
        this.setData({
            isPaymentListValid: ks.canIUse('pay.object.paymentChannel'),
        })
    },
})