Webflow按钮双功能实现：提交表单并跳转至支付页面

一、原有USAePay代码的问题排查 #

你的现有代码存在几个关键问题导致支付失败：

• 未闭合iframe内的<form>标签，表单结构不完整，无法正常提交
• 依赖iframe的onload事件判断支付结果逻辑不可靠：USAePay的支付结果通过服务器端重定向返回，iframe的onload无法准确捕获支付成功/失败状态
• 跨域限制：直接在iframe中提交第三方支付表单可能被浏览器跨域策略拦截

二、实现「先提交Webflow表单，再跳转Stripe支付」的可靠方案 #

该方案更贴合你的需求，核心逻辑是：拦截Webflow表单默认提交行为，先通过AJAX提交表单到Webflow，确认成功后再跳转至Stripe支付链接。

步骤1：获取Webflow表单提交端点 #

在Webflow编辑器中打开表单设置，进入「表单设置」→「动作」，复制Webflow提供的表单提交URL（格式通常为https://webflow.com/api/v1/form/xxxxxx）。

步骤2：替换自定义代码为以下实现 #

$(function() {
  let isProcessing = false;

  // 替换为你的Webflow表单ID
  $('#Sell-form').submit(function(e) {
    e.preventDefault();
    if (isProcessing) return;
    isProcessing = true;

    const form = $(this);
    const formData = form.serialize();
    const webflowFormUrl = '替换为你的Webflow表单提交URL'; // 填入步骤1复制的URL
    const stripePaymentUrl = '替换为你的Stripe支付链接'; // 如Stripe Checkout固定链接或动态生成链接

    // 1. 提交Webflow表单
    $.ajax({
      url: webflowFormUrl,
      method: 'POST',
      data: formData,
      contentType: 'application/x-www-form-urlencoded',
      success: function() {
        // 2. 表单提交成功后跳转Stripe支付
        window.location.href = stripePaymentUrl;
      },
      error: function() {
        alert('表单提交失败，请重试');
        isProcessing = false;
      }
    });
  });
});

步骤3：关键注意事项 #

• Stripe支付链接生成：可在Stripe后台创建固定「付款链接」，或通过Stripe API根据表单金额动态生成链接
• 表单验证：保留Webflow内置表单验证，确保用户填写内容合规后再触发提交逻辑
• 重复提交防护：通过isProcessing变量防止用户重复点击按钮

三、坚持使用USAePay支付的修复方案 #

若需继续使用USAePay，可采用隐藏表单替代iframe的方式修复：

$(function() {
  let submitted = false;

  $('#Sell-form').submit(function(e) {
    if (submitted) return true;
    e.preventDefault();
    submitted = true;

    const amount = $('#cc-amount').val();
    const cardName = $('#cc-name').val();
    const cardNumber = $('#cc-number').val();
    const cardExpir = $('#cc-exp').val();
    const cardCv2 = $('#cc-cv2').val();

    // 创建隐藏表单替代iframe，规避跨域问题
    const hiddenForm = $('<form>', {
      action: 'https://www.usaepay.com/gate.php',
      method: 'POST',
      target: '_top'
    });

    // 添加支付表单字段
    hiddenForm.append($('<input>', {type: 'hidden', name: 'UMkey', value: '你的API_KEY'}));
    hiddenForm.append($('<input>', {type: 'hidden', name: 'UMredirDeclined', value: 'https://gownshadchan.com/failure'}));
    hiddenForm.append($('<input>', {type: 'hidden', name: 'UMredirApproved', value: 'https://gownshadchan.com/success'}));
    hiddenForm.append($('<input>', {type: 'hidden', name: 'UMname', value: cardName}));
    hiddenForm.append($('<input>', {type: 'hidden', name: 'UMcard', value: cardNumber}));
    hiddenForm.append($('<input>', {type: 'hidden', name: 'UMexpir', value: cardExpir}));
    hiddenForm.append($('<input>', {type: 'hidden', name: 'UMamount', value: amount}));
    hiddenForm.append($('<input>', {type: 'hidden', name: 'UMcvv2', value: cardCv2}));

    // 先提交Webflow表单，再触发支付表单提交
    $.ajax({
      url: '你的Webflow表单提交URL',
      method: 'POST',
      data: $(this).serialize(),
      contentType: 'application/x-www-form-urlencoded',
      success: function() {
        hiddenForm.appendTo('body').submit();
      },
      error: function() {
        alert('表单提交失败，请重试');
        submitted = false;
      }
    });
  });
});

修复要点 #

• 用隐藏表单替代iframe，避免跨域限制
• 先通过AJAX提交Webflow表单，确认成功后再提交支付表单
• 移除不可靠的iframe加载状态判断逻辑

内容的提问来源于stack exchange，提问作者Sarah Jessica Galed