如何将Formspree表单的邮箱值预填充到Stripe Checkout的data-email？

完全可以把Formspree表单里的邮箱输入值同步到Stripe Checkout的data-email字段里，核心思路是用JavaScript监听邮箱输入框的内容变化，实时更新Stripe按钮的对应属性。下面是具体的实现步骤和代码：

第一步：调整HTML结构 #

先把你的表单和字段整理清楚，给邮箱输入框加一个便于识别的ID，同时保留Stripe的按钮脚本：

<!-- 整合Formspree和Stripe的表单 -->
<form id="combined-form" method="POST" action="https://formspree.io/your-formspree-id">
  <!-- Formspree邮箱输入框，添加ID方便JS获取 -->
  <input 
    type="email" 
    name="Customer Email" 
    placeholder="your email here" 
    id="customer-email"
    required
  >

  <!-- 其他Formspree字段（如果需要的话） -->
  <!-- <input type="text" name="Name" placeholder="your name here"> -->

  <!-- Stripe Checkout按钮脚本，先留空data-email -->
  <script 
    src="https://checkout.stripe.com/checkout.js" 
    class="stripe-button" 
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh" 
    data-image="" 
    data-amount="8500" 
    data-name="Your Business Name"
    data-email=""
    data-locale="auto"
  ></script>
</form>

第二步：添加JavaScript同步逻辑 #

在页面底部（或表单结束后）添加一段JS代码，监听邮箱输入框的内容变化，实时把输入值同步到Stripe按钮的data-email属性：

// 获取邮箱输入框和Stripe按钮元素
const emailInput = document.getElementById('customer-email');
const stripeButton = document.querySelector('.stripe-button');

// 监听输入框的输入事件，实时同步邮箱值
emailInput.addEventListener('input', function() {
  stripeButton.setAttribute('data-email', this.value);
});

// 可选：页面加载时如果输入框已有值，也同步到Stripe按钮
window.addEventListener('load', function() {
  if (emailInput.value) {
    stripeButton.setAttribute('data-email', emailInput.value);
  }
});

补充小提示 #

• 记得把表单里的https://formspree.io/your-formspree-id替换成你自己的Formspree表单ID，这样提交后Formspree才能正常接收数据。
• 测试时可以输入邮箱后，右键查看Stripe按钮的HTML属性，确认data-email已经变成你输入的内容。
• 如果后续升级到Stripe新版Checkout（Elements），逻辑类似，只是需要修改Stripe初始化配置里的customer_email参数即可。

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