Braintree 付款不适用于 AJAX 提交答案

【问题标题】：Braintree payments won't work with AJAX submitBraintree 付款不适用于 AJAX 提交
【发布时间】：2015-09-29 07:08:16
【问题描述】：

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

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

submit(this) 调用 ajax。我试图延迟提交，但没有任何效果。例如。如果我在提交过程中调用 alert()，则添加代码并且提交工作正常；除了现在我有警报的事实。问题是两个代码同时运行，Braintree 代码反应太慢。我还尝试重新定位我的 JS 代码上方和下方的链接，但没有成功。

【问题讨论】：

您好，请不要使用 JS 来提交支付网关，而不是使用 PHP Braintree 库。
如何在不重新加载页面的情况下出现验证错误？还是必须重新加载，没有办法？
@Mitul.. 但是 PHP 是在我们的浏览器中不起作用的服务器端脚本。如果我们要在提交表单之前进行一些处理，那么 JS 是唯一的方法:)
您可以在自己的服务器上使用ajax调用，然后在客户端调用braintree支付方法b，密钥将可见
我无法理解您的方法。 Ajax 是用 JS 完成的，对吗？如果您查看流程here，我们的 JS 客户端将从我们的服务器获取一个令牌，该令牌将用于与 BrainTree 服务器的身份验证，从 BrainTree 服务器获取一个随机数，将该随机数发送到我们的服务器，然后使用再次确定 BrainTree 服务器。

标签： javascript php jquery ajax braintree

【解决方案1】：

正如提到的here，我认为你应该使用来自BrainTree 的GlobalSetup 的onPaymentMethodReceived 回调。您可以在下面的设置中配置此回调，而不是使用 jQuery 自己处理表单提交。

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

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

您可以在here 找到更多关于传递给onPaymentMethodReceived 回调的paymentMethod 对象的详细信息，它有一个名为nonce 的属性。

希望这会有所帮助:)

【讨论】：

谢谢，但我试过了。 onPaymentMethodrecieved 仅在提交时收到。所以你它会阻止任何其他提交。提交->创建随机数->不再提交
是的，这就是我们想要做的，对吧？ onPaymentMethodReceived 将在您的 nonce 生成后在表单提交上被调用，您可以使用传递给此回调的对象来获取对它的引用，然后您将手动触发表单提交，如上面的示例代码所示。
你只需要发送随机数来获取所有错误吗？ nonce 是否也包含错误信息？也许这就是我的误解
我建议您通过this 了解它的工作原理。您不会从 JS 文件向 BrainTree 服务器发送 nonce，而是向 BrainTree 服务器发送一个 Token 以验证付款方式，如果它是有效的方法，BrainTree 服务器会以nonce 响应。然后，您将该 nonce 和其他付款详细信息发送到您自己的 PHP/Java 服务器，该服务器将创建一个新交易并将其发送到将处理付款的 BrainTree 服务器。
非常感谢。现在我明白了。我认为整个表单需要提交才能得到错误，但实际上我只需要生成的随机数。谢谢。

【解决方案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()

【讨论】：

【解决方案3】：

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

首先创建 dropin 并处理任何创建错误，直到第 8 行，
然后阻止默认提交事件获取 payment_method_nonce ，
最终使用此方法>> 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" );
    }
  });
}

【讨论】：