网站设计
来源:028微信开发 | 2018-06-20
很多用过微信小程序的人都在小程序上体验过微信支付,最普遍的案例就是出行,现在小程序渐渐取代公交卡,从微信余额里扣费成为常规支付方法。具体的小程序实现微信支付的流程是怎样的呢?该文章纪录了开发小程序支付过程中的具体流程。
1. 申请微信支付
小程序认证后进入微信支付申请小程序的微信支付
填写企业信息对公账户并上传凭证后,微信支付会打一笔随机金额到对公账户,输入金额完成验证后,在线签署协议,这样整个微信支付的申请流程完成了。注意此处申请所填写的信息都需要真实且详细,设置小程序的密钥。
微信支付申请完,会发送微信支付商户号,商户平台用户名密码等信息到注册者邮箱。
2.配置商户信息
申请微信支付成功后,登陆商户平台(pay.weixin.qq.com)进入账户中心,设置微信商户的API Key与下载证书
3.配置Https服务器
小程序的前端是使用微信提供的框架开发,但是后台依然是开发者自己的服务器。小程序发起的是 https 请求,意味着小程序开发者必须配置 https 服务器。配置 https 服务器之前,先要获取证书,证书可以向相关机构购买,腾讯云目前可以向用户提供免费的证书。
4.服务端准备
下载微信支付sdk,配置微信小程序信息与商户信息,放置证书到对应目录。调用微信申请支付JSAPI的方式生成一串验证信息如下:
appId:wx3*******6//小程序id
nonceStr:qdpys6rdizbnpj12ahwvkf568a6c1sr9 //随机字符串
package:prepay_id=wx2016***********3 //wx的预支付交易单
paySign:8A7DC1A560B3B6DB0C656AC382D3E6F1
signType:MD5
timeStamp:1481167418
5.小程序demo:
const wechatData = payRes.data.payment;//wechatData就是上面的验证
console.log(wechatData);
wx.requestPayment({
\'appId\' : wechatData.appId,
\'timeStamp\': wechatData.timeStamp,
\'nonceStr\': wechatData.nonceStr,
\'package\': wechatData.package,
\'signType\': \'MD5\',
\'paySign\': wechatData.paySign,
\'success\':function(res){
console.log(res);
console.log(\'success\');
},
\'fail\':function(res){
console.log(res);
console.log(\'fail\');
},
\'complete\': function(res){
console.log(res);console.log(\'complete\');
}
});
console.log(2);
6.测试
开启校验请求域名与AppID配置,点击预览使用真机测试,开发工具不会响应发起支付的接口。