pay_wx_pub.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  9. </head>
  10. <body>
  11. <div>点击如下按钮,发起支付的测试</div>
  12. <div>
  13. <button id="wx_pub">微信公众号</button>
  14. </div>
  15. </body>
  16. <script>
  17. let shopOrderId = undefined;
  18. let payOrderId = undefined;
  19. // let server = 'http://127.0.0.1:48080';
  20. let server = 'http://niubi.natapp1.cc';
  21. // TODO openid
  22. let openid = "ockUAwIZ-0OeMZl9ogcZ4ILrGba0";
  23. $(function() {
  24. // 获得 JsapiTicket
  25. // 参考 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 文档
  26. $.ajax({
  27. url: server + "/app-api/wx/mp/create-jsapi-signature?url=" + document.location.href,
  28. method: 'POST',
  29. success: function( result ) {
  30. if (result.code !== 0) {
  31. alert('获取 JsapiTicket 失败,原因:' + result.msg)
  32. return;
  33. }
  34. var jsapiTicket = result.data;
  35. jsapiTicket.jsApiList = ['chooseWXPay'];
  36. jsapiTicket.debug = false;
  37. // 初始化 JS
  38. wx.config(jsapiTicket);
  39. }
  40. });
  41. // 自动发起商城订单编号
  42. $.ajax({
  43. url: server + "/app-api/shop/order/create",
  44. method: 'POST',
  45. success: function( result ) {
  46. if (result.code !== 0) {
  47. alert('创建商城订单失败,原因:' + result.msg)
  48. return;
  49. }
  50. shopOrderId = result.data.id;
  51. payOrderId = result.data.payOrderId;
  52. console.log("商城订单:" + shopOrderId)
  53. console.log("支付订单:" + payOrderId)
  54. }
  55. })
  56. })
  57. // 微信公众号
  58. $( "#wx_pub").on( "click", function() {
  59. if (typeof WeixinJSBridge == "undefined") {
  60. // if (document.addEventListener) {
  61. // document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  62. // } else if (document.attachEvent) {
  63. // document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
  64. // document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  65. // }
  66. alert('微信支付,只支持在微信客户端中使用!');
  67. return;
  68. }
  69. if (navigator.userAgent.indexOf('wechatdevtools') >= 0) {
  70. alert('微信支付,无法在微信开发者工具中使用!请使用微信客户端!');
  71. return;
  72. }
  73. // 提交支付
  74. // 参考 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 文档
  75. // 参考 https://segmentfault.com/a/1190000020704650 文档
  76. $.ajax({
  77. url: server + "/app-api/pay/order/submit",
  78. method: 'POST',
  79. dataType: "json",
  80. contentType: "application/json",
  81. data: JSON.stringify({
  82. "id": payOrderId,
  83. "channelCode": 'wx_pub',
  84. "channelExtras": {
  85. "openid": openid
  86. }
  87. }),
  88. success: function( result ) {
  89. if (result.code !== 0) {
  90. alert('提交支付订单失败,原因:' + result.msg)
  91. return;
  92. }
  93. alert('点击确定,开始微信支付');
  94. // 开始调用微信支付
  95. let data = result.data.invokeResponse;
  96. wx.chooseWXPay({
  97. timestamp: data.timeStamp,
  98. nonceStr: data.nonceStr,
  99. package: data.packageValue,
  100. signType: data.signType,
  101. paySign: data.paySign,
  102. success: function (res) {
  103. alert(JSON.stringify(res));
  104. },
  105. error: function(e) {
  106. alert(JSON.stringify(e));
  107. }
  108. });
  109. }
  110. })
  111. });
  112. </script>
  113. </html>