sd-miniprogram-pay

水滴小程序支付包

Usage no npm install needed!

<script type="module">
  import sdMiniprogramPay from 'https://cdn.skypack.dev/sd-miniprogram-pay';
</script>

README

环境依赖

小程序基础库:无特殊要求 目前兼容到1.3.0以上

开发目的

    由于各个业务线都有开发小程序的需求,而小程序也需要有支付场景,目前各个小程序完成支付的逻辑都是自己在写,
然而业务端对支付的整体流程了解不多,所以在直接对接支付后端的时候总会出现多余的沟通成本与试错成本,这个支付模块
开发的目的就是让业务线上的开发同学以最少的认知成本来完成不同方式的支付。

技术方案

    本来是想用小程序的插件来写这个支付功能,但是受到小程序插件天然阻碍,因为小程序插件是无法直接使用小程序wx.requestPayment方法,
如果在小程序插件中想要完成支付,必须要在视图(wxml)中编写功能页标签,这也就增加了业务同学调用支付模块的成本(不光要在app.json中绑定插件,
还需要在视图中编写标签)。所以最后技术定位为使用微信小程序的模块化方案。

流程简介

需要业务同学参考demo,我们在支付下单的时候首先需要访问自己业务端的后端接口,业务后端再访问支付中心后端的预下单接口,这个预下单接口返回了:
  payServiceOrderId 支付ID
  unifiedOrderType 支付方式(普通,支付中签约,纯签约)
  signature 签名
在获取到以上三个参数时就可以调用支付方法了。

如何使用(以上你都可以不关心,但这个一定要看)

import SD_PAY from 'sd-miniprogram-pay' 

Vue.use(SD_PAY, {
  domain: ''  // 这里填写支付中心的domian(必填)
})

// 默认支付
// 如果业务的同学不清楚自己要使用哪种支付,可以直接用默认支付方式
this.$sdPay({
  payServiceOrderId,
  unifiedOrderType,
  signature
}).then(data => {
  // 支付成功
}).catch(err => {
  // 支付失败
})

// 普通支付
this.$sdPay.payPrimary({
  payServiceOrderId,
  unifiedOrderType,
  signature
}).then(data => {
  // 支付成功
}).catch(err => {
  // 支付失败
})

// 支付中签约
this.$sdPay.payEntrust({
  payServiceOrderId,
  unifiedOrderType,
  signature
}).then(data => {
  // 支付成功
}).catch(err => {
  // 支付失败
})

// 纯签约
this.$sdPay.paySign({
  payServiceOrderId,
  unifiedOrderType,
  signature
}).then(data => {
  // 支付成功
}).catch(err => {
  // 支付失败
})

注:调用业务端预下单接口,可以直接使用对象解构来给支付方法传参 例: this.$sdPay({...payInfo})
注:如果使用纯签约,需要业务小伙伴在app.json中添加"navigateToMiniProgramAppIdList": ["wxbd687630cd02ce1d"]属性,
并且在app.js中的onShow(res)生命周期中监听签约结果