Question

我有一个动态的AJAX提交。我正在尝试使用AJAX将Braintree（PayPal）付款数据提交到payment.php。不幸的是，Braintree给了我一个nonce错误。 Braintree在提交时使用代码（nonce）创建输入，但我的提交是在创建代码之前提交的。

Braintree为我提供了一个创建代码的脚本

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>

我使用类似

的东西

$(document).on("submit","form",function(event){
  if(!$(this).is("[action]")){
    event.preventDefault()
    formdata=new FormData(this)
    submit(this)
}

提交（this）调用ajax。我试图推迟提交，但后来没有任何作用。例如。如果我在提交期间调用alert（），则会添加代码并且提交正常;除了现在我有警报的事实。问题是两个代码同时运行，而Braintree代码太慢而无法做出反应。我还尝试重新定位我的JS代码上方和下方的链接，但没有运气。

Answer 1

正如前面提到的here，我认为你应该使用来自BrainTree的GlobalSetup的braintree.setup("CLIENT-TOKEN-FROM-SERVER", "dropin", { container: "dropin-container", onPaymentMethodReceived: function (paymentMethod) { // Do some logic in here. // When you're ready to submit the form: myForm.submit(); } });回调。您可以使用jQuery自行处理表单提交，而不是在下面的设置中配置此回调。

onPaymentMethodReceived

当Drop-in生成payment_method_nonce时（作为表单提交的结果），将调用paymentMethod。它将使用paymentMethod对象调用，该对象包含nonce作为字符串。

您可以找到有关传递给onPaymentMethodReceived回调的nonce对象的更多详细信息here，它有一个名为<Trigger Property="IsSelected">的属性。

希望这会有所帮助：）

Answer 2

我的解决方案是在nonce接收之前阻止AJAX提交。希望这会有所帮助。

braintree.setup('TOKEN-HERE', "dropin", {
  container: "payment-form",
  onPaymentMethodReceived: (obj) ->
    $('form#checkout input#payment_method_nonce').val(obj['nonce'])
    frm = $('form#checkout')
    $.ajax
      type: frm.attr('method')
      url: frm.attr('action')
      data: frm.serialize()
})

$(document).on 'ajax:before', 'form#checkout', ->
  return false unless $('form#checkout input#payment_method_nonce').val()

Answer 3

我想做同样的事情，这就是我所做的。

首先创建dropin并处理所有创建错误，直到第8行
然后阻止默认的提交事件获取付款方式
最终使用此方法>> requestPaymentMethod（）<<分配现时值。

仅此而已，不要忘记在发送表格之前先序列化表格，希望对您有所帮助?

这里的源代码braintree payments set up your client

var form = document.querySelector('#payment-form');
var client_token = '{{ client_token }}';
console.log(client_token)
braintree.dropin.create({
  authorization: client_token,
  container: '#bt-dropin',
  paypal: { flow: 'vault' }
  }, function (createErr, instance) {
    form.addEventListener('submit', function (event) {
      event.preventDefault();
      instance.requestPaymentMethod(function (err, payload) {
        if (err) {
          console.log('Error', err);
          return;
        }
        // Add the nonce to the form and submit
        // Submit payload.nonce to your server
        document.querySelector('#nonce').value = payload.nonce;
        //form.submit();
        submit_it(form );
      });
    });
  });


function submit_it(params) {
  params = $(params).serialize()
  $.ajax({
    type:'POST',
    url :  window.location +"checkout/",
    beforeSend: function(xhr, settings) {
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
      }
    },
    data:params,
    success: function(data){
      console.log("succeded");
      console.log(data)
    },
    complete: function (xhr, textStatus) {
      console.log(xhr.status);
      if ( xhr.status == 200) {
      //complete code
      }
    },
    error:function(){
      // Do something not that success-ish
      alert( "something gone wrong" );
    }
  });
}

Braintree付款不适用于AJAX提交

3 个答案: