js网页唤起支付宝进行支付
在做uni-app项目中,打包成 ios App的时候,为了绕过苹果支付的审核,所以用的 webview 加载支付宝的网页支付,进行付款
具体实现流程:
前端通过 url 将商品单价,商品数量,商品总额等后端所需要的参数传到我们写的 html支付 页面中,
支付页面拿到参数后再像后端发起订单的请求,后端将订单返回回来,我们通过后端返回回来的订单数据,拉起支付宝发起支付!
整个过程其实不难,代码也很简单,详情请看代码......
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title></title> 8 </head> 9 <body> 10 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 11 <script type="text/javascript"> 12 function getRequest() { 13 var url = location.search; //获取url中"?"符后的字串 14 var theRequest = new Object(); 15 if (url.indexOf("?") != -1) { 16 var str = url.substr(1); 17 strs = str.split("&"); 18 for(var i = 0; i < strs.length; i ++) { 19 theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]); 20 } 21 } 22 return theRequest; 23 } 24 let parameter = getRequest() 25 $.ajax({ 26 url: 'http://server.zhongqu.net.cn/api/user/payment/v1', 27 type: "post", 28 headers: { 29 'Content-Type': 'application/json;charset=utf8', 30 'x-access-token': parameter.token 31 }, 32 dataType: "json", 33 data: JSON.stringify({ 34 'goodId': parameter.goodId, 35 'fee': parameter.fee, 36 'amount': parameter.amount, 37 'totalFee': parameter.totalFee 38 }), 39 success: function(data) { 40 let temp = document.createElement("form"); 41 temp.action = 'https://openapi.alipay.com/gateway.do?charset=utf-8' 42 temp.method = "post"; 43 temp.style.display = "none"; 44 let params = data.data; 45 let strs = params.split('&'); 46 for (let v of strs) { 47 let arr = v.split('='); 48 var opt = document.createElement("input"); 49 opt.name = arr[0]; 50 opt.value = decodeURIComponent(arr[1]); 51 temp.appendChild(opt); 52 } 53 document.body.appendChild(temp); 54 temp.submit(); 55 } 56 }); 57 </script> 58 </body> 59 </html>