pay_alipay_qr.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
  6. <title>支付测试页</title>
  7. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  8. <script src="qrcode.min.js" type="text/javascript"></script>
  9. </head>
  10. <body>
  11. <div>点击如下按钮,发起支付宝扫码支付的测试</div>
  12. <div>
  13. <button id="alipay_wap">支付宝扫码支付</button>
  14. </div>
  15. <div id="qrcode"></div>
  16. </body>
  17. <style>
  18. #qrcode{
  19. padding-left: 20px;
  20. padding-top: 20px;
  21. }
  22. </style>
  23. <script>
  24. let shopOrderId = undefined;
  25. let payOrderId = undefined;
  26. let server = 'http://127.0.0.1:48080';
  27. $(function() {
  28. // 自动发起商城订单编号
  29. $.ajax({
  30. url: server + "/app-api/shop/order/create",
  31. method: 'POST',
  32. success: function( result ) {
  33. if (result.code !== 0) {
  34. alert('创建商城订单失败,原因:' + result.msg)
  35. return;
  36. }
  37. shopOrderId = result.data.id;
  38. payOrderId = result.data.payOrderId;
  39. console.log("商城订单:" + shopOrderId)
  40. console.log("支付订单:" + payOrderId)
  41. }
  42. })
  43. });
  44. // 支付宝扫码支付
  45. $( "#alipay_wap").on( "click", function() {
  46. // 提交支付
  47. $.ajax({
  48. url: server + "/app-api/pay/order/submit",
  49. method: 'POST',
  50. dataType: "json",
  51. contentType: "application/json",
  52. data: JSON.stringify({
  53. "id": payOrderId,
  54. "channelCode": 'alipay_qr'
  55. }),
  56. success: function( result ) {
  57. if (result.code !== 0) {
  58. alert('提交支付订单失败,原因:' + result.msg)
  59. return;
  60. }
  61. //提交支付后返回的参数
  62. let data = result.data.invokeResponse;
  63. new QRCode($("#qrcode")[0],{
  64. text: data.qrCode, //内容
  65. width:98, //宽度
  66. height:98, //高度
  67. correctLevel: 3,//二维码纠错级别
  68. background: "#ffffff",//背景颜色
  69. foreground: "#000000"//二维码颜色
  70. });
  71. console.log("data.qrCode===",data.qrCode)
  72. }
  73. })
  74. });
  75. </script>
  76. </html>