php 公众号内h5支付宝支付,H5微信支付、支付宝支付

准备工作

1.绑定域名：

登录微信公众平台 --> 公众号设置 --> 功能设置 --> 填写“JS接口安全域名”

3.配置微信网页授权

官方授权url如下,各参数意义参考: 微信网页授权,或者下方图片

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

参数说明

一、微信支付

1.新建aaa.html，作为授权页面(其实就是一个授权url)，授权成功后会根据(redirect_uri)跳转到指定地址，如bbb.html(放在服务器上的bbb.html)

image.png

var redirect_uri = encodeURIComponent('bbb.html);

window.location.href =

'https://open.weixin.qq.com/connect/oauth2/authorize?appid=******38bc878811c&redirect_uri=' + redirect_uri +

'&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect';

2.在当前bbb.html的url上会有授权后返回的code参数,取出code值作为参数调取后端自定义接口，获取返回值openid以供支付时使用等

const code = getQueryString("code"); //根据当前url获取code作为参数

const params = {code: code}

$.ajax({

url: base_url + '*********',

type: 'post',

data: JSON.stringify(params),

dataType: 'json',

contentType: 'application/json;charset=UTF-8',

success: function (res) {

if (res.code == 0) {

var openid=res.data.openid.openid);//获取openid

}

}

})

3.取当前支付页面的地址(？号以前的)，此地址前提在微信商户平台添加好，作为参数调取后端自定义接口，获取微信的返回值来配置wx.config

const wxInitParams = { //获取当前页面路径作为参数传参，根据返回值配置微信

url: location.href.split('?')[0],

}

$.ajax({

url: base_url + '/weChatH5/authorized/weChatH5/verifyConfigForWeChatH5',

type: 'post',

data: JSON.stringify(wxInitParams),

contentType: 'application/json;charset=UTF-8',

success: function (res) {

if (res.code == 0) {

const shareobj = {

'appId': '*********c878811c',

'timestamp': res.data.content.timestamp,

'nonceStr': res.data.content.nonceStr,

'signature': res.data.content.signature,

'jsApiList': ['chooseWXPay']

}

wxInit(shareobj)

}

}

})

function wxInit(shareobj) {

wx.config({

debug: false,

appId: 'wxf3b1638bc878811c',

nonceStr: shareobj.nonceStr,

signature: shareobj.signature,

timestamp: shareobj.timestamp,

jsApiList: ['chooseWXPay']

});

}

4.先调取后端自定义接口，获取返回值，再在wx.ready中调 wx.chooseWXPay微信支付

if (val == 'wx') { //判断选择微信支付还是其他支付方式，自行判断

const params = {

id: window.sessionStorage.getItem('courseId'), //页面初始加载带的id

phone: phone, //手机号

smsCode: code, //验证码

channel: 'wxPay', //支付方式 wxPay微信 aliPay支付宝

}

$.ajax({

url: base_url + '/weChatH5/authorized/weChatH5/payMoneyForWeChatH5',

type: 'post',

headers: {

openid: window.sessionStorage.getItem('openid'),

appToken: window.sessionStorage.getItem("appToken")

},

data: JSON.stringify(params),

contentType: 'application/json;charset=UTF-8',

success: function (res) {

if (res.code == 0) {

const poas = res.data.content;

wx.ready((res) => {

wx.chooseWXPay({

'appId': poas.appId,

'timestamp': poas.timeStamp,

'nonceStr': poas.nonceStr,

'package': poas.package,

'signType': poas.signType,

'paySign': poas.paySign,

success: function (res) {

if (res.errMsg == 'chooseWXPay:ok') {

window.location.href = 'paySuccess.html'

}

},

cancel: function (err) {

Toast('支付失败')

}

})

});

wx.error(function (res) {

Toast("wx.error")

});

} else {

Toast(res.msg);

}

}

})

}

注意：这样就可以支付成功了，支付成功后会跳转自定义的paySuccess.html页面，此方法只是微信支付的思路流程

二、支付宝支付

1.支付宝支付比微信简单多了，也许是后端都配置好了，支付宝支付要在非微信浏览器里面才可以

image.png

2.根据后端自定义的接口传相应的参数(比如用户id、手机号、价格、支付方式等)，成功后从返回值中取出类似form的表单的地址，这个就是拉起支付宝的东西，将此插入到当前页，打开就可以看到支付宝被拉起了

image.png

3.下面就是此页面所有的代码

$(function () {

function getQueryString(name) { //去url上的id

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]);

return null;

}

var phone = getQueryString('phone'); //手机号

var code = getQueryString('code'); //验证码

var id = getQueryString('id'); //课程id

var openid = getQueryString('openid');

var appToken = getQueryString('appToken');

//判断是否在微信浏览器

var ua = navigator.userAgent.toLowerCase();

var isWeixin = ua.indexOf('micromessenger') != -1;

if (!isWeixin) {

const params = {

id: id, //页面初始加载带的id

phone: phone, //用户手机号

smsCode: code, //用户验证码

channel: 'aliPay', //支付方式 wxPay微信 aliPay支付宝

}

/* 支付宝支付，传递后台要求的参数，返回值是一个form表单即唤起支付宝的地址 */

$.ajax({

url: base_url + '******/payMoneyForWeChatH5',

type: 'post',

dataType: "html",

headers: {

openid: openid,

appToken: appToken

},

data: JSON.stringify(params),

contentType: 'application/json;charset=UTF-8',

success: function (res) {

var res = JSON.parse(res);

if (res.code == 0) {

$('body').append(res.data.content[0].aliString);

$("form").attr("target", "_blank");

} else {

alert(res.msg)

}

},

})

}

})

4哈哈 。。。大功告成

链接：H5微信分享可以参考H5微信分享