小程序支付接入

说明

向商家自有小程序提供小鹅通店铺的支付能力

封装了wx.requestPayment，开发者只需要调用内部提供的toPay方法即可拉起小程序微信支付功能。

注意：需要小程序开通微信支付功能

小鹅通小程序SDK支付流程

流程图：

如何使用

1. 下载js文件

商家开发者进入【店铺管理台-应用-经营渠道-SDK服务】，打开支付接入模块中的【小程序支付开发文档】链接，下载js包。

【SDK支付包版本】

xiaoe-wxmp-pay-1.0.0.js

2. 小程序开发（uniapp和原生小程序都适用）

将下载后的js文件，存放至项目源代码目录下，

3. 自有小程序配置支付页和支付结果页 配置模板如下：

a. 支付页

进入店铺B端管理台-应用-经营渠道-SDK服务 在店铺B端管理台进行配置小程序原生支付页路径

例如：自有小程序支付页路径：/page/xiaoe_pay/pay_page/index

功能：支付页是承载支付的小程序原生页面，用于拉起微信支付功能

在支付页的onLoad生命周期函数中将option.payConfig当第一参数传入toPay; toPay的第二参数是Object类型，userId: 登录的用户id、appId: 店铺Id

// 原生小程序页面
const { toPay } = require("小程序SDK支付能力JS文件的存放路径");
Page({
    onLoad(option) {
      toPay(option.payConfig,{
          userId: '用户id',
          appId: '商家店铺appId',
      })
    }
});

<!-- uniapp框架 -->
<template>
  <view />
</template>

<script>
import { toPay } from "小程序SDK支付能力JS文件的存放路径";
export default {
  data() {
    return {};
  },
  onLoad(option) {
    toPay(option.payConfig, {
      userId: '用户id',
      appId: '商家店铺appId'
    });
  },
};
</script>

<style></style>

b. 支付结果页

店铺B端管理台进行配置小程序原生支付结果页路径。

例如：自有小程序支付结果页路径：page/xiaoe_pay/pay_back/index

功能：支付结果页是用于支付成功、支付失败之后展示的页面；当开发者调用toPay方法，第二参数option的fail属性未定义时，toPay内部会自行处理支付结果，跳转到支付结果页。

在支付结果页的onLoad生命周期函数中将option.back_url进行decodeURIComponent解码，将解码后的链接赋值到web-view的src上。

注意：需要加上小程序SDK标识: app_env_type=mini_program_wechat_sdk

// 原生小程序页面
const { getUrl } = require("小程序SDK支付能力JS文件的存放路径");
Page({
  data: {
    pageUrl: ''
  },
  onLoad(option) {
    const url = getUrl(option)
    this.setData({
      pageUrl: url
    })
  }
});

<!-- uniapp框架 -->
<template>
  <view>
    <web-view v-if="pageUrl" :src="pageUrl" />
  </view>
</template>

<script>
import { getUrl } from '小程序SDK支付能力JS文件的存放路径'
export default {
  data() {
    return {
      pageUrl: "",
      showView: false,
    };
  },
  onLoad(option) {
    this.pageUrl = getUrl(option)
  },
  methods: {},
};
</script>

<style></style>

方法及参数说明

方法

toPay：(payConfig: string) : void=> {}

功能：小程序拉起支付功能的方法，调用该方法，会对option.payConfig中对应订单进行获取支付配置，然后拉起微信支付。

getUrl: (option: object) : string=> { return url }

功能：获取环境对应H5链接

返回值： string类型的链接

参数

toPay方法的第二参数：options

{
    userId： '小鹅通店铺的用户id', // 必传
    appId: '小鹅通店铺appid',  // 必传
    success: (url) => { // 支付成功回调，可选，默认不传toPay内部会执行wx.redirectTo({url: `/page/xiaoe_pay/pay_back/index?back_url=${encodeURIComponent(paySuccessUrl)}`})
        // 如果定义了success，自行处理跳转        // 参数url：`/page/xiaoe_pay/pay_back/index?back_url=${encodeURIComponent(paySuccessUrl)}`
    },
    fail: () => {  // 支付失败回调，可选，默认不传toPay内部会执行wx.redirectTo({url: `/page/xiaoe_pay/pay_back/index?back_url=${encodeURIComponent(payConfig.src_url)}`})
        // 如果定义了fail，自行处理跳转        // 参数url：`/page/xiaoe_pay/pay_back/index?back_url=${encodeURIComponent(payConfig.src_url)}`
    }
}