微信小程序在线支付功能开通详细流程小程序里微信支付的开发流程和注意点
微信小程序在线支付功能 已经是当下最热门的话题,下面将从多方面来谈谈微信小程序在线支付功能开通详细流程(图文)相关的内容。
最近需要微信小程序 中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序 里的微信支付和服务号里的开发过程如出一辙,下面就来具体说一下小程序里微信支付的开发流程和注意点。
1、开通微信支付和微信商户号
此流程与微信支付开通服务号流程相同。没什么可说的。
2、获得用户的openid
在首页,我们需要在小程序的客户端js中获取当前用户的openid。我们可以通过调用wx.login方法获取用户的code,然后developer服务器使用登录凭据。
代码获取openid。
wx.login({ successfunction(res) { if (res.code) { //发起网络请求
wx.request({ url'https://yourwebsit/onLogin', 方法: 'POST', 数据: {
代码:res.code
}, 成功: function(res) { var openid=res.data.openid;
}, 失败: 函数(err) { console.log(err)
}
})
} else { console.log('获取用户登录状态失败!' + res.errMsg)
}
}
});
var code=req.param('code');
请求({网址:
'https://api.weixin.qq.com/sns/jscode2session?appid='+appid+'secret='+secret+'js_code='+code+'grant_type=authorization_code',
方法:'获取'
}, 函数(错误, 响应, 正文) { if (!err response.statusCode
==200){
res.json(JSON.parse(body));
}
});
3.获取prepay_id和支付签名验证paySign
此步骤的流程与服务号中的微信支付流程相同,分为客户端侧和服务器侧。
首先我们看一下客户端js
在服务账号中,我们通过以下代码激活支付功能
函数jsApiCall()
{
WeixinJSBridge.invoke( 'getBrandWCPayRequest',
{ 'appId':'', //公众号名称,商户传入
'timeStamp':'', //时间戳,自1970年以来的秒数
'nonceStr':'', //随机字符串
'package':'prepay_id=%=prepay_id%',
'signType':'MD5', //微信签名方式:
'paySign':'%=_paySignjs%' //微信签名
}, 函数(res){
WeixinJSBridge.log(res.err_msg); if( res.err_msg
=='get_brand_wcpay_request:确定'){
alert('支付成功!');
}别的{
alert('支付失败!');
}
}
);
}
在小程序中,我们通过wx.requestPayment方法激活支付功能。当然,在这样做之前,我们首先要获取prepay_id。
wx.request({ url'https://yourwebsit/service/getPay',
method'POST', data{ bookingNo:bookingNo, /*订单号*/
Total_fee:total_fee, /*订单金额*/
开放ID:开放ID
}, header{ 'content-type''application/json'
},成功:函数(res){
wx.requestPayment({ 'timeStamp':timeStamp, 'nonceStr'nonceStr, 'package':
'prepay_id='+res.data.prepay_id, 'signType''MD5', 'paySign':
res.data._paySignjs, '成功':function(res){ console.log(res);
}, '失败':function(res){ console.log('失败:'+JSON.stringify(res));
}
})
}, 失败: 函数(err) { console.log(err)
}
})
服务器端主要实现的是prepay_id和签名paySign的获取。
var bookingNo=req.param('bookingNo'); var 总费用=
req.param('total_fee'); var openid=req.param('openid'); var body='费用说明';变量
url='https://api.mch.weixin.qq.com/pay/unifiedorder'; var formData='';
formData +='appid'; //应用程序ID
formData +='测试';
表单数据+='' + 正文+ '';
formData +='mch_id'; //商户号
formData +='nonce_str';
formData +='notify_url';
formData +='' + openid + '';
formData +='' + bookingNo + '';
formData +='spbill_create_ip';
formData +='' + 总费用+ '';
formData +='JSAPI';
formData +='' + paysignjsapi(appid、attach、body、mch_id、nonce_str、notify_url、openid、bookingNo、spbill_create_ip、total_fee、'JSAPI') + '';
表单数据+='';
请求({ urlurl, 方法: 'POST', 正文: formData
}, 函数(错误, 响应, 正文) { 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',时间戳); var o={ prepay_idtmp1[0], _paySignjs_paySignjs
}
res.send(o);
}
});
下面是用到的函数
函数paysignjs(appid,nonceStr,包,signType,timeStamp){ var ret
={ appId:appid,nonceStr:nonceStr,包:包,signType:signType,
时间戳:时间戳
}; var string=raw1(ret);字符串=字符串+ 'key='+key;
控制台.log(字符串); var crypto=require('crypto');返回
crypto.createHash('md5').update(string, 'utf8').digest('hex');
};function raw1(args) { var keys=Object.keys(args);
键=key.sort() var newArgs={};
键.forEach(函数(键){
newArgs[key]=args[key];
}); var 字符串=''; for(var k in newArgs) { string +='' + k + '=' +
新参数[k];
} 字符串=字符串.substr(1);返回字符串;
};函数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,附加:附加,主体:主体,mch_id:mch_id,nonce_str:nonce_str,
通知网址:通知网址,开放ID:开放ID,out_trade_no:out_trade_no,
spbill_create_ip:spbill_create_ip,total_fee:total_fee,trade_type:
交易类型
}; var 字符串=raw(ret);字符串=字符串+ 'key='+key; var 加密=
需要('加密');返回crypto.createHash('md5').update(string,
'utf8').digest('十六进制');
};function raw(args) { var keys=Object.keys(args);
键=key.sort() var newArgs={};
键.forEach(函数(键){
newArgs[key.toLowerCase()]=args[key];
}); var 字符串=''; for(var k in newArgs) { string +='' + k + '=' +
新参数[k];
} 字符串=字符串.substr(1);返回字符串;
};function getXMLNodeValue(node_name, xml) { var tmp=xml.split('' +
节点名称+ ''); var _tmp=tmp[1].split('');返回
_tmp[0];
}
通过这三个简单的步骤,小程序的微信支付功能就连接起来了。以下是测试的支付效果图。