具体实现流程:
前端通过 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>
浙公网安备 33010602011771号