前端支付流程

<view class="wrap">
    <view class="card-area">
        <button bind:tap="requestPolymerPayment" type="primary" hover-stop-propagation="true">支付0.01元</button>
    </view>
</view>

Page({
    onLoad(query) {
        // 首次进入页面时，检测支付状态
        // web化支付后跳转回本页面时，也在此检测支付状态
        this.updatePayStatus(query.tpOrderId);
    },
    requestPolymerPayment(e) {
        swan.request({
            // 仅为示例，并非真实的接口地址，开发者从真实接口获取orderInfo的值
            url: 'https://mbd.baidu.com/xxx',
            success: res => {
                let {orderInfo} = res;

                // Web 态中，支付完成后跳转的页面路径（本例中跳转回当前页面：pages/index/index）
                // 携带 tpOrderId 参数，方便跳转后从服务端查询订单信息
                orderInfo.payResultUrl = '/pages/index/index?tpOrderId=' + orderInfo.tpOrderId;

                swan.requestPolymerPayment({
                    orderInfo: orderInfo,
                    bannedChannels: this.getData('bannedChannels'),
                    success: res => {
                        // 更新支付状态显示。
                        // Web 态中不进入 success 回调，而是跳转回本页面，因此在onload中也要检测支付状态
                        this.updatePayStatus(orderInfo.tpOrderId);
                    },
                    fail: err => {
                        swan.showModal({
                            title: err.errCode,
                            content: err.errMsg
                        });
                        console.log('pay fail', err);
                    }
                });
            },
            fail: err => {
                swan.showToast({
                    title: '支付失败',
                    icon: 'none'
                });
            }
        });
    },
    updatePayStatus(tpOrderId) {
        if (!tpOrderId) {
            return;
        }
        // 通过开发者服务端接口，检测支付状态
        swan.request({
            // 仅为示例，并非真实的接口地址
            url: 'https://mbd.baidu.com/xxx/checkPayStatus',
            data: {tpOrderId},
            success: res => {
                // 仅为示例，具体判断规则由开发者服务端接口返回值决定。
                if (res.payStatus === 'success') {
                    swan.showToast({
                        title: '支付成功',
                        icon: 'success'
                    });
                }
            }
        });
    }
});

Page({
    requestPolymerPayment(e) {
        swan.request({
            url: 'https://mbd.baidu.com/xxx', // 仅为示例，并非真实的接口地址，开发者从真实接口获取orderInfo的值
            success: res => {
                res.data.data.dealTitle = '百度小程序Demo支付测试';
                let data = res.data;
                if (data.errno !== 0) {
                    console.log('create order err', data);
                    return;
                }
                swan.requestPolymerPayment({
                    orderInfo: data.data,
                    success: res => {
                        swan.showToast({
                            title: '支付成功',
                            icon: 'success'
                        });
                        console.log('pay success', res);
                    },
                    fail: err => {
                        swan.showToast({
                            title: err.errMsg,
                            icon: 'none'
                        });
                        console.log('pay fail', err);
                    }
                });
            },
            fail: err => {
                swan.showToast({
                    title: '订单创建失败',
                    icon: 'none'
                });
                console.log('create order fail', err);
            }
        });
    }
});