为什么非微信内置浏览器调用微信支付失败? - 知乎2被浏览1169分享邀请回答0添加评论分享收藏感谢收起微信端支付宝支付，iframe改造，解决微信中无法使用支付宝付款和弹出“长按地址在浏览器中打开”
作者:书虫纪庆
微信对支付宝的链接屏蔽了，
/gateway.do?_input_charset=utf-8notify_url=http%3A%2F%%2Findex.php%3Fg%3DPay%26m%3DAlipay%26a%3Dnotify_urlout_trade_no=partner=6705payment_type=1return_url=http%3A%2F%%2Findex.php%3Fg%3DPay%26m%3DAlipay%26a%3Dreturn_urlseller_id=6705service=alipay.wap.create.direct.pay.by.usershow_url=%E5%8A%A9%E5%BA%97%E5%AE%9D%E7%9A%84%E5%95%86%E5%93%81%E8%AE%A2%E5%8D%95subject=%E5%8A%A9%E5%BA%97%E5%AE%9D%E7%9A%84%E5%95%86%E5%93%81%E8%AE%A2%E5%8D%95total_fee=0.01sign=4d9d7f1c4ab82f4a80edd38b5e9c8d74sign_type=MD5
这种地址，直接无法访问。
1.通过iframe避开屏蔽。
//建立请求
$alipaySubmit = new AlipaySubmit($alipay_config);
$html_text = $alipaySubmit-&buildRequestForm($parameter,"get", "确认");
echo $html_
我们来看看buildRequestForm方法中的内容，
* 建立请求，以表单HTML形式构造（默认）
* @param $para_temp 请求参数数组
* @param $method 提交方式。两个值可选：post、get
* @param $button_name 确认按钮显示文字
* @return 提交表单HTML文本
function buildRequestForm($para_temp, $method, $button_name) {
//待请求参数数组
$para = $this-&buildRequestPara($para_temp);
$sHtml = "&form id='alipaysubmit' name='alipaysubmit' action='".$this-&alipay_gateway_new."_input_charset=".trim(strtolower($this-&alipay_config['input_charset']))."' method='".$method."'&";
while (list ($key, $val) = each ($para)) {
$sHtml.= "&input type='hidden' name='".$key."' value='".$val."'/&";
//submit按钮控件请不要含有name属性
$sHtml = $sHtml."&input type='submit'
value='".$button_name."' style='display:'&&/form&";
$sHtml = $sHtml."&script&document.forms['alipaysubmit'].submit();&/script&";
return $sH
它会自动生成一个表单提交，提交到/gateway.do这个页面去处理，这个时候，微信就屏蔽掉了。
//建立请求
$alipaySubmit = new AlipaySubmit($alipay_config);
$html_text = $alipaySubmit-&getHtml($parameter);
$content = '&iframe src="'.$html_text.'" name="iframepage" id="iframepage"
scrolling="no" frameborder="0"&&/iframe&';
$this-&assign('content',$content);
$this-&display();
这里的核心就是getHtml中的内容，这个方法是新加的，它可以拼接出支付宝调用支付的地址及所需要的各种参数。
* 获取地址，用于微信中iframe嵌入使用
function getHtml($para_temp) {
$para = $this-&buildRequestPara($para_temp);
while (list ($key, $val) = each ($para)) {
$init.="".$key."=".urlencode($val);
$init=$this-&alipay_gateway_new."_input_charset=".trim(strtolower($this-&alipay_config['input_charset'])).$
这里的urlencode很重要，可以对内容进行一些url处理。还有就是buildRequestPara方法，会自动生成签名，签名很重要，不然无法完成支付宝支付流程。
* 生成要请求给支付宝的参数数组
* @param $para_temp 请求前的参数数组
* @return 要请求的参数数组
function buildRequestPara($para_temp) {
//除去待签名参数数组中的空值和签名参数
$para_filter = paraFilter($para_temp);
//对待签名参数数组排序
$para_sort = argSort($para_filter);
//生成签名结果
$mysign = $this-&buildRequestMysign($para_sort);
//签名结果与签名方式加入请求提交参数组中
$para_sort['sign'] = $
$para_sort['sign_type'] = strtoupper(trim($this-&alipay_config['sign_type']));
return $para_
生成签名para_temp中的参数一个都不能少，
//构造要请求的参数数组，无需改动
$parameter = array(
=& $alipay_config['service'],
=& $alipay_config['partner'],
"seller_id"
=& $alipay_config['seller_id'],
"payment_type"
=& $alipay_config['payment_type'],
"notify_url"
=& C('site_url').U('Pay/Alipay/notify_url'),
"return_url"
=& C('site_url').U('Pay/Alipay/return_url'),
"_input_charset"
=& trim(strtolower($alipay_config['input_charset'])),
"out_trade_no"
=& $out_trade_no,
=& $subject,
"total_fee"
=& $total_fee,
"show_url"
=& $show_url,
//其他业务参数根据在线开发文档，添加参数.文档地址:https://d
oc./doc2/detail.htm?spm=a219a..0.2Z6TSktreeId=60articleId=103693docType=1
//如"参数名"=& "参数值"
注：上一个参数末尾需要“,”逗号。
为了让页面好看一些，我没有直接echo输出，而是写了一个页面，pay.html
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&meta http-equiv="Cache-Control" content="no-Cache" /&
&meta http-equiv="Cache-Control" content="max-age=0" /&
&meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable="&
&meta name="apple-mobile-web-app-capable" content="yes"&
&meta name="apple-mobile-web-app-status-bar-style" content="black"&
&meta name="format-detection" content="telephone=no"&
&link href="/Public/css/bootstrap.min.css" rel="stylesheet" type="text/css"&
&script src="/Public/js/jquery-1.10.2.min.js" type="text/javascript"&&/script&
&title&支付宝支付&/title&
.scroll-wrapper{
bottom: 0;
-webkit-overflow-scrolling:
overflow-y:
.scroll-wrapper iframe {
height: 100%;
width: 100%;
&div class="scroll-wrapper"&
{sh:$content}
有这个页面，能够更好的处理iframe的自适应效果。
总结：调试过程中遇到一些问题，1.iframe显示效果，不能很好的自适应，通过上面的css很好的解决了。
2.如何使用iframe。一开始不太懂，其实iframe中的src就是一个连接，把微信的屏蔽连接放上去就可以了。
3.总是报签名错误，在getHtml的参数中加上urlencode处理好了url地址。
4.支付成功后，页面跳转不出iframe，有待优化！基本ok了。微信内置浏览器H5页面支付功能实例_茹梦_新浪博客
微信内置浏览器H5页面支付功能实例
1.查看微信支付功能网页端调起支付API，开发步骤流程https://pay./wiki/doc/api/jsapi.php?chapter=7_3
设置测试授权目录地址：https://mp./cgi-bin/frame?nav=10010&t=business/index_frame&iframe=/paymch/business?action=firstentry&token=&lang=zh_CN​
（一般情况下，测试授权目录地址写到最后一层级就可以了~）
设置网页微信授权安全域名https://mp./advanced/advanced?action=table&token=&lang=zh_CN​（接口权限—网页账号—修改）
设置需要在微信里面测试的个人微信号的白名单，以方便测试
2.微信支付code获取，微信支付授权（网页授权获取用户基本信息）安步骤开发，https://mp./wiki/17/c0f37d13d5d2c37b468d75.html
获得code之后，
&在向后端​服务器发起获取open_id的接口，以获得open_
3.微信版本号的判断
&先由前端处理只能判断是否在微信里面展示，后由后端服务器出一个判断微信版本号的接口，来获取ticket，为后面支付验证取得基础
4.微信jssdk接口验证:
& 其中的时间戳字段
​ & &
&&wx.config({//jssdk配置信息
& & debug: false, //
开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
& & appId: "*********", //
必填，公众号的唯一标识
& & timestamp: now, //
必填，生成签名的时间戳（此字段必须小写）
& & nonceStr: nonceStr, //
必填，生成签名的随机串
& & signature: sign, //
必填，签名，见附录1（签名里面即signature=sha1(string1)使用sha1做安全加密）
& & jsApiList: [
& 'checkJsApi',
& 'chooseWXPay'
& & & ] //
必填，需要使用的JS接口列表，所有JS接口列表见附录2
5.微信支付调用功能
&发起一个微信支付请求
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的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
下面是一完整的微信支付实例代码，看到的人，请多多指教~
​​​​
博客等级：
博客积分：0
博客访问：2,577
关注人气：0
荣誉徽章：微信支付如何实现内置浏览器的H5页面支付
作者：荒鱼
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了微信支付如何实现内置浏览器的H5页面支付的相关资料,需要的朋友可以参考下
因为项目需要，要在H5页面中加入微信支付，所以便去尝试，只想说真的很坑，尤其调试起来不方便
这是微信的官方API文档
微信支付的准备工作
申请公众号，申请开通支付，这个很简单，自行百度
申请好之后 在微信公众平台页面的“微信支付”页面中的“开发配置”Tab上配置“支付授权目录”，“测试授权目录”，“测试白名单”
在微信公众平台页面的“开发者中心”中找到“AppID(应用ID)”和“AppSecret(应用密钥)”
在商户平台中找到微信支付分配的商户号，以及自己配置一个商户支付密钥
首先通过微信支付的api 获得支付用的prepay_id，这里需要用到上面提到的“AppID(应用ID)”，“AppSecret(应用密钥)”，“微信支付分配的商户号”，“商户支付密钥”以及其他的一些参数（具体参照微信开发文档）用MD5加密成签名（第一次签名）获得prepay_id后，用prepay_id和一些其他参数（具体参照微信开发文档）用MD5加密成签名（第二次签名）然后在前端通过微信内置浏览器提供的js API，WeixinJSBridge.invoke来调用微信支付的弹出页面，这里需要用到上面的第二次的签名
具体代码如下
$.get('/xxx',function(data){
if(data && data !== ""){
var _data = $.parseJSON(data)[0];
if(parseInt(_data.userAgent) & 5){
alert('您的微信版本低于5.0，无法使用微信支付！');
WeixinJSBridge.invoke('getBrandWCPayRequest',{
'appId': _data.appId,
'timeStamp': _data.timeStamp,
'nonceStr': _data.nonceStr,
'package': 'prepay_id=' + _data.packageOne,
'signType': _data.signType,
'paySign': _data.paySign
},function(res){
if(res.err_msg === 'get_brand_wcpay_request:ok'){
alert('支付成功，返回订单列表！');
}else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
alert('取消支付！');
几个容易失败点需要注意
支付链接和在开发平台配置的链接不匹配
总共需要2次签名，并且所需的参数是不同的，在JS中用到的签名是第二次签名，不要混淆参数传递的不能有错
如果body中有中文需要转义其中还有一些问题没有完全解决，就是位置支付没有一个判断失效的时间，如果在微信支付的弹出层停留时间太久了，可能这个订单在我们网站上已经失效了，可在微信支付中仍然能支付成功，如果有高人知道这个问题怎么解决的，希望能告诉解决办法
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
在手机浏览器中，网页可以通过weixin://xxx协议调用微信进入支付模块。但现在网页是在微信webview中打开的，用weixin://协议貌似不起作用了。有替代的方案吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
生成二维码，让客户长按识别
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：