微信小程序之微信支付功能

最新推荐文章于 2024-04-23 10:30:35 发布
最新推荐文章于 2024-04-23 10:30:35 发布
阅读量415 收藏 2
点赞数 1
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyj0209/article/details/81390728
版权

本文需要的外部js下载地址 

这几天做微信支付功能，可谓是一步一个坑，在这里总结一下，供以后查看（详细代码在最后）

大致的步骤：

  1. 通过微信的登录接口获取到code
  2. 用code去请求微信接口换取openid
  3. 用openid生成统一订单得到prepay_id
  4. 调用微信接口完成支付

详细步骤：

  实现的前提：你要有正确的appid，serect，mch_id(商户号) ，out_trade_no(订单号)

  appid 和 serect 在小程序的公众平台里（开发 -> 开发设置）可以找到。然后创建项目，项目的appid一定要和前面提到的appid    保持一致。

  • 获取code

   调用微信的登陆接口

wx.login({
    success: function(res){
        // 接口调用成功后。返回值中包含有code
    }
})

  •   code换取openid

   调用微信的接口

 这个接口请求参数有三个：appid , secret , js_code , grant_type

wx.request({
     // 这里的url参数需要拼接,appid和secret  填写对应的数据  js_code:就是刚才登陆接口返回的code，  grant_type=authorization_code  这个参数是固定的 不用改变  
     url: "https://api.weixin.qq.com/sns/jscode2session?appid=aaaaaaaaaaaaa&secret=sssssssssssss&js_code=" + code + "&grant_type=authorization_code",
     method: 'GET',
     success: function (res) {
         // 请求成功 这里会返回openid
     },
     fail: function () {
     }
})

这里碰到的问题：报错说code失效

后来发现是因为建小程序项目时用的appid和上面接口请求参数中的appid不一样，所以这就是为什么前面说一定要提前把appid这些东西弄好，把项目建立在正确的appid下面

  • 生成统一订单

 这里就是最麻烦的地方了，需要处理很多数据，下面是即将发出去的下一个请求，为了它我们需要提前准备好它需要的口粮（参数）

var formData = "<xml>"
    formData += "<appid>" + obj.appid + "</appid>"                //appid 
    formData += "<body>" + obj.body + "</body>"                   //标题
    formData += "<mch_id>" + obj.mch_id + "</mch_id>"             //商户号 
    formData += "<nonce_str>" + obj.nonce_str + "</nonce_str>"    //随机字符串，不长于32位。 
    formData += "<notify_url>" + obj.notify_url + "</notify_url>" //异步接收微信支付结果通知的回调地址
    formData += "<openid>" + msg.openid + "</openid>"             //openid
    formData += "<out_trade_no>" + obj.out_trade_no + "</out_trade_no>" //商户订单号
    formData += "<spbill_create_ip>" + obj.spbill_create_ip + "</spbill_create_ip>"   //用户Id
    formData += "<total_fee>" + obj.total_fee + "</total_fee>" //金额
    formData += "<trade_type>" + obj.trade_type + "</trade_type>"  //公共号支付
    formData += "<sign>" + obj.sign + "</sign>"//签名
    formData += "</xml>"
wx.request({
    // 这就是即将请求的地址，它需要的参数formData是xml类型的，长的就是上面那个变量的样子
    url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
    method: 'POST',
    data: formData,
    success: function (res) {

    }
})

首先要知道它需要什么样的参数：

参考H5支付功能参数：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=9_20&index=1

注意：这里面对参数进行签名的函数如下，传入的对象是：将需要加密的参数以对象形式传进去，就可以得到加密后的结果

          函数中涉及到key  根据自己的情况填写  

/* 签名 */
makeSign: function (obj){
    var arr = [];
    for(var i in obj){
        arr.push(i + "=" + obj[i]);
    }
    // 字典排序
    arr = arr.sort();
    // 将参数拼接成url
    var str = arr.join('&');
    // 签名第二步：在str后面加上key
    str += "&key=1111111111111";
    // 签名第三步：MD5加密
    str = md5.hexMD5(str);
    // 签名第四步：所有字符转大写
    str = str.toUpperCase();
    return str;
},

用户ip获取函数：(提示：这里的请求地址只适合用在练手阶段，实际开发中请换成后台获取ip的对应接口，否则小程序上线会报错）

/* 用户端ip */
    getIP: function(){
        var that = this;
        wx.request({
            url: 'http://ip-api.com/json',
            success: function (e) {
                that.setData({
                    ip: e.data.query
                })
            }
        })
    }

还有一个坑：当你这一步过去以后，请求成功了！发现返回一堆xml形式的东西，这下该处理xml了，这里就是我自己找的可以用在微信小程序中的xml解析js ：dom-parser.js  dom.js (单独下载地址)

const parser = require('../../lib/dom-parser');
const Dom = require('../../lib/dom.js');

...

wx.request({
    url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
    method: 'POST',
    data: formData,
    success: function (res) {
         // xml转json
          var XMLParser = new parser.DOMParser()
          var doc = XMLParser.parseFromString(res.data);

          // 找到prepay_id
          var prepay_id_node = doc.getElementsByTagName('prepay_id')[0];
          var prepay_id;
          if (prepay_id_node){
             prepay_id = prepay_id_node.firstChild.nodeValue;
          }else{
             wx.showToast({
                title: '支付失败',
                icon: 'none',
                duration: 1800
             })
             console.log(res)
             return;
          }
     },
     fail: function () {
     }
})

 

  • 支付

最后一步了，现在有了prepay_id,就可以去挑起支付接口了，支付前先对参数进行罗列与处理

这里还有个坑：明明官方文档中参数没有说传appid  可是我当时不传appid时，发现支付一直不能成功，后来碰到一篇帖子说他加了appid就好了，我想要不试一下，加上后，果然支付成功了！内心是多么绝望，这坑谁能想到，哎！！

// timeStamp  nonceStr  package  signType  paySign
var payData = {
    appId: 'aaaaaaaaaaaaa',
    timeStamp: Date.now() + '',
    nonceStr: that.rdmNum(),
    package: "prepay_id="+prepay_id,
    signType: 'MD5'
}
var paySign = that.makeSign(payData);        // 加密参数,方法跟上面统一订单中的一样
payData.paySign = paySign;
payData.out_trade_no = msg.out_trade_no;      //订单号，用来关闭订单用
that.pay(payData);                            // 调用支付函数

支付函数

/* 支付 */
    pay: function (param) {
        var that = this;
        wx.requestPayment({
            appId: param.appId,
            timeStamp: param.timeStamp,
            nonceStr: param.nonceStr,
            package: param.package,
            signType: param.signType,
            paySign: param.paySign,
            success: function (res) {
                wx.showToast({
                    title: '支付成功',
                    icon: 'none',
                    duration: 1800
                })
            },
            fail: function (res) {
                wx.showToast({
                    title: '支付失败',
                    icon: 'none',
                    duration: 1800
                })
                // 支付失败，关闭订单
                that.closeOrder({
                    appid: 'aaaaaaaaaaaaa',
                    mch_id: '999999999',
                    out_trade_no: param.out_trade_no,
                    nonce_str: that.rdmNum()
                })
            },
            complete: function () {

            }
        })
    },

关闭订单函数

/* 关闭订单 order:关闭订单的对象 */
    closeOrder: function(order){
        // appid mch_id out_trade_no  nonce_str  sign 
        // 对传进来的order对象进行md5加密
        var sign = this.makeSign(order);

        var formData = "<xml>"
        formData += "<appid>" + order.appid + "</appid>" //appid 
        formData += "<mch_id>" + order.mch_id + "</mch_id>" //商户号 
        formData += "<nonce_str>" + order.nonce_str + "</nonce_str>" //随机字符串，不长于32位。 
        formData += "<out_trade_no>" + order.out_trade_no + "</out_trade_no>" //商户订单号
        formData += "<sign>" + sign + "</sign>"//签名
        formData += "</xml>"

        wx.request({
            url: 'https://api.mch.weixin.qq.com/pay/closeorder ',
            method: 'POST',
            data: formData,
            success: function(res){
                console.log(res)
            }
        })
        
    },

  • 最后粘贴上所有代码：

// 假数据，请根据自己的情况替换
// appid:aaaaaaaaaaaaa
// secret: sssssssssssss
// mch_id: 999999999     商户号
// out_trade_no: this.data.msg.recordId    订单号(后台接口得到)
// 通知地址notify_url：http://xxxxxxx
// key:1111111111111

const md5 = require('../../utils/md5.js');
const parser = require('../../lib/dom-parser');
const Dom = require('../../lib/dom.js');

Page({
    data: {
        msg: {},                            // 这里是订单的一些信息
        ip: ''                             // 用户ip
    },
    onLoad: function (options) {
        this.setData({
            msg: app.globalData.payData
        })
        this.getIP();            // 获取用户的ip，存放在data的ip中农，供后面使用          
    },
    // 点击支付按钮触发
    payBtn: function(){
        var that = this;
        wx.login({
            success: function (res) { 
                // 通过登录接口返回的code去换取openid           
                wx.request({
                    url: "https://api.weixin.qq.com/sns/jscode2session?appid=aaaaaaaaaaaaa&secret=sssssssssssss&js_code=" + res.code + "&grant_type=authorization_code",
                    method: 'GET',
                    success: function (res) {
                        // 生成统一订单
                        that.order({
                            mch_id: '999999999',
                            out_trade_no: that.data.msg.recordId,
                            total_fee: that.data.msg.payCharge,
                            openid: res.data.openid
                        });
                        console.log(res.data.openid)
                    },
                    fail: function () {
                        wx.showToast({
                            title: '支付失败',
                            icon: 'none',
                            duration: 1800
                        })
                    }
                })             
            }
        });
        
    },
    /* 生成统一订单 
    * mch_id:商户号
    * out_trade_no:商户订单号
    * total_fee：总金额
    * openid： openid
    */
    order: function (msg){
        var that = this;
        // 针对商户订单号重复的问题，在实际订单号后面加上_随机数来实现
        // mch_id, out_trade_no, total_fee, openid
        // var out_trade_no = msg.out_trade_no + '_' + that.rdmNum(6); 
        console.log(msg)  
        var obj = {
            appid: 'aaaaaaaaaaaaa',                   //appid
            mch_id: msg.mch_id,                       //商户号
            nonce_str: this.rdmNum(),                 //随机字符串
            body: 'payTest',                          //商品描述
            out_trade_no: msg.out_trade_no,               //商户订单号
            total_fee: msg.total_fee,                 //总金额
            openid: msg.openid,                       //openid
            spbill_create_ip: this.data.ip,           //终端ip
            notify_url: 'http://xxxxxxx',    //通知地址
            trade_type: 'JSAPI'                                           // 交易类型:公众号支付
        }
        // 签名
        var sign = this.makeSign(obj);
        obj.sign = sign;

        var formData = "<xml>"
        formData += "<appid>" + obj.appid + "</appid>"                //appid 
        formData += "<body>" + obj.body + "</body>"                   //标题
        formData += "<mch_id>" + obj.mch_id + "</mch_id>"             //商户号 
        formData += "<nonce_str>" + obj.nonce_str + "</nonce_str>"    //随机字符串，不长于32位。 
        formData += "<notify_url>" + obj.notify_url + "</notify_url>" //异步接收微信支付结果通知的回调地址
        formData += "<openid>" + msg.openid + "</openid>"             //openid
        formData += "<out_trade_no>" + obj.out_trade_no + "</out_trade_no>" //商户订单号
        formData += "<spbill_create_ip>" + obj.spbill_create_ip + "</spbill_create_ip>"   //用户Id
        formData += "<total_fee>" + obj.total_fee + "</total_fee>" //金额
        formData += "<trade_type>" + obj.trade_type + "</trade_type>"  //公共号支付
        formData += "<sign>" + obj.sign + "</sign>"//签名
        formData += "</xml>"

        wx.request({
            url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
            method: 'POST',
            data: formData,
            success: function (res) {
                // xml转json
                var XMLParser = new parser.DOMParser()
                var doc = XMLParser.parseFromString(res.data);

                // 找到prepay_id
                var prepay_id_node = doc.getElementsByTagName('prepay_id')[0];
                var prepay_id;
                if (prepay_id_node){
                    prepay_id = prepay_id_node.firstChild.nodeValue;
                }else{
                    wx.showToast({
                        title: '支付失败',
                        icon: 'none',
                        duration: 1800
                    })
                    return;
                }

                // timeStamp  nonceStr  package  signType  paySign
                var payData = {
                    appId: 'aaaaaaaaaaaaa',
                    timeStamp: Date.now() + '',
                    nonceStr: that.rdmNum(),
                    package: "prepay_id=" + prepay_id,
                    signType: 'MD5'
                }
                var paySign = that.makeSign(payData);
                payData.paySign = paySign;
                payData.out_trade_no = msg.out_trade_no;      //订单号，用来关闭订单用
                that.pay(payData);
            }
        })
    },
    /* 支付 */
    pay: function (param) {
        var that = this;
        wx.requestPayment({
            appId: param.appId,
            timeStamp: param.timeStamp,
            nonceStr: param.nonceStr,
            package: param.package,
            signType: param.signType,
            paySign: param.paySign,
            success: function (res) {
                wx.showToast({
                    title: '支付成功',
                    icon: 'none',
                    duration: 1800
                })
            },
            fail: function (res) {
                wx.showToast({
                    title: '支付失败',
                    icon: 'none',
                    duration: 1800
                })
                // 支付失败，关闭订单
                that.closeOrder({
                    appid: 'aaaaaaaaaaaaa',
                    mch_id: '999999999',
                    out_trade_no: param.out_trade_no,
                    nonce_str: that.rdmNum()
                })
            },
            complete: function () {

            }
        })
    },
    /* 关闭订单 order:关闭订单的对象 */
    closeOrder: function(order){
        // appid mch_id out_trade_no  nonce_str  sign 
        // 对传进来的order对象进行md5加密
        var sign = this.makeSign(order);

        var formData = "<xml>"
        formData += "<appid>" + order.appid + "</appid>" //appid 
        formData += "<mch_id>" + order.mch_id + "</mch_id>" //商户号 
        formData += "<nonce_str>" + order.nonce_str + "</nonce_str>" //随机字符串，不长于32位。 
        formData += "<out_trade_no>" + order.out_trade_no + "</out_trade_no>" //商户订单号
        formData += "<sign>" + sign + "</sign>"//签名
        formData += "</xml>"

        wx.request({
            url: 'https://api.mch.weixin.qq.com/pay/closeorder ',
            method: 'POST',
            data: formData,
            success: function(res){
                console.log(res)
            }
        })
        
    },
    /* 生成随机字符串 */
    rdmNum: function (len) {
        len = len || 32;
        var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        var maxPos = chars.length;
        var num = '';
        for (var i = 0; i < len; i++) {
            num += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return num;
    },
    /* 签名 */
    makeSign: function (obj){
        var arr = [];
        for(var i in obj){
            arr.push(i + "=" + obj[i]);
        }
        // 字典排序
        arr = arr.sort();
        // 将参数拼接成url
        var str = arr.join('&');
        // 签名第二步：在str后面加上key
        str += "&key=1111111111111";
        // 签名第三步：MD5加密
        str = md5.hexMD5(str);
        // 签名第四步：所有字符转大写
        str = str.toUpperCase();
        return str;
    },
    /* 用户端ip */
    getIP: function(){
        var that = this;
        wx.request({
            url: 'http://ip-api.com/json',
            success: function (e) {
                that.setData({
                    ip: e.data.query
                })
            }
        })
    }
})

 

 

z沧笙踏歌
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 - 支付功能
m0_50125215的博客
09-11 904
支付功能逻辑 1. 获取用户地址，通过 uni.chooseAddress 2. 获取支付需要的token 2.1 没有token的情况下，需要去到授权页面进行授权 3. 创建订单，获取订单的编号 4. 获取支付需要的参数 5. 调用支付接口 6. 查询支付状态 7. 支付成功后，删除本地已支付的购物小车中商品的数据 8. 跳转到订单页面 准备工作: 1. 检查AppID 2. 检查基本路径 base_url 3. 微信账号添加到 管理后台 微信支付流程 分析：说明小程序支付流程 微信支付
微信小程序实现微信支付功能
热门推荐
Fredrik的博客
03-26 3万+
这里我直接上代码，附有注释，直接把我的代码粘贴一下就可以用了，也是自己走了好多的弯路。。，写在博客里做个记录直接把里面的参数替换成你的就可以了，前提是你要开通的有微信支付功能，需要商户号，appid，appsecret,openid，openid的获取比较简单，我再写一篇博客做介绍，不懂得可以私聊我//小程序端代码：pay:function(){ var that=this wx.ge...
微信小程序支付集成
02-06
微信小程序集成微信支付的后台php代码，用thinkPHP3.2框架写的，需要的话拿去
微信小程序 支付Demo
07-10
该代码资源包，用于进行配置微信小程序支付功能，包括前后端核心代码。需要根据文章：https://blog.csdn.net/u011415782/article/details/80944832 进行参考配置。欢迎指摘，谢谢...
jQuery.ajaxComplete() 函数详解
chiji8087的博客
11-15 594
ajaxComplete()函数用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数。 这是一个全局AJAX事件函数，用于为所有AJAX请求的ajaxComplete事件绑定事件处理函数。当AJAX请求完成(无论成功或失败)时，将触发ajaxComplete事件，并执行绑定的事件处理...
JQuery- 常用参数(complete) 参数详解
dingding_java的博客
11-18 1681
请求完成后回调函数 (请求success 和 error之后均调用)。这个回调函数得到2个参数：XMLHTTPRequest) 对象和一个描述请求状态的字符串("success", "notmodified", "nocontent"，"error", "timeout", "abort", 或者 "parsererror") 。 function submitReq(urlRequest,jsonRequest,resultSuccess){ $.ajax({ url:urlR
PHP微信支付 curl请求https://api.mch.weixin.qq.com/pay/unifiedorder 返回空的解决方案
amtz_2000的专栏
11-16 2万+
PHP微信支付 curl请求https://api.mch.weixin.qq.com/pay/unifiedorder 返回空的解决方案 这个问题是我在生成微信支付二维码的时候碰到的，起初代码都是正确的，每次都能正常访问，最近微信支付整体升级，导致原来请求位置支付的二维码地址不能用了，所以只能在服务器本地生成支付二维码了，之前开发就一直碰到，二维码时有时无，没有的时候返回就是null 或是 空...
微信小程序支付之c#后台实现方法
08-29
微信小程序支付之c#后台实现方法 微信小程序支付是指通过微信小程序实现的支付功能，而c#后台实现方法是指使用c#语言在服务器端实现微信小程序支付的后台处理逻辑。下面将详细介绍微信小程序支付之c#后台实现方法的...
微信小程序demo：微信支付后端demo（java）
03-17
在本项目中，我们关注的是微信支付的后端实现，这是一个基于Java的示例代码，可以帮助开发者理解如何在微信小程序中集成微信支付功能。 在微信小程序中，微信支付是一个关键的业务模块，它允许用户在不离开小程序的...
详解微信小程序调用支付接口支付
11-26
我前段时间做微信支付，遇到了很多坑，网上也没有讲解的特别明白的，通过借鉴各路人才的经验，最后也完成了，网上有很多讲解，我在这只讲一些注意点和解决的方法。我就讲讲我从完全懵到完成的过程吧。 在微信提供的...
微信小程序支付API-V3 PHP完整代码（包括微信小程序端）
03-09
微信小程序支付API-V3是微信官方推出的一种在线支付方式，主要针对微信小程序应用，使得开发者可以轻松集成到自己的小程序中，实现用户在小程序内的商品购买和支付流程。本API的PHP实现提供了服务器端处理支付请求的...
微信支付流程
Kugua_huang的博客
08-31 1718
要实现微信支付要满足几个条件： 一、有一个服务号，菜单栏里面有微信支付菜单的公众号 在这里插入图片描述 二、需要开通商户号，不是公众号，必须和公众号做关联操作 在这里插入图片描述 常用的几个参数 下面例子参数值已经经过处理 public final class WxConfig { public final static String appId = "wx98dc29047cexxxx"; // 公众号appid public final static String mchId...
微信发送预支付请求
CSDN19970806的博客
09-10 2531
前几天抽时间学习了下微信支付，今天就给大家分享下微信支付 下单的API 。 下单接口： URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder 微信官方文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1 1.请求参数： 字段名 变量名 是...
微信/支付宝app支付相关参数
瑶山的博客
02-29 9807
appid-18位，appsecret -32位 商户号 mchId，mchKey 账户中心/API安全/设置密钥 查看 注意这个需要你在电脑上安装操作证书，才能看到
jQuery.ajax success 与 complete 区别
weixin_39037804的博客
10-05 351
作者QQ：1095737364 QQ群：123300273 欢迎加入！ 天天用,不知所以然: $.ajax({ type: "post", url: url, ...
微信支付调用调用统一下单API，提示“签名错误”
haho的专栏
05-10 2万+
现在碰到一个客户，调用统一下单APIhttps://api.mch.weixin.qq.com/pay/unifiedorder返回信息出现“签名错误”。支付密钥重设了2次了代码已经用其他公众号和商户号验证过没有错误。就这个客户出现“签名错误”，我们用支付平台测试工具https://pay.weixin.qq.com/wiki/tools/signverify/ 接口测试去验证过签名没问题。确实没...
微信小程序实现支付功能——微信jsapi支付
最新发布
shiranyyds的博客
04-23 2963
微信小程序jsapi支付的实现涉及多个步骤，主要包括前端请求订单信息、后端处理订单并返回支付参数、前端调用jsapi进行支付等。
微信小程序-将图片裁剪成规定的尺寸
笙
07-04 1万+
需求： 图片上传时，要求必须是720*720大小的图片，但是用camera拍出来的照片大小不固定，有的手机是720*720，有的就是1080*1080，还有480*480的 解决办法： 将图片转换成canvas，再在canvas中操作，最后将canvas转换图片导出 先大概贴一下html代码和js中的data <view style='height:292px;width:2...
微信小程序自定义键盘实现与内部虚拟支付功能
在微信小程序开发中，有时需要为用户提供特定场景下的交互体验，比如商城内的虚拟支付功能。由于小程序本身并不提供内置的键盘，因此在需要用户输入密码或者选择支付方式时，开发者需要自定义键盘来模拟这一过程。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值