payment-list

更新时间：2024-12-09 11:57:47

基础库1.35.0开始支持,低版本需做兼容处理

开发者工具1.22.0开始支持 (MOCK),真实场景请使用真机调试

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

属性

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

payScene

支付场景值

值	说明
'SINGLE'	普通单次支付场景
'RENEW'	自动续费场景

使用方式

<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('支付渠道组件初始化失败 ！')
    }
})

Bug & Tip

tip: 支付渠道组件是以页面维度为生命周期，不同页面上面的该组件将独立初始化

tip: 支付渠道组件初始化需要一定时间，因此在面对“秒杀”等场景时，操作过快 有可能导致在该组件初始化完毕之前触发“支付”流程，因此建议开发者：在该组件第一次触发 bindchange（此时该组件一定初始化完毕）后再允许执行后续的“支付”流程

tip: 支付渠道组件初始化时，有可能由于网络不稳定等因素导致初始化失败，此时视图层面将不会渲染该组件，并且会通过 binderror 事件通知给开发者，建议开发者：将后续的支付流程降级到「有 UI 支付」

tip: 该组件不适用于IAP(苹果支付) (opens new window)场景

版本兼容处理

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

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

注：可作为预下单 (opens new window)是否携带支付渠道信息的判断依据

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

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