程序员Web 前端开发

微信服务号开发——如何在微信中使用支付宝支付

2016-10-21  本文已影响12487人  luichooy

由于微信支付宝的封杀大战,导致无法在微信平台中使用支付宝付款。但是考虑到某些用户可能没有开通微信支付,因此在一些应用情景下,实现微信端支付宝付款还是很有必要。最近撸的代码正好有这个需求,所以研究了一下分享出来,希望对需要的小伙伴有所帮助。

实现思路:

在微信中,当我们点击支付宝付款(点击第一张图中的“确定”)时,先到一个跳转页面,跳转页面中的JS逻辑如下所示,

  1. 判断当前的运行环境,如果是微信内置的浏览器,则说明是在微信平台中,此时通过document.body.innerHTML = '<img src="img/paySkip.png" id="mask" />';将页面内容改为一张图片,提示用户点击右上角 ... ,选择在手机浏览器中打开;
  2. 用户在手机浏览器中打开之后,则执行if (!isWeixin) {}中的逻辑,通过ajax向后台请求数据;
  3. 得到ajax返回的data后,运行data中的script代码,就会接入支付宝的移动网络支付功能(data中的内容为dom(form表单,表单中的数据均已由后台提供)+script(提交form表单的js代码))
选择支付方式.png 跳转页面—选择在浏览器中打开.png 在浏览器中打开后js提交表单就会自动跳转到该页面(该页面由支付宝接口提供).png

var orderNumber = url.split('&')[1].split('=')[1]; //判断当前环境是否为微信内置浏览器 var ua = navigator.userAgent.toLowerCase(); var isWeixin = ua.indexOf('micromessenger') != -1; var url = window.location.href; if (!isWeixin) {//非微信内置浏览器,说明已经在浏览器中打开了,执行这段逻辑 _ShowWaiting();//显示等待显示框 //封装好的ajax请求函数,通过ajax向后台请求数据 HTTPRequestFunc( "get", 'http://v1dev.ebbaba.com/Interface/json/PayService.ashx?pagetype=aliwebpay', { ordernum: orderNumber }, function(data){ _CloseWaiting(); //返回的数据为一个form表单和提交该form的script,通过提交该表单(提交到支付宝,提交的数据等一系列内容已经全部包含在后台返回的data数据中,我们只需要运行data中的script即可) var data = JSON.parse(data); if(data.status == 1){ document.body.innerHTML = data.data; //通过innerHTML添加的script代码不会自动执行,需要我们手动来执行 var scripts = document.body.getElementsByTagName("script"); for(var i=0;i<scripts.length;i++){ //一段一段执行script eval(scripts[i].innerHTML); } }else{ _CloseWaiting();//关闭等待显示框 mui.toast(data.info,{verticalAlign:"center", duration:"long"}); } }, function(status, info){ _CloseWaiting(); mui.toast(info,{verticalAlign:"center", duration:"long"}); }); }else{//微信浏览器,显示‘在浏览器中打开’图片 document.body.innerHTML = '<img src="img/paySkip.png" id="mask" />'; }

支付宝手机网站支付API

上一篇 下一篇

猜你喜欢

热点阅读