微信JS支付代码_前端调用微信支付接口

其实参照官方文档一步一步操作不是很难,但很多人在签名这个地方就总是出现问题,因为文档中签名时使用的字段大小写时错误的。。。。好坑啊!!然而PHP版本的代码官方有封装SDK包,不用操心那么多细节。

NODEJS版本的只能自己写了。

1.签名方法(简单不会错)

//签名;
//mchkey是你在支付平台设置的一个API密钥
function MSign(param, mchkey){
var string = raw(param);
string = string + '&key=' + mchkey; //key拼接在字符串最后面
var crypto = require('crypto');
return crypto.createHash('md5').update(string, 'utf8').digest('hex').toUpperCase();
}
//args是一个JSON,方法将json中的字段按照ASCII码从小到大排序,生成一个字符串key1=value1&key2=value2。
function raw(args) {
var keys = Object.keys(args);
keys = keys.sort();
var newArgs = {};
keys.forEach(function (key) {
newArgs[key] = args[key];
});
var string = '';
for (var k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr(1);
return string;
}

2.创建订单

//创建随机数;
getRandomNumberSection(begin, end) {
return Math.floor(Math.random() * (begin - end) + end);
}
//创建随机字符串;
getRandomStr(length) {
let value = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let result = "";
for (let i = 0; i < length; i++) {
let v = value[getRandomNumberSection(0, value.length - 1)];
while (i === 0 && v === '0') {
v = value[getRandomNumberSection(0, value.length - 1)];
}
result += v;
}
return result;
}
//创建JSAPI订单;
//openid:微信用户的OPENID
//body: 订单信息;
//out_trade_no: 你自己生产的商户订单号;
//spbill_create_ip: 客户端IP地址
//total_fee: 支付金额(单位分)
async CreateJSAPIpay(openid, body, out_trade_no, spbill_create_ip, total_fee, callback) {
let that = this;
let notify_url = '你需要设置支付完成后的回调URL';
let WxAppid = '微信APPID';
let mch_id = '商户ID';
let trade_type = 'JSAPI';
let sign_type = 'MD5';
let noncestr = (new Date()).getTime() + '_';
noncestr += getRandomStr(31 - noncestr.length); //产生32位随机字符串;
//1.签名参数;
let sign = MSign({
appid: WxAppid,
mch_id: mch_id,
nonce_str: noncestr,
notify_url: notify_url,
trade_type: trade_type,
sign_type: sign_type,
openid: openid, //微信用户的OPENID
body: body, //订单信息;
out_trade_no: out_trade_no,//你自己生产的商户订单号;
spbill_create_ip: spbill_create_ip,//客户端IP地址
total_fee: total_fee //金额(单位分)
}, this.mchkey);

//2.生成XML格式;
let formData = "<xml>";
formData += "<appid>" + WxAppid + "</appid>";
formData += "<body><![CDATA[" + body + "]]></body>";
formData += "<mch_id>" + mch_id + "</mch_id>";
formData += "<nonce_str>" + noncestr + "</nonce_str>";
formData += "<notify_url>" + notify_url + "</notify_url>";
formData += "<out_trade_no>" + out_trade_no + "</out_trade_no>";
formData += "<spbill_create_ip>" + spbill_create_ip + "</spbill_create_ip>";
formData += "<total_fee>" + total_fee + "</total_fee>";
formData += "<trade_type>" + trade_type + "</trade_type>";
formData += "<openid>" + openid + "</openid>";
formData += "<sign_type>" + sign_type + "</sign_type>";
formData += "<sign>" + sign + "</sign>"; //sign是上一步签名产生的;
formData += "</xml>";

//3.请求微信
let url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
request({ url: url, method: 'POST', body: formData },
function (err, response, body) {
if (!err && response.statusCode == 200) {
xmlreader.read(body.toString("utf-8"), function (errors, response) {
if (null !== errors) {
callback(false, errors, null);
}
else {
if (response.xml.return_msg.text().toLocaleUpperCase() == 'OK') {
//此时返回的数据并不能直接用在客户端,需要再次签名;
let prepay_id = response.xml.prepay_id.text();
let timestamp = parseInt(new Date().getTime() / 1000) + '';
//4.签名
let finalsign = MSign({
appId: WxAppid,
timeStamp: timestamp,
nonceStr: noncestr,
package: 'prepay_id=' + prepay_id,
signType: sign_type
}, mchkey);
//这才是客户端最后使用的数据;
let clientParam = {
'appId': WxAppid,
'nonceStr': noncestr,
'timeStamp': timestamp,
'package': 'prepay_id=' + prepay_id,
'signType': that.sign_type,
'sign': finalsign
};
callback(true, clientParam);
}
else {
callback(false, null);
}
}
});
}
else {
callback(false, null);
}
});
}

3.公众号网页唤起支付页面

如果要在WEB端使用微信的功能,则需要在页面打开时使用JSAPI签名进行初始化,服务端JSAPI签名的方法如下,其中,jsapi参数是使用全局access_token获取的,url是网页的地址。

//获取JSAPI签名;
static GetJSAPISign(appid, jsapi, url) {
var ret = {
jsapi_ticket: jsapi,
noncestr: Math.random().toString(36).substr(2, 15),
timestamp: parseInt(new Date().getTime() / 1000) + '',
url: url
};

var string = raw(ret);

let jsSHA = require('jssha');
let shaObj = new jsSHA(string, 'TEXT');
let signature = shaObj.getHash('SHA-1', 'HEX');
return {
appid:appid,
nonceStr:ret.noncestr,
timestamp:ret.timestamp,
signature:signature,
url: url
};
}

网页端初始化微信JSAPI代码
需要引入

<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script>
//我使用的EJS,参数在请求页面时就生成好了;
var jsapiSign = JSON.parse('<%- JSON.stringify(jsapiSign)%>');
var paymentSign = JSON.parse('<%- JSON.stringify(paymentSign)%>');
//初始化JSAPI;
function init(){
wx.config({
debug: true,
appId: jsapiSign.appid,
timestamp: jsapiSign.timestamp,
nonceStr: jsapiSign.nonceStr,
signature: jsapiSign.signature,
jsApiList : [
'chooseWXPay' //请求微信支付权限
]
});

wx.ready(function () {
wx.hideOptionMenu(); //隐藏菜单;
onBridgeReady(); //初始化完成后立即调用微信支付;
});

wx.error(function(res){
console.log('初始化失败了,请稍后重试');
});
}
//唤起支付;
function onBridgeReady(){
var param = {
appid:paymentSign.appId,
timestamp: paymentSign.timeStamp,
nonceStr: paymentSign.nonceStr,
package: paymentSign.package,
signType: paymentSign.signType,
paySign: paymentSign.sign,
success: function (res) {
console.log("支付完成,请稍候");
},
cancel: function(res){
console.log("用户取消支付");
},
fail: function(msg){
console.log("支付调用失败");
}
};
//API唤起支付;
wx.chooseWXPay(param);
}
init();
</script>

目前学到了一种方法!

一:cd到文件夹对应的项目中  在cmd中输入 你npm run build

二:此时项目中会生成一个文件夹dist,在dist文件夹下的index文件里每个路径前加  ./ 如下图

三:在HBuilder X中 点击文件---新建--项目---选择5+App---定义名称--模板选空项目

四:删除刚刚新建项目里面的  除了manifest.json 这个文件的其他文件

五:打开原来项目并复制dist中的文件,不包括dist,粘贴到,在HBuilder X中创建的项目里

六:点击HBuilder X中的  发行---原生APP云打包  ----Android(apk包)----使用公共测试证书

七:点击打包

八:打包成功后会显示下载地址

vue+vant打包,vue+vant-ui小程序,微信支付的更多相关文章

  1. 微信小程序 微信支付

    微信小程序前端自处理: //时间戳 timeStamp() { return parseInt(new Date().getTime() / 1000) + '' }, //随机数 randomStr ...

  2. 微信小程序------微信支付模块

    最近项目涉及到小程序开发:需要进行微信支付模块,接下来通过叙述,记录一下微信小程序中微信支付模块的开发,以便日后翻阅和使用. 学习指南----------微信支付开发文档:https://pay.we ...

  3. TP5调用小程序微信支付,回调,在待支付中再次调用微信支付

    1,必须要有 $mch_id $key $appid这三个值,是需要去申请的,我是直接用公司的2,购买商品订单号用户openid统一下单名称商品价格(必须以分为单位,调起微信支付)服务器的ip地址(没 ...

  4. 微信小程序——微信支付

    这个讲起来也就比较麻烦一点,因为需要的不仅仅是咱们代码上的技术,嘿嘿! 先整理一下思路.如果想做微信支付: 1.现有一个公司账户(非个人账户),并且实名认证过的. 2.微信号 必须开通微信支付功能. ...

  5. 微信小程序微信支付流程

    1.小程序调用wx.login获取登录凭证code wx.login(无请求参数)返回code(有效期5分钟) wx.login({ success:function(res){ //get res. ...

  6. 微信小程序微信支付的一些坑

    使用的是Node.js作为后端 统一下单: appid:这里的appid是调起微信支付的appid mch_id:商户号,需要注意的是商户号要与appid对应 nonce_str:Math.rando ...

  7. Java实现小程序微信支付

    小程序支付流程交互图: 进入小程序,下单,请求下单支付,调用小程序登录API来获取Openid,生成商户订单 // pages/pay/pay.js var app = getApp(); Page( ...

  8. .NET开发微信小程序-微信支付

    前台MD5加密代码 /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algor ...

  9. Taro/JS/H5/小程序:纯前端解决小程序微信支付统一下单和调起支付

    这个文章不会说具体0到1的代码流程,我会着重讲几个问题的解决 准备以下依赖 "md5": "^2.2.1", "xml-js": " ...

  10. 小程序微信支付(UNIAPP+第三方SDK:binarywang)

    小程序支付流程图说明(UNIAPP+第三方SDK:binarywang) 说明:小程序为UNI-APP开发,使用的第三方微信支付SDK为binarywang提供的,此SDK对微信公众号.小程序.微信各 ...

随机推荐

  1. Linux 安装 CentOS7

    1.linux 下载 http://mirrors.aliyun.com/centos/7/isos/x86_64/ centos-7-isos-x86_64安装包下载_开源镜像站-阿里云 (aliy ...

  2. window系统增强优化工具

    计算机系统优化的作用很多,它可以清理WINDOWS临时文件夹中的临时文件,释放硬盘空间:可以清理注册表里的垃圾文件,减少系统错误的产生:它还能加快开机速度,阻止一些程序开机自动执行:还可以加快上网和关 ...

  3. ASP.NET Core知识之RabbitMQ组件使用(二)

      近期,业务调整,需要内网读取数据后存入到外网,同时,其他服务器也需要读取数据,于是我又盯上了RabbitMQ.在展开业务代码前,先看下RabbitMQ整体架构,可以看到Exchange和队列是多对 ...

  4. JZOJ 1073. 【GDOI2005】山海经

    \(\text{Solution}\) 非常经典的求区间最大字段和 不难想到线段树,考虑处理区间答案的合并 维护前缀后缀最大和与区间答案,合并考虑跨中点贡献即可 代码打得非常恶心... \(\text ...

  5. 国外的SRE都是干啥工作的?薪资如何?

    本文翻译自:https://www.flagship.io/glossary/site-reliability-engineer/,意译~ 众所周知,开发和 IT 运营之间因为屁股决定脑袋,存在巨大的 ...

  6. Angular 利用路由快照实现tab

    1.定义路由快照 新建文件SimpleReuseStrategy.ts import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRout ...

  7. LeetCode-2044 统计按位或能得到最大值子集的数目

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/count-number-of-maximum-bitwise-or-subsets 题目描述 给 ...

  8. Python (进阶 第二部)

    目录 函数 闭包 匿名函数 迭代器 高阶函数 推导式 递归函数 函数 函数的定义:  功能( 包括一部分代码,实现某种功能,达成某个目的) 函数的特点:  函数可以反复调用 ,提高代码的复用性,提高开 ...

  9. ESXi 安装 Truenas Core 解决企业共享存储免费方案

    服务器配置 创建虚拟机内存最少8+,建议选择32,CPU没啥用,我给了2,硬盘我选择了50G+8T,因为一个虚拟机无法使用两个存储池,所以全部使用非SSD硬盘,自带网卡删除,单独给一个直通网卡,建议上 ...

  10. linux 操作命令大全

    mysql 授权远程访问 1.进入cd /usr/local/mysql/bin 下执行 ./mysql -uroot -pInfosec@2020  (-p后面是数据库密码) 2.use mysql ...