700字范文 > 微信小程序实现微信支付功能流程

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

时间：2020-08-23 14:50:23

相关推荐

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

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

微信支付:

https://pay./wiki/doc/api/index.html

图片说明

进行选择接入

图片说明

步骤:

小程序调用登录接口,获取用户的openid,wx.login(object), 通过调用接口获取登录凭证code进行获取登录用户信息,包含用户的唯一标识(openid)以及本次登录的会话密钥(session_key).

用code获取session_key, 这是一个https接口,开发者服务器使用登录凭证code获取session_key和openid.其中session_key是对用户数据进行保密的密钥.为了安全,不能将session_key在网络上传输.

图片说明

获取的openid

商户在小程序中先调用该接口在微信支付服务后台生成预支付交易单，返回正确的预支付交易后调起支付。其实微信是提供java，net，php三种语言的封装包。

https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=9_1

图片说明

微信小程序-支付

/jcscript/p/6126722.html

需要支付的perpay_id

wx.requestPayment(OBJECT)-微信支付

wx.requestPayment({"timeStamp": "","nonceStr": "","package": "","signType": "MD5","paySign": "","success":function(res){},"fail":function(res){}})

获取支付id,res_pay, 仅返回了perpay_id，还有随机字符串和签名

统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***

签名,具体签名方案参见小程序支付接口文档

踩坑:

图片说明

小程序支付->小程序调用起支付API

图片说明

微信小程序API同理

图片说明

https://developers./miniprogram/dev/api/wx.requestPayment.html

图片说明

// 调起支付签名function MixedencryMD5(res_paydata,randomString,timeStamp) {return "appId=" + config.appid + "&nonceStr=" + randomString + "&package=prepay_id=" + res_paydata + "&signType=MD5" + "&timeStamp=" + timeStamp + "&key=" + config.key; }

// 时间戳function timeStamp() {return parseInt(new Date().getTime() / 1000) + ''}/* 随机数 */function randomString() {var chars = 'A2345678'; var maxPos = chars.length;var pwd = '';for (var i = 0; i < 32; i++) {pwd += chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;}

图片说明

注意: 时间戳和随机字符串，保证生成一次

微信支付开发文档-普通商户

https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=1_1

图片说明

开通微信支付和微信商户号,获取当前用户的openid,通过调用wx.login方法,可以得到用户的code,然后开发者服务器使用登录凭证code获取openid.然后在获取prepay_id和支付签名验证paySign

`appid`: "", // 公众号名称,由商户传入`timeStamp`: "", // 时间`nonceStr`: "", // 随机串'package': 'prepay_id=','signType`: 'MD5'; // 微信签名方式,'paySign': ""; // 微信签名

小程序通过wx.requestPayment方法调用起支付功能.prepay_id的获取和签名paySign的获取.

图片说明

在小程序后台,申请微信支付,认证以后,微信支付申请审核通过后，商户在申请资料填写的邮箱中收取到由微信支付小助手发送的邮件，此邮件包含开发时需要使用的支付账户信息。

图片说明

协议规则-商户接入微信支付

图片说明

安全规范

图片说明

appid： wxdmch_id： 100device_info： 10body： testnonce_str： ibA

第一步：对参数按照key=value的格式

stringA="appid=wx&body=test&device_info=10&mch_id=10100&nonce_str=ibJA";

第二步：拼接API密钥

stringSignTemp=stringA+"&key=" //注：key为商户平台设置的密钥keysign=MD5(stringSignTemp).toUpperCase()="" //注：MD5签名方式sign=hash_hmac("sha256",stringSignTemp,key).toUpperCase()="" //注：HMAC-SHA256签名方式

最终得到最终发送的数据

<xml><appid>wx</appid><mch_id>1000</mch_id><device_info>1</device_info><body>test</body><nonce_str>ibuA</nonce_str><sign>9A0A89CF3B7</sign></xml>

小程序支付

开放模式介绍-appid和mch_id成对使用

微信支付开放的能力分2大类:普通模式和服务商模式

微信支付基础账号模型-普通模式

图片说明

普通服务商微信支付资金清算流程

图片说明

JSAPI 或 JSSDK 调起微信支付

图片说明

小程序支付模式

第一步开通微信支付功能,绑定微信支付商户号.

appid 小程序appidmch_id 所绑定的商户号中的 mch_idtrade_type 请填写"JSAPI"openid 使用 "wx.login" 接口获得的 openid

业务说明

账号申请指引

进行微信认证

小程序申请微信认证
认证入口：登录小程序—设置—基本设置—微信认证—详情

图片说明

小程序申请微信支付

图片说明

小程序绑定微信开放平台帐号
绑定小程序流程说明：登录微信开放平台（open.）—管理中心—公众帐号—绑定公众帐号

公众号关联小程序
关联流程：
登录公众号后台-小程序-小程序管理-添加-关联小程序

开通微信支付后,申请或复用微信支付商户号,新申请微信支付商户号或绑定一个已有的微信支付商户号,开通指引：

/faq/140225MveaUz161230yqiIby.html

图片说明

注意事项:

图片说明

业务流程

小程序支付的流程图如下：

图片说明

1、【[小程序登录API](https://mp./debug/wxadoc/dev/api/api-login.html?t=1122)】

2、【[统一下单API](https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=9_1&index=1)】

3、【[再次签名](https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3)】

4、【[支付结果通知API](https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=9_7)】

5、【[查询订单API](https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=9_2)】

开发步骤

图片说明

HTTPS服务器配置
https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=10_4

图片说明

小程序绑定已有商户号开通微信支付/faq/140225MveaUz161230yqiIby.html

小程序调起支付API

https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5

图片说明

示例代码：

wx.requestPayment({'timeStamp': '','nonceStr': '','package': '','signType': 'MD5','paySign': '','success':function(res){},'fail':function(res){},'complete':function(res){}})

商户平台安全使用

图片说明

小程序

案例:

/* 微信支付 */goWxPay: function () {var that = this;wx.login({success: function (res) {console.log("获取login code",res.code);that.getOpenId(res.code);}});},/* 获取openId */getOpenId: function (code) {var that = this;wx.request({url: "" + code, method: 'GET',success: function (res) {that.unitedPayRequest(res.data.openid);},fail: function () {},complete: function () {}});},/*统一支付接口*/unitedPayRequest: function(openid){var that=this;//统一支付签名var appid = '';//appid必填var body = '';//商品名必填var mch_id = '';//商户号必填var nonce_str = util.randomString();//随机字符串，不长于32位。 var notify_url = '';//通知地址必填var total_fee = parseInt(0.01 * 100); //价格，这是一分钱var trade_type = "JSAPI";var key = ''; //商户key必填，在商户后台获得var out_trade_no = '';//自定义订单号必填var unifiedPayment = 'appid=' + appid + '&body=' + body + '&mch_id=' + mch_id + '&nonce_str=' + nonce_str + '&notify_url=' + notify_url + '&openid=' + openid + '&out_trade_no=' + out_trade_no + '&total_fee=' + total_fee + '™_type=' + trade_type + '&key=' + key;console.log("unifiedPayment", unifiedPayment);var sign = md5.md5(unifiedPayment).toUpperCase();console.log("签名md5", sign);//封装统一支付xml参数var formData = "<xml>";formData += "<appid>" + appid + "</appid>";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>" + that.data.ordernum + "</out_trade_no>";formData += "<total_fee>" + total_fee + "</total_fee>";formData += "<trade_type>" + trade_type + "</trade_type>";formData += "<sign>" + sign + "</sign>";formData += "</xml>";console.log("formData", formData);//统一支付wx.request({url: '', method: 'POST',head: 'application/x-www-form-urlencoded',data: formData, //设置请求的 headersuccess: function (res) {console.log("返回商户", res.data);var result_code = util.getXMLNodeValue('result_code', res.data.toString("utf-8"));var resultCode = result_code.split('[')[2].split(']')[0];if (resultCode == 'FAIL') {var err_code_des = util.getXMLNodeValue('err_code_des', res.data.toString("utf-8"));var errDes = err_code_des.split('[')[2].split(']')[0];wx.showToast({title: errDes,icon: 'none',duration: 3000})} else {//发起支付var prepay_id = util.getXMLNodeValue('prepay_id', res.data.toString("utf-8"));var tmp = prepay_id.split('[');var tmp1 = tmp[2].split(']');//签名 var key = '';//商户key必填，在商户后台获得var appId = '';//appid必填var timeStamp = util.createTimeStamp();var nonceStr = util.randomString();var stringSignTemp = "appId=" + appId + "&nonceStr=" + nonceStr + "&package=prepay_id=" + tmp1[0] + "&signType=MD5&timeStamp=" + timeStamp + "&key=" + key;console.log("签名字符串", stringSignTemp);var sign = md5.md5(stringSignTemp).toUpperCase();console.log("签名", sign);var param = { "timeStamp": timeStamp, "package": 'prepay_id=' + tmp1[0], "paySign": sign, "signType": "MD5", "nonceStr": nonceStr }console.log("param小程序支付接口参数", param);that.processPay(param);}},})},/* 小程序支付 */processPay: function (param) {wx.requestPayment({timeStamp: param.timeStamp,nonceStr: param.nonceStr,package: param.package,signType: param.signType,paySign: param.paySign,success: function (res) {console.log("wx.requestPayment返回信息",res);wx.showModal({title: '支付成功',content: '官方号中收到支付凭证',showCancel: false,success: function (res) {if (res.confirm) {} else if (res.cancel) {}}})},fail: function () {console.log("支付失败");},complete: function () {console.log("支付完成");}})}

客户端js

wx.request({url:'',header:{'Content-Type':'application/x-www-form-urlencoded'},method:'POST',success:function(res){console.log(res.data);console.log('调起支付');wx.requestPayment({'timeStamp': res.data.timeStamp,'nonceStr': res.data.nonceStr,'package': res.data.package,'signType':'MD5','paySign': res.data.paySign,'success':function(res){console.log('success');wx.showToast({title:'支付成功',icon:'success',duration:3000});},'fail':function(res){console.log('fail');},'complete':function(res){console.log('complete');}});},fail:function(res){console.log(res.data)}});

先开通微信支付商户

在小程序后台,点击微信支付,申请开通,选择新申请,

统一下单:https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=9_1&index=1

接口链接

URL地址：https://api.mch./pay/unifiedorder

图片说明

举例如下：

<xml><appid>wx2421b1c4370ec43b</appid><attach>支付测试</attach><body>JSAPI支付测试</body><mch_id>10000100</mch_id><detail><![CDATA[{ "goods_detail":[ { "goods_id":"iphone6s_16G", "wxpay_goods_id":"1001", "goods_name":"iPhone6s 16G", "quantity":1, "price":528800, "goods_category":"123456", "body":"苹果手机" }, { "goods_id":"iphone6s_32G", "wxpay_goods_id":"1002", "goods_name":"iPhone6s 32G", "quantity":1, "price":608800, "goods_category":"123789", "body":"苹果手机" } ] }]]></detail><nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str><notify_url>/pub_v2/pay/notify.v2.php</notify_url><openid>oUpF8uMuAJO_M2pxb1Q9zNjWeS6o</openid><out_trade_no>1415659990</out_trade_no><spbill_create_ip>14.23.150.211</spbill_create_ip><total_fee>1</total_fee><trade_type>JSAPI</trade_type><sign>0CB01533B8C1EF103065174F50BCA001</sign></xml>

微信支付的流程:

获取用户code值

获取用户openid

服务器上请求微信的统一下单接口,获取prepay_id值

微信支付的整个流程:

获取用户的code值,请求用户的openid.

//app.jsApp({onLaunch: function() {wx.login({success: function(res) {if (res.code) {//发起网络请求wx.request({url: '/onLogin',data: {code: res.code}})} else {console.log('获取用户登录态失败！' + res.errMsg)}}});}})

接着服务端来请求微信的地址：(参考微信官方api)

https://api./sns/jscode2session

public Map<String,Object> onLogin(String code){Map<String,Object>result=new HashMap<>();String url=ConstantUtils.getSessionKeyUrl+"?appid="+ ConstantUtils.appId+"&secret="+ConstantUtils.secret+"&js_code="+code+"&grant_type="+ConstantUtils.grantType;JSONObject httpResult=HttpUtils.httpGet(url);result.put("openid",httpResult.get("openid"));result.put("session_key",httpResult.get("session_key"));result.put("expires_in",httpResult.get("expires_in"));return result;}

统一下单的接口,获取prepay_id字段值

https://api.mch./pay/unifiedorder

public Map<String,Object> createOrder(String openId){Map<String,Object>result=new HashMap<>();result.put("status","1");result.put("payType","weixin");result.put("orderId","123456");String formData=mitData(openId);String httpResult = HttpUtils.httpXMLPost(ConstantUtils.createOrderUrl,formData);try {Map<String, String> resultMap = WXPayUtil.xmlToMap(httpResult);result.put("package", "prepay_id=" + resultMap.get("prepay_id"));result.put("nonceStr",resultMap.get("nonce_str"));} catch (Exception e) {e.printStackTrace();}String times= WXPayUtil.getCurrentTimestamp()+"";result.put("timeStamp",times);Map<String, String> packageParams = new HashMap<String ,String>();packageParams.put("appId", ConstantUtils.appId);packageParams.put("signType", ConstantUtils.signType);packageParams.put("nonceStr",result.get("nonceStr")+"");packageParams.put("timeStamp",times);packageParams.put("package", result.get("package")+"");//商户订单号String sign="";try {sign= WXPayUtil.generateSignature(packageParams, ConstantUtils.key);} catch (Exception e) {e.printStackTrace();}result.put("paySign",sign);return result;}

WXPayUtil工具类是微信官方demo中的工具类.

可以JAVA后台实现小程序支付

图片说明

调用支付统一下单API来获取prepay_id

小程序调支付数据需要签名的字段appId，timeStamp，nonceStr，package再次签名.

微信公众平台支付接口调试工具

https://pay./wiki/tools/signverify/

`WXPayUtil.java`

/download/by965738071/10389430

代码

开通微信支付功能，需要商户号，appid，appsecret,openid

小程序:

参考

/fredrik/article/details/79697963

pay:function(){var that=thiswx.getStorage({key: 'openid',success: function(res) {wx.request({url: url + 'Wx_Pay',data: {//用户的openidopenid:res.data,fee: that.data.totalPrice, //支付金额details: that.data.goodsList[0].goods_name,//支付商品的名称},success:function(result){if(result.data){wx.requestPayment({timeStamp: result.data['timeStamp'],nonceStr: result.data['nonceStr'],package: result.data['package'],signType: 'MD5',paySign: result.data['paySign'],'success':function(successret){console.log('支付成功');//获取支付用户的信息wx.getStorage({key: 'userInfo',success: function (getuser) {wx.request({url: url + 'Wx_AddOrder',data: {uname: getuser.data.nickName,goods: that.data.goodsList[0].goods_name,price: that.data.totalPrice,openid:res.data,},success: function (lastreturn) {console.log("存取成功");}})},})},'fail':function(res){}})}}})},})},

支付实现

图片说明

小程序端代码:

wx.requestPayment({'timeStamp': '','nonceStr': '','package': '','signType': 'MD5','paySign': '','success':function(res){},'fail':function(res){}})

小程序端代码如下:

pay:function(_payInfo,success,fail){var payInfo = {body:'',total_fee:0,order_sn:''}Object.assign(payInfo, _payInfo);if(payInfo.body.length==0){wx.showToast({title:'信息描述错误'})return false;}if(payInfo.total_fee==0){wx.showToast({title:'金额不能0'})return false; }if(payInfo.order_sn.length==0){wx.showToast({title:'订单号不能为空'})return false; }var This = this;This.getOpenid(function(openid){payInfo.openid=openid;This.request({url:'api/pay/prepay',data:payInfo,success:function(res){var data = res.data;console.log(data);if(!data.status){wx.showToast({title:data['errmsg']})return false;}This.request({url:'api/pay/pay',data:{prepay_id:data.data.data.prepay_id},success:function(_payResult){var payResult = _payResult.data;console.log(payResult);wx.requestPayment({'timeStamp': payResult.timeStamp.toString(),'nonceStr': payResult.nonceStr,'package': payResult.package,'signType': payResult.signType,'paySign': payResult.paySign,'success': function (succ) {success&&success(succ);},'fail': function (err) {fail&&fail(err);},'complete': function (comp) { }}) }})}})})}

开通微信支付和微信商户号

获得用户的`openid`

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)}}});var code = req.param("code");request({url: "https://api./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`

图片说明

通过wx.requestPayment方法来调起支付功能

图片说明

prepay_id的获取和签名paySign,是从小程序请求后台来的.

图片说明

第一步:调用wx.login(object)获取用户的code,code换取session_key,

微信的第三个接口,统一下单,获取prepay_id,第四个接口,wx.requestPayment(object),成功后,请求支付后的结果.

先执行wx.login

小程序代码:

<view><button bindtap='wxpay' class='css'>发起支付</button></view>

// jsvar app=getApp();Page({wxpay: function(){var code=app.code;wx.request({url: SERVER_PATH+'wxpayapi/, data: {code: code},header: {'content-type': 'application/json' },success: function (res) {console.log(res.data);var data=res.data;wx.requestPayment({'timeStamp': data.timeStamp,'nonceStr': data.nonceStr,'package': data.package,'signType': 'MD5','paySign': data.paySign,'success': function (res) {console.log("支付成功！")},'fail': function (res) {}})}})}})

https://pay./wiki/doc/api/jsapi.php?chapter=11_1

图片说明

实例参考地址:

/s/1pKLgG8z

/s/1nuBH0EX