移动端支付组件使用

移动端支付组件使用

1.0 介绍

移动端支付组件默前分为三种：

1. 移动端原生支付：用于APP 调起支付；
2. 电子钱包支付：用于在电子钱包中调起支付；
3. uni-app支付组件：用于提供给第三方小程序调起支付功能。

2.0 通用传参

2.1 组件接收参数

2.2 类型参数说明

bizType和 orderType 必须二选一，都不传，默认为：orderType：1（消费订单）

bizType参数：

• 特殊消费订单：special,可以不传付款账户，电子钱包ID，业务示例：公众号停车缴费。
• 普通消费订单：ordinary，业务示例：普通商品支付订单。

orderType参数：

• 消费订单：1
• 退款订单：2
• 提现订单：3
• 充值订单：4
• 转账订单：5

2.3 orderVO参数说明

bizOrderNo : 支付订单订单ID，重新支付时需要填写

2.4 info 传参示例

let info = {
    suiteCode: "1283242540845371392",
    parkId: this.$flyrise.get(this.$sp.parkId),
    bizType："ordinary",//orderType 和 bizType，二选一
    orderType: "1",//消费订单
    orderVO: {
        // bizOrderNo:"",支付订单，待支付订单，重新支付时需要填写
        bizOrderId:"",//业务订单id
        amount: curMoney, //支付金额（分）
        goodsName: title, //支付标题
        payeeId: this.$flyrise.get(this.$sp.userId) //收款账户:收款方用户id;如果运营企业收款id可以为空
    }
}

//示例
let info = {
        suiteCode: "cn.flyrise.demo",
        parkId: "1442748371519823872",
        bizType: "ordinary", //orderType 和 bizType，二选一
        orderType: "1", //消费订单
        orderVO: {
            bizOrderId: "1171647310333", //业务订单id
            amount: 1, //支付金额（分）
            goodsName: "测试支付", //支付标题
            payeeId: "" //收款账户
        }
}

3.0 小程序调起原生支付

小程序支付使用到uni-app与原生交互

3.1 调起支付组件

uni.sendNativeEvent("open_pay", info, (e) => {
    console.log("sendNativeEvent-----------回调" + JSON.stringify(e));
});

3.2 接收原生回调

//在onShow()钩子中监听，uni小程序JS代码 监听宿主触发给小程序的事件 event == 'open_pay'
uni.onNativeEventReceive(function(event, data){
    console.log("onNativeEventReceive----="+event);
});

3.3 接收参数

//接收的参数：data
{
    "bizOrderNo": "963401039149666304",
    "parkId": "1407606253865275392",
    "payStatus": "1",
    "orderType": "1",
    "walletId": "1499983006750683138",
    "payMethod": "01"
}

4.0 H5调起原生支付

H5支付使用到了原生桥接BridgeJs

4.1 调起支付组件

payeeId://收款账户:收款方用户id;如果运营企业收款id可以为空(如果要调以园区为收款主体的支付, 这个值可以不填)
`js
let info = {
suiteCode: “cn.flyrise.demo”,
parkId: “1442748371519823872”,
bizType: “ordinary”, //orderType 和 bizType，二选一
orderType: “1”, //消费订单
orderVO: {
bizOrderId: “1171647310333”, //业务订单id
amount: 1, //支付金额（分）
goodsName: “测试支付”, //支付标题
payeeId: “” //收款账户:收款方用户id;如果运营企业收款id可以为空
}
}

Bridge.call(“open_pay”, info, (data) => {
if (key == “open_pay”) {
let json = JSON.parse(data);
this.refresh_token = json.token;
}
});

<br/>

#### 4.2 接收原生回调

`uni.$emit`：`uni-app`官方`API`，发送全局通知；

`uni.$on`：`uni-app`官方`API`，监听回调事件。

##### 4.2.1 全局监听

> `Bridge.register`：全局唯一，多次注册，只有第一次注册有效

```js
let isInit = false
let keys = [
    "init_pai_data",
    "open_pay",
    "refresh_token",
    "selected_depart",
    "selected_person",
    "selected_park",
    "selected_card"
]
Bridge.register(keys, (type, data, responseCallback) => {
    if (data) {
        let jsonBridge = JSON.parse(data);
        if (type == "init_pai_data" && !isInit) {
            isInit = true
            flyrise.shellData(jsonBridge)
        } else if (type) {
            uni.$emit(type, data)
        }
    }
    if (responseCallback) responseCallback(data || "");
});

4.2.2 接收界面

uni.$on('open_pay', (data)=> {
    this.res = JSON.stringify(data)
})

4.2.3 完整代码

testing.vue

<template>
    <view class="container">
        <text class="content">{{res}}</text>
        <text class="button" @click="submit()">支付</text>
    </view>
</template>

<script>
    import Bridge from '../../../components/flyrise/utils/bridge.js'

    export default {
        data() {
            return {
                res: ""
            }
        },
        created() {
            this.initListener()
        },
        methods: {
            initListener() {
                console.info("--->test-init")
                uni.$on('open_pay', (data)=> {
                    this.res = JSON.stringify(data)
                })
            },
            submit() {
                let info = {
                    suiteCode: "cn.flyrise.demo",
                    parkId: "1442748371519823872",
                    bizType: "ordinary", //orderType 和 bizType，二选一
                    orderType: "1", //消费订单
                    orderVO: {
                        bizOrderId: "1171647310333", //业务订单id
                        amount: 1, //支付金额（分）
                        goodsName: "测试支付", //支付标题
                        payeeId: "" //收款账户
                    }
                }

                Bridge.call("open_pay", info, (data) => {
                    if (key == "open_pay") {
                        let json = JSON.parse(data);
                        this.refresh_token = json.token;
                    }
                });
            }
        }
    }
</script>

<style>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 120rpx;
        background-color: #ffffff;
    }

    .content {
        word-break:break-all;
        width: 500rpx;
        height: 360rpx;
        margin-top: 32rpx;
        background-color: #fafafa;
        border: 1rpx solid #F1F1F1;
        border-radius: 16rpx;
        font-size: 32rpx;
        padding: 32rpx 24rpx;
        box-shadow: 4rpx 4rpx 2rpx #F1F1F1;
    }

    .button {
        background-color: #38ACFC;
        width: 400rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 32rpx;
        color: #ffffff;
        margin-top: 60rpx;
        border-radius: 16rpx;
    }
</style>