sdk-tutorial.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>SDK使用教程 - 极速支付</title>
  7. <meta name="description" content="极速支付SDK使用教程,包含安装配置、接口调用和示例代码。">
  8. <meta name="keywords" content="SDK教程,支付SDK,SDK使用,SDK集成">
  9. <link rel="stylesheet" href="../style.css">
  10. <style>
  11. .article-container {
  12. max-width: 800px;
  13. margin: 0 auto;
  14. padding: 40px 20px;
  15. }
  16. .article-header {
  17. margin-bottom: 40px;
  18. }
  19. .article-title {
  20. font-size: 2.5em;
  21. color: #3498db;
  22. margin-bottom: 20px;
  23. }
  24. .article-meta {
  25. color: #666;
  26. font-size: 0.9em;
  27. margin-bottom: 30px;
  28. }
  29. .article-content {
  30. line-height: 1.8;
  31. color: #333;
  32. }
  33. .article-content h2 {
  34. color: #2c3e50;
  35. margin: 40px 0 20px;
  36. font-size: 1.8em;
  37. }
  38. .article-content p {
  39. margin-bottom: 20px;
  40. }
  41. .article-content ul {
  42. margin-bottom: 20px;
  43. padding-left: 20px;
  44. }
  45. .article-content li {
  46. margin-bottom: 10px;
  47. }
  48. .code-block {
  49. background: #f5f5f5;
  50. padding: 15px;
  51. border-radius: 5px;
  52. margin: 20px 0;
  53. font-family: monospace;
  54. overflow-x: auto;
  55. }
  56. .back-to-list {
  57. display: inline-block;
  58. margin-top: 40px;
  59. color: #3498db;
  60. text-decoration: none;
  61. }
  62. .back-to-list:hover {
  63. text-decoration: underline;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <div class="article-container">
  69. <div class="article-header">
  70. <h1 class="article-title">SDK使用教程</h1>
  71. <div class="article-meta">
  72. <span>发布时间:2024-04-22</span>
  73. <span style="margin: 0 10px;">|</span>
  74. <span>作者:极速支付团队</span>
  75. </div>
  76. </div>
  77. <div class="article-content">
  78. <h2>一、SDK概述</h2>
  79. <p>极速支付SDK提供了简单易用的接口,帮助开发者快速集成支付功能。</p>
  80. <h2>二、安装配置</h2>
  81. <div class="code-block">
  82. // 使用npm安装
  83. npm install jsupay-sdk
  84. // 或使用yarn安装
  85. yarn add jsupay-sdk
  86. </div>
  87. <h2>三、初始化配置</h2>
  88. <div class="code-block">
  89. const Jsupay = require('jsupay-sdk');
  90. const client = new Jsupay({
  91. merchant_id: 'your_merchant_id',
  92. api_key: 'your_api_key',
  93. environment: 'production' // 或 'sandbox'
  94. });
  95. </div>
  96. <h2>四、接口调用示例</h2>
  97. <div class="code-block">
  98. // 创建支付订单
  99. const order = await client.createOrder({
  100. order_no: '202404220001',
  101. amount: 100.00,
  102. currency: 'CNY',
  103. notify_url: 'https://your-domain.com/notify'
  104. });
  105. // 查询订单状态
  106. const status = await client.queryOrder('202404220001');
  107. </div>
  108. <h2>五、注意事项</h2>
  109. <ul>
  110. <li>请妥善保管API密钥</li>
  111. <li>建议在测试环境完成测试后再上线</li>
  112. <li>注意处理异常情况</li>
  113. <li>定期更新SDK版本</li>
  114. </ul>
  115. </div>
  116. <a href="../index2.html" class="back-to-list">← 返回文章列表</a>
  117. </div>
  118. </body>
  119. </html>