Stripe技术问题：如何通过JavaScript添加并存储表单额外字段

你的问题核心很明确：客户端的projectLink和additionalInfo字段没有随支付请求一起发送到服务器，导致服务器虽然在创建Booking时尝试读取这两个字段，但根本没收到数据。咱们一步步修改客户端代码就能搞定：

1. 修复pay函数，传递额外字段 #

首先，你的pay函数定义里没接收projectLink和additionalInfo参数，而且发送请求时只传了orderData，没把这两个字段加进去。修改如下：

/*
* Collect card details and pay for the order
*/
var pay = function (stripe, card, clientSecret, projectLink, additionalInfo) { // 新增两个参数
  changeLoadingState(true);
  // Collects card details and creates a PaymentMethod
  stripe
    .createPaymentMethod("card", card)
    .then(function (result) {
      if (result.error) {
        showError(result.error.message);
      } else {
        // 合并orderData和额外字段，一起发送到服务器
        const requestData = {
          ...orderData,
          paymentMethodId: result.paymentMethod.id,
          projectLink: projectLink,
          additionalInfo: additionalInfo
        };
        return fetch("/pay", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(requestData)
        });
      }
    })
    .then(function (result) {
      return result.json();
    })
    .then(function (response) {
      if (response.intent.error) {
        showError(response.intent.error);
      } else if (response.intent.requiresAction) {
        // 这里也要把额外字段传给handleAction
        handleAction(response.intent.clientSecret, projectLink, additionalInfo);
      } else {
        orderComplete(response.intent.clientSecret);
      }
    });
};

2. 修复handleAction函数，二次请求也传递字段 #

当支付需要额外验证（比如3D Secure）时，handleAction会再次调用/pay接口，这时候同样要把两个额外字段传过去，不然第二次请求服务器还是拿不到数据：

var handleAction = function (clientSecret, projectLink, additionalInfo) { // 新增两个参数
  stripe.handleCardAction(clientSecret).then(function (data) {
    if (data.error) {
      showError("Your card was not authenticated, please try again");
    } else if (data.paymentIntent.status === "requires_confirmation") {
      fetch("/pay", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
          paymentIntentId: data.paymentIntent.id,
          projectLink: projectLink, // 新增字段
          additionalInfo: additionalInfo // 新增字段
        })
      })
      .then(function (result) {
        return result.json();
      })
      .then(function (json) {
        if (json.error) {
          showError(json.error);
        } else {
          orderComplete(clientSecret);
        }
      });
    }
  });
};

3. 验证服务器端接收 #

你的服务器端代码已经正确在Booking.create里读取req.body.projectLink和req.body.additionalInfo，这部分没问题。可以在/pay接口的开头加一行日志，确认数据是否收到：

router.route('/pay')
 .post(async (req, res, next) => {
   console.log("收到的请求体：", req.body); // 新增日志，验证字段是否存在
   // ... 其余代码不变
 });

这样修改后，客户端在提交表单时，会把projectLink和additionalInfo字段随支付请求一起发送到服务器，服务器就能正确把这些数据存入数据库了。

内容的提问来源于stack exchange，提问作者Frank