如何获取HTML form标签post方法返回值及Stripe Checkout返回数据

你目前使用的是Stripe旧版嵌入式Checkout（checkout.js v2），可以通过以下两种方式获取用户完成支付验证后的返回数据：

方式1：默认表单提交场景下后端直接读取 #

• 用户完成信用卡信息填写并通过Stripe验证后，Stripe会自动在你的表单内插入stripeToken、stripeEmail两个隐藏字段，随后自动触发表单提交，向你<form>标签action属性指定的后端地址发送POST请求
• 你直接在后端接口中读取POST参数里的stripeToken（核心支付凭证，一次性有效）、stripeEmail（用户填写的支付邮箱）即可，后续用该token调用Stripe服务端接口完成实际扣费操作即可

方式2：自定义回调场景下前端先获取 #

如果需要先在前端拿到返回数据再控制后续流程，可以通过配置data-token参数指定回调函数，示例代码如下：

修改后的HTML代码

<form id="myform" action="" method="post">
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="<mykey>"
            data-amount="100"
            data-name="Thank You"
            data-description="Snacks payments"
            data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
            data-locale="en"
            data-zip-code="true"
            data-token="handleStripeToken">
    </script>
</form>

回调JS代码

function handleStripeToken(token) {
    // 直接读取返回的支付数据
    const paymentToken = token.id; // 支付凭证token
    const userEmail = token.email; // 用户支付邮箱
    // 脱敏卡信息（无完整卡号、CVV等敏感数据）
    const cardLast4 = token.card.last4;
    const cardBrand = token.card.brand;
    const cardExpireMonth = token.card.exp_month;
    const cardExpireYear = token.card.exp_year;

    // 后续可自行选择手动提交表单，或者发送AJAX请求到后端完成支付流程
    document.getElementById('myform').submit();
}

注意：所有实际的扣费、订单金额校验逻辑必须放在服务端执行，禁止完全依赖前端逻辑完成支付，避免前端被篡改导致资损。

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