小程序云开发实现微信支付完整代码

ゝ一世哀愁。 2022-10-31 04:14 266阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]

### 资质 ###

需要是已经开通了微信支付，且已绑定了商户号的小程序。

### 开通 ###

在云控制台 -> 设置 -> 全局设置中开通。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1][]

# 二， 创建支付的云函数 #

1，创建云函数pay  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTMyMzAyYWRlMzA1YjhhMTgucG5n][]

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLThlYTQ3ZmZhMGI0Y2ZmY2EucG5n][]

# 三，引入三方依赖tenpay #

我们这里引入三方依赖的目的，是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node，我这里不做讲解，百度一下，网上一大堆。

1，首先右键pay，然后选择在终端中打开

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTg4ODEwMzA0OTllYmU1Y2UucG5n][]

2，我们使用npm来安装这个依赖。

在命令行里执行 npm i tenpay  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWM2MWNiMWNiNTg4MGM0NzUucG5n][]  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWNkMzRjNjNlMzllNjQyN2YucG5n][]  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTc2ODcxMjMzNzQ4NWJmNjcucG5n][]  
安装完成后，目录如下  
![20210223181508382.png][]  
到这里我们的tenpay依赖就安装好了。

# 四，编写云函数pay #

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWNkMzZmOTA4NGZhZGE0OTIucG5n][]  
代码如下

//云开发实现支付
    const cloud = require('wx-server-sdk')
    cloud.init()
    
    //1，引入支付的三方依赖
    const tenpay = require('tenpay');
    //2，配置支付信息
    const config = {
      appid: 'xxxxxx', 
      mchid: 'xxxx',
      partnerKey: 'xxxxxxx', 
      notify_url: 'http://xxx.xxxxxx.cn', 
      spbill_create_ip: '127.0.0.1' //这里填这个就可以
    };
    
    exports.main = async(event, context) => {
      const wxContext = cloud.getWXContext()
      let {
        orderid,
        money
      } = event;
      //3，初始化支付
      const api = tenpay.init(config);
    
      let result = await api.getPayParams({
        out_trade_no: orderid,
        body: '商品简单描述',
        total_fee: money, //订单金额(分),
        openid: wxContext.OPENID //付款用户的openid
      });
      return result;
    }

### 一定要注意把appid，mchid，partnerKey换成你自己的。 ###

到这里我们获取小程序支付所需参数的云函数代码就编写完成了。  
不要忘记上传这个云函数。  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWJhOTljYTZmZTMzNDAxZWMucG5n][]  
出现下图就代表上传成功  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTYxMzNkNjFiYzMwMGRhYzQucG5n][]

# 五，写一个简单的页面，用来提交订单，调用pay云函数。 #

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWVlOTc0YWVjYWRhNDhmN2MucG5n][]  
这个页面很简单，  
1，自己随便编写一个订单号（这个订单号要大于6位）  
2，自己随便填写一个订单价（单位是分）  
3，点击按钮，调用pay云函数。获取支付所需参数。

下图是官方支付api所需要的一些必须参数。  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTI3MDhiNzQ3NTQwOTE5OWIucG5n][]  
下图是我们调用pay云函数获取的参数，和上图所需要的是不是一样。  
![\[图片上传中...(WechatIMG9.jpeg-82c1c2-1565617669894-0)\]][..._WechatIMG9.jpeg-82c1c2-1565617669894-0]

# 六，调用wx.requestPayment实现支付 #

下图是官方的示例代码  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTAwZTkzMTU1OTBlNGUxNGMucG5n][]  
这里不在做具体讲解了，把完整代码给大家贴出来

// pages/see-businessCard/see-businessCard.js
    
    const app = getApp();
    var that
      
    const db = wx.cloud.database()
    const _ = db.command
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
        list: [],
    
      },
       
      onLoad(){
        that=this
        this.formSubmit()
      },
      
      //提交订单
      formSubmit: function(e) {
        let that = this;
        wx.cloud.callFunction({
          name: "pay",
          data: {
            orderid: "a1212",
            money: "100"
          },
          success(res) {
            console.log("提交成功", res.result)
            that.pay(res.result)
          },
          fail(res) {
            console.log("提交失败", res)
          }
        })
      },
    
      //实现小程序支付
      pay(payData) {
        //官方标准的支付方法
        wx.requestPayment({
          timeStamp: payData.timeStamp,
          nonceStr: payData.nonceStr,
          package: payData.package, //统一下单接口返回的 prepay_id 格式如：prepay_id=***
          signType: 'MD5',
          paySign: payData.paySign, //签名
          success(res) {
            console.log("支付成功", res)
          },
          fail(res) {
            console.log("支付失败", res)
          },
          complete(res) {
            console.log("支付完成", res)
          }
        })
      },
    
    })

到这里，云开发实现小程序支付的功能就完整实现了。

下图是支付完成的状态。  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTkwNmY2NDQwN2JlNjJjNGMucG5n][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: /images/20221024/c7244522a04c4832a65ed476ab739b25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1]: /images/20221024/7762b0adf0fa4944a86deb04abfa55a8.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTMyMzAyYWRlMzA1YjhhMTgucG5n]: /images/20221024/c4f2013a632c43ac9b657d434e0ac493.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLThlYTQ3ZmZhMGI0Y2ZmY2EucG5n]: /images/20221024/9d5ebaf5ab024ea2b02ef69b19a1f8c6.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTg4ODEwMzA0OTllYmU1Y2UucG5n]: /images/20221024/552be485328b41fb805cb5468e88a8ce.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWM2MWNiMWNiNTg4MGM0NzUucG5n]: /images/20221024/84f6e3f8aa954ba2b79298857316a1db.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWNkMzRjNjNlMzllNjQyN2YucG5n]: /images/20221024/0580f560aa974145a6fe236f39298f8a.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTc2ODcxMjMzNzQ4NWJmNjcucG5n]: /images/20221024/9a146fc524bb4f5f9ae4995a48c065f4.png
[20210223181508382.png]: /images/20221024/23fac17f913f457287a3bbb0b44f2d3a.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWNkMzZmOTA4NGZhZGE0OTIucG5n]: /images/20221024/0b61b3f10a3c4b53aef9d5eff820d3ff.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWJhOTljYTZmZTMzNDAxZWMucG5n]: /images/20221024/47f72e16c2894ac2acde96c5869b338c.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTYxMzNkNjFiYzMwMGRhYzQucG5n]: /images/20221024/91804d998632470daa8f5a7a77c2bf19.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWVlOTc0YWVjYWRhNDhmN2MucG5n]: /images/20221024/d83045361329406bb15c488d000e9aeb.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTI3MDhiNzQ3NTQwOTE5OWIucG5n]: /images/20221024/c81b925f09894cdca0e19f10704bca71.png
[..._WechatIMG9.jpeg-82c1c2-1565617669894-0]: /images/20221024/0e51f87247d848fea0e0060afecd1241.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTAwZTkzMTU1OTBlNGUxNGMucG5n]: /images/20221024/ab21f56bb2ee452d965cf8f28d9802fd.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLTkwNmY2NDQwN2JlNjJjNGMucG5n]: /images/20221024/46b40caaeae54f4eacf2ea7dd99d55ec.png