uni-app四步搞定支付

猿代码

传统的开发支付需要前后端做很多工作,各种参数的处理,签名,秘钥的验证校验等,尤其是涉及到多种不同的平台支付,更是繁琐;而且以往的支付是由后端主导的,如果后端是个菜鸡,那么做这个支付会相当累人,所以为了避免这种障碍,前端只需要一个人就能搞定支付,uniapp的云开发提供了一种方式,一套代码兼容不同的支付方式,小程序,App,H5等一网打尽,最主要还免费。
下面就介绍下这种无脑开发的支付方式有多简单,但前提是使用的框架要能够创建uniCloud云空间,否则下列的做法可能不适合!

第一步:项目创建云空间;

在Hbuilderx中选择项目,右键创建云开发环境,目前只有腾讯云和阿里云,阿里云是免费的,如果是仅仅做支付,阿里云是足够的;项目中如果已经存在云空间,则不用创建;创建之后,会在cloundfunctions文件夹中含有common目录和database,common是放置公共模块的目录,database是数据库相关的目录,只做支付的话,不涉及到database目录;

第二步:引入uni-pay插件:

可以通过在插件市场引入或者npm的方式下载,现在主要说的是插件市场引入,引入之后,会在common目录下引入uni-pay模块,里面默认有index.js和package.json文件;之后再上传公共模块到服务空间;

第三步:云函数的创建及编写:

云函数的创建,在uniCloud/cloudfunctions中右键创建云函数,会默认生成index.js文件,是该云函数的入口文件;注意:云函数的创建同名,则会覆盖;

如果该云函数依赖某个公共模块的函数,需要安装该公共模块函数的依赖;如果uni-pay是通过uni_modules引入的,这时在云函数目录右键“管理公共模块依赖”,需要哪个公共模块,则选择那个;依赖安装之后,在index.js中引入uni-pay;如果uni-pay是通过非uni_modules安装的,则需要先给该函数通过npm init -y生成package.json文件,再在该云函数中通过终端,执行npm install '需要引入的云函数模块路径';

云函数的编写,以App的微信支付为例:

先要引入uni-pay; 

const unipay = require('unipay');

再初始化unipay实例

const unipayIns = unipay.initWeixin({

  appId: 'your appId',//应用在对应支付平台的appId

  mchId: 'your mchId',//商户号

  key: 'you parterner key',//支付秘钥

  pfx: fs.readFileSync('/path/to/your/pfxfile'), // p12文件路径,使用微信退款时需要,需要注意的是阿里云目前不支持以相对路径读取文件,请使用绝对路径的形式

})

支付的参数,以app 的微信支付为例

exports.main = async function (event,context) { //event是客户端传过来的参数

    let orderInfo = await unipayIns.getOrderInfo({ 

        body: '商品描述',

        outTradeNo: '商户订单号',

        totalFee: 1, // 金额,单位分

        tradeType:'APP'

        notifyUrl: 'https://xxx.xx' // 支付结果通知地址

    })

    return {
        orderInfo
    }
}

第四步:客户端调用云函数

uniCloud.callFunction({

    name: 'getOrderInfo', //这个name是需要调用的云函数名称

    data:{},//支付所需要的参数,用于向云函数传递

    success(res) {

        uni.requestPayment({

      // #ifdef APP-PLUS

      provider: ‘wxpay’// App端此参数必填,可以通过uni.getProvider获取

      // #endif

      // #ifdef MP-WEIXIN

      ...res.result.orderInfo,

      // #endif

      // #ifdef APP-PLUS || MP-ALIPAY

      orderInfo: res.result.orderInfo,

      // #endif

      ...res.result.orderInfo

     success(){

          返回支付结果
    },
    fail(){}
   })
  }
})

至此,支付的流程已经结束,付款结果会返回,如果需要查询订单,则需要调用unipayIns.orderQuery函数去查询了。

Tip1:项目如果需要微信和支付宝两种支付方式甚至还要加上小程序的支付,那么可以将不同类型的支付方式封装到模块中,再在每个云函数中进行初始化操作;方式是在云函数的common下,新建公共模块,命名为config,在该文件的index.js中分别配置不同支付方式对应的参数,再通过需要调用的云函数安装依赖,并引入,方式与引入uni-pay的方式一样;需要注意的是在客户端调用该函数时,需要用参数标识好不同的支付方式,这样在调用的云函数中就能处理不同的参数。

Tip2:totalFee传入金额的单位是分,如果业务给的是元,则需要100转为分,注意一些比较特殊的数字,例如1.1,如果仅仅是100就ok的话,那么1.1这个数字支付会报错的,原因自己打印下就知道,所以最后传递的金额浮点数要注意;

Tip3: 订单号要注意,不能重复。

Tip4: 云开发的支付方式基本上完全丢掉了后端的参与,但如果你的项目并非全完的云开发,业务本身还需要后端参与的话,支付完成的结果还是需要后端修改支付的状态的,所以就要跟后端约定好,支付通知地址接收到平台的通知时,就去修改业务的支付状态,避免出现支付已经完成,但支付的状态还未更改;再假如,你们的后端是个大菜鸡,你怕他的骚操作可能会接收不到平台服务器的支付结果,所以你可以继续调用查询订单的云函数,将支付结果通过接口返给后端,这样他就有了双重保证去修改业务的状态了!

阅读 310
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏