微信小程序支付功能的实现

前言

最近需要在微信小程序中用到在线支付功能，于是看了一下官方的文档，发现要在小程序里实现微信支付还是很方便的，如果你以前开发过服务号下的微信支付，那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙，下面我就具体说一下小程序里微信支付的开发流程和注意点。

开始

第一步：开通微信支付和微信商户号

第二步，获得用户的openid

首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可以得到用户的code.

wx.login({success: function(res) {if (res.code) {//发起网络请求wx.request({url: 'https://yourwebsit/onLogin',method: 'POST',data: {code: res.code},success: function(res) {var openid = res.data.openid;},fail: function(err) {console.log(err)}})} else {console.log('获取用户登录态失败！' + res.errMsg)}}});

然后开发者服务器使用登录凭证 code 获取 openid。

var code = req.param("code");request({url: "https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code",method: 'GET'}, function(err, response, body) {if (!err && response.statusCode == 200) {res.json(JSON.parse(body));}});

第三步：获取prepay_id和支付签名验证paySign

这一步的过程就和服务号里的微信支付过程一样，分为客户端和服务器端

首先来看一下客户端js

在服务号里，我们是通过如下的代码来调起支付功能

function jsApiCall(){WeixinJSBridge.invoke('getBrandWCPayRequest',{"appId":"",   //公众号名称，由商户传入   "timeStamp":"",     //时间戳，自1970年以来的秒数   "nonceStr":"", //随机串   "package":"prepay_id=<%=prepay_id%>",   "signType":"MD5",     //微信签名方式：   "paySign":"<%=_paySignjs%>" //微信签名},function(res){WeixinJSBridge.log(res.err_msg);if( res.err_msg =="get_brand_wcpay_request:ok"){alert("支付成功!");}else{alert("支付失败!");}});}

在小程序里，我们是通过wx.requestPayment方法来调起支付功能，当然在这之前，我们先要获取prepay_id。

wx.request({url: 'https://yourwebsit/service/getPay', method: 'POST',data: {bookingNo:bookingNo, /*订单号*/total_fee:total_fee,  /*订单金额*/openid:openid},header: {'content-type': 'application/json'},success: function(res) {wx.requestPayment({//时间戳'timeStamp':timeStamp,'nonceStr': nonceStr, //随机串'package': 'prepay_id='+res.data.prepay_id, //配置支付id值'signType': 'MD5',//微信签名方式'paySign': res.data._paySignjs, //微信签名//成功后'success':function(res){ console.log(res);},'fail':function(res){console.log('fail:'+JSON.stringify(res));}})},fail: function(err) {console.log(err)}})

那在服务器端主要要实现的是prepay_id的获取和签名paySign

var bookingNo = req.param("bookingNo");var total_fee = req.param("total_fee");var openid = req.param("openid");var body = "费用说明";var url = "https://api.mch.weixin.qq.com/pay/unifiedorder";var formData = "<xml>";formData += "<appid>appid</appid>"; //appidformData += "<attach>test</attach>";formData += "<body>" + body + "</body>";formData += "<mch_id>mch_id</mch_id>"; //商户号formData += "<nonce_str>nonce_str</nonce_str>";formData += "<notify_url>notify_url</notify_url>";formData += "<openid>" + openid + "</openid>";formData += "<out_trade_no>" + bookingNo + "</out_trade_no>";formData += "<spbill_create_ip>spbill_create_ip</spbill_create_ip>";formData += "<total_fee>" + total_fee + "</total_fee>";formData += "<trade_type>JSAPI</trade_type>";formData += "<sign>" + paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, bookingNo, spbill_create_ip, total_fee, 'JSAPI') + "</sign>";formData += "</xml>";request({url: url,method: 'POST',body: formData}, function(err, response, body) {if(!err && response.statusCode == 200) {var prepay_id = getXMLNodeValue('prepay_id', body.toString("utf-8"));var tmp = prepay_id.split('[');var tmp1 = tmp[2].split(']');//签名var _paySignjs = paysignjs(appid, mch_id, 'prepay_id=' + tmp1[0], 'MD5',timeStamp);var o = {prepay_id: tmp1[0],_paySignjs: _paySignjs}res.send(o);}});

第四步调用这个函数

function paysignjs(appid, nonceStr, package, signType, timeStamp) {var ret = {appId: appid,nonceStr: nonceStr,package: package,signType: signType,timeStamp: timeStamp};var string = raw1(ret);string = string + '&key='+key;console.log(string);var crypto = require('crypto');return crypto.createHash('md5').update(string, 'utf8').digest('hex');
};function raw1(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;
};function paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, out_trade_no, spbill_create_ip, total_fee, trade_type) {var ret = {appid: appid,attach: attach,body: body,mch_id: mch_id,nonce_str: nonce_str,notify_url: notify_url,openid: openid,out_trade_no: out_trade_no,spbill_create_ip: spbill_create_ip,total_fee: total_fee,trade_type: trade_type};var string = raw(ret);string = string + '&key='+key;var crypto = require('crypto');return crypto.createHash('md5').update(string, 'utf8').digest('hex');
};function raw(args) {var keys = Object.keys(args);keys = keys.sort()var newArgs = {};keys.forEach(function(key) {newArgs[key.toLowerCase()] = args[key];});var string = '';for(var k in newArgs) {string += '&' + k + '=' + newArgs[k];}string = string.substr(1);return string;
};function getXMLNodeValue(node_name, xml) {var tmp = xml.split("<" + node_name + ">");var _tmp = tmp[1].split("</" + node_name + ">");return _tmp[0];
}

这样简单3步，小程序的微信支付功能就接上了，下面是测试的支付效果图

微信小程序支付功能的实现相关推荐

微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
python个人微信支付接口_Python实现微信小程序支付功能
正文由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...
python微信小程序抢购_Python实现微信小程序支付功能！Python确实强的一批！
正文由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...
微信小程序支付功能用服务器吗,微信小程序支付功能服务器端（TP5.1）实现...
首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下在使用SDK之前我们需要对 WxPay.Config.php 进行配置 namespace ...
SpringBoot对接微信小程序支付功能开发（一，下单功能）
1,接入前准备: 接入模式选择直连模式: 申请小程序,得到APPID,并开通微信支付: 申请微信商户号,得到mchid,并绑定APPID: 配置商户API key,下载并配置商户证书,根据微信官方文档 ...
基于springboot微信小程序支付功能实现
基于springboot微信小程序支付功能实现简单的封装微信小程序支付功能,支付工具类所依赖的fastjson.lombok.wagegger, 1.添加maven依赖: 版本号可根据自己项目的实际 ...
微信小程序支付功能
微信小程序支付功能最近用微信小程序写了一个支付页,感觉与之前上网查的内容有些区别,记下来以供后日查看 1.判断用户登录是否过期可以直接使用微信提供的API,即wx.checkSession 2. ...
十 Node.js实现微信小程序支付功能
十 Node.js实现微信小程序支付功能一开发前提二支付流程介绍三上代码 1.小程序端发起后台请求,完成统一下单 1.1 小程序端发起后台请求 1.2 Node.js后台接收请求,完成统一 ...
微信小程序支付功能实现全过程简析
今天小编带大家来分析一下微信小程序支付功能的实现全过程. 先附一张小程序支付时序图: 整体流程: 在所以操作之前,我们得先有微信开发者账号,还得有自己的商户号和商品密匙. 微信端请求下单之后,会调用w ...
html微信支付功能代码,微信小程序支付功能（前端）的实现
微信小程序支付功能(前端)的实现 var app = getApp(); Page({ data: {},onLoad: function (options) { // 页面初始化 options为 ...

微信小程序支付功能的实现

前言

开始

第一步：开通微信支付和微信商户号

第二步，获得用户的openid

第三步：获取prepay_id和支付签名验证paySign

第四步调用这个函数

微信小程序支付功能的实现相关推荐

最新文章

热门文章

微信小程序支付功能的实现

前言

开始

第一步：开通微信支付和微信商户号

第二步，获得用户的openid

第三步：获取prepay_id和支付签名验证paySign

第四步 调用这个函数

微信小程序支付功能的实现相关推荐

最新文章

热门文章

第四步调用这个函数