javascript - Braintree dropin 表单问题 - 未生成随机数字符串

Question

我正在尝试使用 dropin form来自 Braintree，但它会产生奇怪的行为。

我可以成功地将表单放入 View 中:

<form id="createTransactionForm" method="post" action="#">
    <div id="payment-form"></div>
    <input type="submit" value="Test - Pay">
</form>

<script>

    var braintreeToken = @Html.Raw(Json.Encode(Model.brainTreeToken));
    
    braintree.setup(
        braintreeToken,
        "dropin", {
            container: "payment-form"
        });

    ...

结果如下:

他们在 documentation 中声明(第 3 段)braintree.js 会将名为 payment_method_nonce 的隐藏输入添加到您的表单。

在我的 Controller 上，我获得了捕获表单集合的操作方法，并且表单集合中有一个 payment_method_nonce 键，其值为空字符串，但没有其他键，也没有其他表单字段在这里被抓到的。我期待卡号和有效期，如上图所示。

使用检查器，我看到 Braintree dropin 创建了一个具有嵌套表单的 HTML 结构:

我的问题是，如何使用 Braintree dropin 表单并在操作方法中捕获所有表单输入值？

编辑

好的，感谢@MikeMiller，我了解到我不需要捕获 Controller 方法中的 CC 值，只需捕获从它们生成的随机数字符串。但是，我得到一个空字符串。

根据他的建议，我尝试向表单添加操作属性的特定值:

<form id="createTransactionForm" method="post" action="@Url.Action("MyMethod", "MyController")">

但结果是相同的，随机数为空字符串。

Answer 1

我使用以下代码(Laravel5 Blade)进行工作。我的问题是使用 jQuery 提交表单 - 表单中没有按钮元素，随机数值不会被填充。

<form id="checkout" method="post" action="{{URL('admin/checkout')}}">
<div id="payment-form"></div>
<br>
<div class="input-group">
    <div class="input-group-btn" >
        <div class="btn-group">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" style="width:50px">
                <span data-bind="label" id="currency">&pound;</span>&nbsp;<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="min-width:50px">
                <li style="width:50px"><a href="GBP">&pound;</a></li>
                <li style="width:50px"><a href="USD">&dollar;</a></li>
                <li style="width:50px"><a href="EUR">&euro;</a></li>
            </ul>
        </div>
    </div>
    <input type="text" name="amount" id="amount" class="form-control" />


    <div class="input-group-btn">
        <button role="submit" class="btn  btn-primary btn-block" id="submit">Make Payment</button>
    </div>
</div>
</form>
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
  braintree.setup("@braintreeClientToken", "dropin", {
    container: "payment-form",
    form: 'checkout'
  });
</script>