如何通过 braintree.js 创建隐藏的 'payment_method_nonce' 输入？

Question

我这样配置 braintree.js：

braintree.setup(
        brainTreeClientToken= 'token_from_server'
        'dropin', {
            container: 'brainTreeDropin',
            form: 'checkout'
        });
</script>

正如我从 developers.braintree 的文档中了解到的那样，您需要向您的服务器发送一个名为 'payment_method_nonce' 的请求参数，但它不存在于请求中。顺便说一句，我在浏览器控制台中没有看到任何 js 错误。这是我的表格：

<form id="checkout" method="post"
      th:action="....">
    <div id="brainTreeDropin"></div>
    <div >
        <div class="form-group">
            <label for="cardNumber">Credit Card Number</label>
            <input data-braintree-name="number" ..other details.. "/>
        </div>
        <div class="form-group">
            <label for="cardHolder">Name on Card</label>
            <input data-braintree-name="cardholder_name" ..other details.. />
        </div>
    </div>
    <div >
        <div class="form-group">
            <label for="cvc">Security Code(CVC)</label>
            <input data-braintree-name="cvv"  ..other details.. />
        </div>
        <div class="form-group">
            <label for="expDate">Expiration Date</label>
            <input data-braintree-name="expiration_date" ..other details.. />
        </div>
    </div>
</form>

知道我的错是什么吗？

Answer 1

我在 Braintree 的 SDK 团队工作。

Drop-In 集成需要 button 或 type=["submit"] 元素出现在表单中。我尝试了您的集成，并能够通过添加 <button>Pay</button> 元素将 payment_method_nonce 值发送到我的服务器。试试看是否能解决您的集成问题。

此外，出于好奇，您是否打算在同一个 form 中使用 2 个信用卡输入法？ Drop-In 表单包含信用卡的必要字段，您不需要 data-braintree-name 注释输入。

如何通过 braintree.js 创建隐藏的 'payment_method_nonce' 输入？

How to create hidden 'payment_method_nonce' input by braintree.js?

javascript

braintree