web h5微信公众号支付操作方式

开通和审核

微信支付和支付宝商家平台一样，都是要审核资质的，支付宝个人认证可以使用担保支付，虽然需要用户确认收货之后才能收到资金，但是好歹也是能用的。微信直接不让个人使用支付。只有企业以上级别的服务号才能申请。

开通&认证

支付宝注册企业账号，进行企业认证，我总共就花了10分钟，包括公司资质审核，打款到公账确认公账等步骤。效率高到简直无法想象。微信支付需要已经认证过的服务号才能开通支付。提交完资质，等待审核，花了5个工作日的时间才告诉我资质审核过了，对，没错，是5个工作日，中间隔了一个周末，微信称2-7个工作日认证完成，还是实现诺言了。

开通支付

支付宝需要签约服务，这里我签约的是即时到帐的，花了2天时间。微信开通认证之后，登陆商户平台配置一下就可以开干了，这点从速度方面比支付宝强点，因为它把支付用途啥的都放到第一步的认证里面了，而支付宝是放在后面的签约服务里面进行审核的。

这些步骤完成之后，就可以开始开发了。虽然如此，从整体进度上面，支付宝还是略胜微信一筹的。

开发

根据文档接入支付宝和微信的支付平台

文档&DEMO

支付宝也可以下个DEMO改改就完成了。微信的文档，在微信公众平台有一份，在商户平台又有另外一份，而且内容还不一样。我主要需要在公众号里面支付，所以选择了微信的JSAPI。在公众平台里面，关于JS支付的只有一小段。如下：

wx.chooseWXPay({

timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeS tamp字段名需大写其中的S字符

nonceStr: '', // 支付签名随机串，不长于 32 位

package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）

signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'

paySign: '', // 支付签名

success: function (res) {

// 支付成功后的回调函数

}});

备注：prepay_id 通过微信支付统一下单接口拿到，paySign 采用统一的微信支付 Sign 签名生成方法，注意这里 appId 也要参与签名，appId 与 config 中传入的 appId 一致，即最后参与签名的参数有appId, timeStamp, nonceStr, package, signType。

微信支付统一下单接口文档：http://pay.weixin.qq.com/wiki/doc/api/index.php?chapter=9_1

微信支付签名算法：http://pay.weixin.qq.com/wiki/doc/api/index.php?chapter=4_3

微信支付开发教程：https://mp.weixin.qq.com/paymch/readtemplate?t=mp/business/course3_tmpl&lang=zh_CN

在商户平台找到一份文档。

传送门

这里给了比较详细的资料，也给出了js示例：

实例演化：

1.点击支付调取支付接口

$('#pay_vip').click(function(){
location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=公司提供&redirect_uri=https%3a%2f%2fapp.zhugezhidai.com%2finterface%2ftemplate%2fpay.html&response_type=code&scope=snsapi_base&state=xxxx_state#wechat_redirect';
})

重定向页面

2.获取code

function getQueryString(name){
var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)","i");
var i = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
};
//alert(getQueryString("code"));
var code = getQueryString('code');

3.code 传给后台返回值发起微信支付

$.ajax({
async:false,
url: urls + "/gzhpay?code="+code,
type: 'get',
success:function(res){

console.log(res);

var appId = res.data.appid;

sessionStorage.setItem('addId',appId);

var timeStamp = res.data.timeStamp;

sessionStorage.setItem("timeStamp",timeStamp);

需要将参数换成自己的就行，这样就算结束了

对于微信公共文档网址（https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6）可以参考

web h5微信公众号支付操作方式

开发

猜你喜欢