UniApp H5支付宝支付：搞定Form表单，轻松调用支付！

前端

2023-08-24 14:54:34

支付宝支付中的 Form 表单及其在 UniApp H5 中的处理

什么是支付宝支付中的 Form 表单？

支付宝支付返回的 Form 表单包含了支付所需的关键信息，包括商户订单号、支付金额、商品名称等。它本质上是一个 HTML 表单，包含一系列输入字段和按钮，用户需要填写相关信息并单击提交按钮才能完成支付。

如何在 UniApp H5 中处理 Form 表单？

要处理支付宝支付返回的 Form 表单，需要遵循以下步骤：

1. 接收 Form 表单

首先，需要在 UniApp H5 中接收支付宝支付返回的 Form 表单。可以使用 JavaScript 的 XMLHttpRequest 对象或 fetch() 方法来实现。

代码示例：

const request = new XMLHttpRequest();
request.open('POST', 'https://example.com/payment/alipay');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(formData);

2. 解析 Form 表单

接收 Form 表单后，需要解析其内容以提取所需信息。可以使用 JavaScript 的 DOMParser 对象或正则表达式来实现。

代码示例：

const parser = new DOMParser();
const doc = parser.parseFromString(formData, 'text/html');
const inputs = doc.querySelectorAll('input');
const data = {};
for (let i = 0; i < inputs.length; i++) {
  data[inputs[i].name] = inputs[i].value;
}

3. 调用支付宝支付

提取到必要信息后，可以使用支付宝支付 SDK 调用支付。支付宝支付 SDK 可在支付宝开发者中心下载并集成。

代码示例：

const alipay = window.AlipayJSBridge;
alipay.call('tradePay', data, function (result) {
  // 处理支付结果
});

示例代码

以下是完整示例代码，演示如何在 UniApp H5 中处理支付宝支付返回的 Form 表单并调用支付：

const request = new XMLHttpRequest();
request.open('POST', 'https://example.com/payment/alipay');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(formData);

request.onload = function () {
  const parser = new DOMParser();
  const doc = parser.parseFromString(this.responseText, 'text/html');
  const inputs = doc.querySelectorAll('input');
  const data = {};
  for (let i = 0; i < inputs.length; i++) {
    data[inputs[i].name] = inputs[i].value;
  }

  const alipay = window.AlipayJSBridge;
  alipay.call('tradePay', data, function (result) {
    // 处理支付结果
  });
};