<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>支付测试页</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="qrcode.min.js" type="text/javascript"></script>
</head>
<body>
<div>点击如下按钮，发起支付宝扫码支付的测试</div>
<div>
<button id="alipay_wap">支付宝扫码支付</button>
</div>
<div id="qrcode"></div>
</body>
<style>
#qrcode{
padding-left: 20px;
padding-top: 20px;
}
</style>
<script>
let shopOrderId = undefined;
let payOrderId = undefined;
let server = 'http://127.0.0.1:48080';
$(function() {
// 自动发起商城订单编号
$.ajax({
url: server + "/app-api/shop/order/create",
method: 'POST',
success: function( result ) {
if (result.code !== 0) {
alert('创建商城订单失败，原因：' + result.msg)
return;
}
shopOrderId = result.data.id;
payOrderId = result.data.payOrderId;
console.log("商城订单：" + shopOrderId)
console.log("支付订单：" + payOrderId)
}
})
});
// 支付宝扫码支付
$( "#alipay_wap").on( "click", function() {
// 提交支付
$.ajax({
url: server + "/app-api/pay/order/submit",
method: 'POST',
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
"id": payOrderId,
"channelCode": 'alipay_qr'
}),
success: function( result ) {
if (result.code !== 0) {
alert('提交支付订单失败，原因：' + result.msg)
return;
}
//提交支付后返回的参数
let data = result.data.invokeResponse;
new QRCode($("#qrcode")[0],{
text: data.qrCode, //内容
width:98, //宽度
height:98, //高度
correctLevel: 3,//二维码纠错级别
background: "#ffffff",//背景颜色
foreground: "#000000"//二维码颜色
});
console.log("data.qrCode===",data.qrCode)
}
})
});
</script>
</html>