Javascript Braintree dropin表单问题-未生成nonce字符串_Javascript_Html_Asp.net Mvc_Forms_Braintree

Javascript Braintree dropin表单问题-未生成nonce字符串

javascript html asp.net-mvc forms

Javascript Braintree dropin表单问题-未生成nonce字符串,javascript,html,asp.net-mvc,forms,braintree,Javascript,Html,Asp.net Mvc,Forms,Braintree,我试图使用来自braintree的命令，但它会产生一种奇怪的行为我可以成功地将表单放置在视图中： <form id="createTransactionForm" method="post" action="#"> <div id="payment-form"></div> <input type="submit" value="

我试图使用来自braintree的命令，但它会产生一种奇怪的行为

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

<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"
        });

    ...

但是结果是一样的，一个空字符串表示当前值。

我用下面的代码（Laravel5 blade）得到了我的代码。我的问题是使用jQuery提交表单-如果表单中没有button元素，则不会填充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>




&磅；

宽度：50px>
宽度：50px>
宽度：50px>

付款
braintree.setup（“@braintreeClientToken”，“dropin”{
容器：“付款单”，
表格：'结帐'
});

我使用以下代码（Laravel5刀片）工作。我的问题是使用jQuery提交表单-如果表单中没有button元素，则不会填充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>




&磅；

宽度：50px>
宽度：50px>
宽度：50px>

付款
braintree.setup（“@braintreeClientToken”，“dropin”{
容器：“付款单”，
表格：'结帐'
});

当你得到一个空的nonce时，我也遇到了同样的问题。然而，在我的例子中，我做的是“定制”而不是“下载”。我在各种场景中做了很多测试，比如从仪表板创建静态标记化标记，或者在加载页面时动态生成一个标记。我怀疑，他们有一些反欺诈措施，这会产生奇怪的场景，表单无论如何都会提交，即使表单验证例程失败。或者，表单提交后，您将无法获得任何临时信息。文件在这方面也非常混乱。所以，这就是我最终要做的修复。仅在表单提交操作中调用了onPaymentMethodReceived。我的另一个显著发现是，如果我使用下面的代码并将

添加到表单中，然后用一个调用来更新

支付方法\u nonce

隐藏字段来替换下面的

$（“#令牌”）

行，则Braintree API会在表单提交之前将其删除！因此，修复方法是将隐藏字段重命名为“token”，然后在PHP中的表单提交代码上，我可以处理

$\u POST['token']

，而不是

$\u POST['payment\u method\u nonce']

，但将其视为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;
        }
    });
});

函数invalidForm（）{
//使用Stripe或Braintree信用卡表单验证程序和任何其他您想要的表单验证
//大脑树：https://github.com/braintree/card-validator
//条纹：https://github.com/stripe/jquery.payment
//返回问题的字符串值
返回“”；
}
jQuery（文档）.ready（函数（）{
$（'FORM#checkout'）。追加（''）；
//从仪表板>帐户>我的用户>生成静态客户端令牌
//授权>标记化密钥
var clientToken='sandbox_555555 555555'；
braintree.setup（clientToken，'custom'{
id:‘结帐’，
onPaymentMethodReceived:函数（paymentMethod）{
$（'#btnpourchase'）.addClass（'disabled'）.attr（'disabled'）；
var sErr=invalidForm（）；
如果（sErr）{
警惕（sErr）；//显然做得比这更好
$（'#btnpourchase'）.removeClass（'disabled'）.removeAttr（'disabled'）；
返回false；
}//否则。。。
$（'#token'）.val（paymentMethod.nonce）；
$（'FORM#checkout'）。提交（）；
返回true；
}
});
});

添加到表单中，然后用一个调用来更新

支付方法\u nonce

隐藏字段来替换下面的

$（“#令牌”）

行，则Braintree API会在表单提交之前将其删除！因此，修复方法是将隐藏字段重命名为“token”，然后在PHP中的表单提交代码上，我可以处理

$\u POST['token']

，而不是

$\u POST['payment\u method\u nonce']

，但将其视为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;
        }
    });
});

函数invalidForm（）{
//使用Stripe或Braintree信用卡表单验证程序和任何其他您想要的表单验证
//大脑树：https://github.com/braintree/card-validator
//条纹：https://github.com/stripe/jquery.payment
//返回问题的字符串值
返回“”；
}
jQuery（文档）.ready（函数（）{
$（'FORM#checkout'）。追加（''）；
//从仪表板>帐户>我的用户>生成静态客户端令牌
//授权>标记化密钥
var clientToken='sandbox_555555 555555'；
braintree.setup（clientToken，'custom'{
id:‘结帐’，
onPaymentMethodReceived:函数（paymentMethod）{
$（'#btnpourchase'）.addClass（'disabled'）.attr（'disabled'）；
var sErr=invalidForm（）；
如果（sE）