# 小程序支付接入 ## 说明 向商家自有小程序提供小鹅通店铺的支付能力 封装了wx.requestPayment，开发者只需要调用内部提供的toPay方法即可拉起小程序微信支付功能。 **<font color='red'>注意：需要小程序开通微信支付功能</font>** ## 小鹅通小程序SDK支付流程 流程图：  ## 如何使用 ### 1. 下载js文件 商家开发者进入【店铺管理台-应用-经营渠道-SDK服务】，打开支付接入模块中的【小程序支付开发文档】链接，下载js包。 【SDK支付包版本】 [xiaoe-wxmp-pay-1.0.0.js](https://static-resource-cos-1252524126.cdn.xiaoeknow.com/marketing/assets/wx-pay/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上。 **<font color='red'>注意：需要加上小程序SDK标识: app_env_type=mini_program_wechat_sdk</font>** ~~~ // 原生小程序页面 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中对应订单进行获取支付配置，然后拉起微信支付。 | 参数 | 说明 | 类型 | 可选值 | | --- | --- | --- | --- | | 参数1：option.payConfig | H5店铺下单页跳转携带的支付参数(从支付页的onLoad生命周期函数中获取： option.payConfig) | string | — | | 参数2： options | 支付功能配置项 | object | — | ##### getUrl: (option: object) : string=> { return url } 功能：获取环境对应H5链接 返回值： string类型的链接 | 参数 | 说明 | 类型 | 可选值 | | --- | --- | --- | --- | | option | H5店铺下单页跳转携带的支付参数(从支付页的onLoad生命周期函数中获取第一次参数： option) | object | — | ### 参数 ##### 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)}` } } ~~~