index.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html lang="en">
  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. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <blockquote><h1>快来给钱</h1></blockquote>
  12. <p id="result">result: </p>
  13. <input type="button" id="pay" value="支付咯" />
  14. <p id="p"></p>
  15. </body>
  16. <script type="application/javascript">
  17. // 调试时可以通过在页面定义一个元素,打印信息,使用alert方法不够优雅
  18. function log(obj) {
  19. $("#result").append(obj).append(" ").append("<br />");
  20. }
  21. $(document).ready(async () => {
  22. let data = await $.get("/token" + location.search, function(data){
  23. return data;
  24. });
  25. $("#pay").click(function() {
  26. tradePay(data);
  27. });
  28. $("#closeButton").click(function() {
  29. AlipayJSBridge.call('closeWebview');
  30. });
  31. });
  32. // 由于js的载入是异步的,所以可以通过该方法,当AlipayJSBridgeReady事件发生后,再执行callback方法
  33. function ready(callback) {
  34. if (window.AlipayJSBridge) {
  35. callback && callback();
  36. } else {
  37. document.addEventListener('AlipayJSBridgeReady', callback, false);
  38. }
  39. }
  40. function tradePay(tradeNO) {
  41. ready(function(){
  42. // 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)
  43. AlipayJSBridge.call("tradePay", {
  44. tradeNO: tradeNO
  45. }, function (data) {
  46. log(JSON.stringify(data));
  47. if ("9000" == data.resultCode) {
  48. log("支付成功");
  49. }
  50. });
  51. });
  52. }
  53. </script>
  54. </html>