【问题标题】：Braintree dropin form issue - nonce string not being generatedBraintree dropin 表单问题 - 未生成随机数字符串
【发布时间】：2015-11-04 11:49:44
【问题描述】：

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

我可以成功地将表单放置在视图中：

<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 will add a hidden input named payment_method_nonce to your form。

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

使用检查器，我看到 Braintree 插件创建了一个带有嵌套表单的 HTML 结构：

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

编辑

好的，多亏了@MikeMiller，我了解到我不需要在控制器方法中捕获 CC 值，只需要从它们生成的随机数字符串即可。但是，我得到一个空字符串。

根据他的建议，我尝试在表单中添加 action 属性的特定值：

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

但结果是一样的，nonce 是一个空字符串。

【问题讨论】：

是的，我遇到了 null payment_method_nonce 的问题。您不应该看到任何卡详细信息来处理支付服务器端，您需要的只是 nonce 值。这代表了 Braintree 的付款方式，因此当您发送此信息时，他们会获取信用卡详细信息或在下拉表单中输入的任何内容。
嗯，我正在使用取自 here 的伪造/测试信用卡值，也许这就是 nonce 作为空字符串返回的方式？
只要表单将 CC 值验证为 OK，就不会出现问题。您使用的是沙盒应用对吗？
我认为我们需要做更多的来回故障排除，并且 - 考虑到您和 Mike Miller 在这个问题上已经做了多少 - 我建议联系 Braintree support。当您这样做时，请包含更多您拥有的服务器端代码示例，如果可能，请包含显示空值的 POST 的浏览器开发人员工具网络视图的屏幕截图。

标签： javascript html asp.net-mvc forms braintree

【解决方案1】：

我让我使用以下代码（Laravel5 刀片）。我的问题是使用 jQuery 提交表单 - 表单中没有按钮元素，nonce 值不会被填充。

<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>

【讨论】：

好吧，我假设您使用真实的信用卡值对其进行了测试，那么随机数是否被填充？如果您使用 test 值，它会被填充吗？
我使用有效的 CC 详细信息和有效的 PayPal 帐户进行了测试。只要表单通过验证并且您可以提交，CC是否是假的都没有关系。如果您单击表单中带有空字段的提交按钮，它是否正确验证？即把田地变成红色然后抱怨？
是的，测试卡也可以正常工作。我猜你的问题是相似的，由于某种原因，当你点击提交表单时应该触发的 JS 不是。如果正确触发，它应该验证您的表单，进行 ajax 调用以检索 nonce 并将其粘贴在隐藏的表单字段中，然后正常提交表单
表单验证有效（将字段变为红色并在值无效时抱怨）但随机数永远不会获得值。当我单击“提交”时，表单会传递一个空字符串作为随机数。你认为这是为什么？
嗯，我不确定我害怕。我只能假设它与表单的提交方式有关，但据我所知，您的 HTML 没有任何问题。只是为了一个纯粹的实验，尝试将它发布到不同的 URI（而不是用 # 发布到自身），因为这是我能发现的您的代码和文档之间的唯一区别

【解决方案2】：

当你得到一个空的随机数时，我遇到了同样的麻烦。但是，就我而言，我是在做“自定义”而不是“dropin”。我在各种场景中进行了大量测试，例如从仪表板创建一个静态标记化标记，或者在页面加载时动态生成一个标记。我怀疑他们采取了一些反欺诈措施，它会产生奇怪的情况，即无论如何提交表单，即使表单验证例程失败。或者，表单提交并且您没有得到随机数。文档对此也非常困惑。所以，这就是我终于开始的修复。 What they don't tell you in the docs 是 onPaymentMethodReceived 仅在表单提交操作上调用。我发现的另一个显着发现是，如果我使用以下代码并将<input type="hidden" name="payment_method_nonce" id="payment_method_nonce" /> 添加到表单中，然后将下面的$('#token') 行替换为更新payment_method_nonce 隐藏字段的调用——Braintree API 会正确删除它在表单提交之前！因此，解决方法是将隐藏字段重命名为“令牌”，然后在 PHP 中的表单提交代码上，我可以处理 $_POST['token'] 而不是 $_POST['payment_method_nonce']，但将其视为随机数。

function invalidForm(){
    // use the Stripe or Braintree credit card form validator and any other form validations you want here
    // Braintree: https://github.com/braintree/card-validator
    // Stripe: https://github.com/stripe/jquery.payment
    // return a string value of the problem
    return '';
}

jQuery(document).ready(function(){

    $('FORM#checkout').append('<input type="hidden" id="token" name="token" />');
    // Generate the static client token from your dashboard > Account > My User > 
    // Authorizations > Tokenization Keys
    var clientToken = 'sandbox_555555_555555555555';
    braintree.setup(clientToken, 'custom', {
        id:'checkout',
        onPaymentMethodReceived: function (paymentMethod) {
            $('#btnPurchase').addClass('disabled').attr('disabled');
            var sErr = invalidForm();
            if (sErr) {
                alert(sErr); // obviously do something better than this
                $('#btnPurchase').removeClass('disabled').removeAttr('disabled');
                return false;
            } // else...
            $('#token').val(paymentMethod.nonce);
            $('FORM#checkout').submit();
            return true;
        }
    });
});

【讨论】：