小程序支付接入V2

支付组件使用v2

1.0 介绍

中韩接入标准：此文档小程序和H5对接移动的支付功能
文档地址

对接要求：

1. 接入小程序组件库：@flyriselink/pai-mp-ui;
2. 使用uview组件库：uview-ui": "^2.0.14;
3. 引入支付组件库：@flyriselink/pai-mp-pay": "^1.0.32。

2.0 支付库

2.1 引入支付库

// package.json
@flyriselink/pai-mp-pay": "^1.0.32

2.2 初始化

//main.js中初始化
import pay from "@flyriselink/pai-mp-pay"
Vue.use(pay)

//根目录/vue.config.js
module.exports = {
    transpileDependencies: ['luch-request', '@flyriselink/pai-mp-ui', '@flyriselink/pai-mp-pay'],
    css: {
        loaderOptions: {
            scss: {
                prependData: `@import "~@/uni.scss";`
            }
        }
    }
}

2.3 引入界面

注意从支付库中引入webview界面，用于支付跳转和回调显示

//pages/pay/payment
<template>
    <view>
        <pai-pay-payment ref="payPayment"></pai-pay-payment>
    </view>
</template>

<script>
    export default {
        onLoad(e) {
            this.$nextTick(() => {
                this.$refs.payPayment.init(e)
            })
        },
        onShow() {
            this.$nextTick(() => {
                this.$refs.payPayment.show()
            })
        },
        onUnload() {
            this.$refs.payPayment.unload()
        }
    }
</script>

<style>
    page {
        min-height: 100%;
        width: 100%;
        background-color: #F7F7F7;
    }
</style>

//pages.json
"pages": [
        {
            "path": "pages/pay/payment",
            "style": {
                "enablePullDownRefresh": false,
                "navigationStyle": "custom",
                "app-plus": {
                    "titleNView": false
                }
            }
        }
],
"easycom": {
        "autoscan": true,
        "custom": {
            "^pai-pay-(.*)": "@flyriselink/pai-mp-pay/widget/pai-pay-$1/pai-pay-$1.vue"
        }
}

2.4 监听回调

//调用支付界面监听
<script>
    export default {
        onLoad() {
            this.$pay.register((data) => {
                //支付成功、退款回调
            })
        },
        onUnLoad() {
            this.$pay.unregister() //必须注销
        }
    }
</script>

3.0 支付库使用

3.1 付款

<script>
    export default {
    methods: {
      openPay() {
                // "suiteCode": this.$p.tool.getSuiteCode(),
                // "baseUrl": "http://10.62.24.38:8080",
                let info = {
                    "baseUrl": this.baseUrl, //支付地址，非必填
                    "suiteCode": "cn.flyrise.pai.pay.wallet", //套件id，用于统计
                    "parkId": this.$p.tool.get(this.$p.sp.parkId), //园区id
                    "orderType": "1", //业务订单类型
                    "orderVO": {
                        "amount": this.amount, //金额：分
                        "source": "1", //访问终端类型；1：Mobile；2：PC
                        "bizType": "2", //支付业务类型：0：企业账单 1：场馆预定 2：会议室预定 3：空调预定4:  广告位预定 5：工位预定
                        "goodsName": "兔头兽首", //订单标题
                        "goodsDesc": "圆明园西方林园十二生肖兔头兽首一座", //订单描述
                        "bizOrderNo": this.bizOrderNo, //支付订单号
                        "payeeName": "故宫博物院管理公司", ///收款人姓名
                        "payeeId": "pai-pay-company0001", ///收款人Id
                        "payerId": "pai-pay-person0001", //付款账户,当前用户id
                        "bizOrderId": "15097775689359605yw" //业务编号
                    }
                }
                this.$pay.startPayment(info)
            }
   }
} 
</script>

3.2 退款

<script>
    export default {
    methods: {
      refund() {
                let info = {
                    "suiteCode": "cn.flyrise.pai.pay.wallet", //套件id，用于统计
                    "parkId": this.$p.tool.get(this.$p.sp.parkId), //园区id
                    "bizOrderNo": this.bizOrderNo //支付订单号
                }
                this.$pay.startRefund(info)
            }
   }
} 
</script>

4.0 传参说明

4.1 传参

4.3 orderVO结构

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

4.4 接收参数

//接收的参数：data
{
    "bizOrderNo": "963401039149666304",
    "bizOrderId": "1407606253865275392",
    "payStatus": "1"
}