H5支付前端接入

目前主流的 H5 支付渠道包括：

• 支付宝支付
• 微信支付
• 银联云闪付

支付宝支付

1. 标准流程

   graph LR
       A[创建订单] --> B[获取orderNo]
       B --> C[请求支付订单]
       C --> D[获取payUrl]
       D --> E[提交表单]
       E --> F[完成支付]
       F --> G[返回商户页面]
       G --> H[主动查询订单状态或刷新查询，来决定下一步]
   

2. 表单提交实现

   支付宝返回的payUrl包含完整的支付表单 HTML。以下提供两种表单提交方式：

   • 方式一：使用 DOMParser（推荐）

   const parser = new DOMParser();
   const doc = parser.parseFromString(payUrl, "text/html");
   const payForm = doc.querySelector("form");
   
   if (!payForm) {
     throw new Error("支付表单解析失败");
   }
   
   document.body.appendChild(payForm);
   payForm.submit();
   

   • 方式二：直接 DOM 操作

   const container = document.createElement("div");
   container.innerHTML = payUrl;
   document.body.appendChild(container);
   
   // 需要注意form是否唯一，拿到的form是否准确
   const form = document.forms[0];
   if (!form) {
     throw new Error("支付表单不存在");
   }
   
   form.submit();
   

微信

微信支付的接入流程与支付宝类似，但在具体实现细节上有所差异：

• 需要区分微信内外环境
• 微信内使用 JSAPI 支付
• 微信外使用 H5 支付

云闪付/银联

银联云闪付提供统一的支付接口，支持多家银行卡支付。具体接入流程请参考银联官方文档。