[英]Braintree payments won't work with AJAX submit
I have a dynamic AJAX submit. 我有一个动态的AJAX提交。 I am trying to submit Braintree (PayPal) payment data into payment.php using AJAX.
我正在尝试使用AJAX将Braintree(PayPal)付款数据提交到payment.php。 Unfortunately, Braintree is giving me a nonce error.
不幸的是,布伦特里给我一个随机数错误。 Braintree creates an input with a code (nonce) on submit, but my submit is submitted before the code is created.
Braintree会在提交时创建一个带有代码的输入(即刻),但是我的提交是在创建代码之前提交的。
Braintree gives me a script that creates the code Braintree给了我一个创建代码的脚本
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
And I use something like 我用类似
$(document).on("submit","form",function(event){
if(!$(this).is("[action]")){
event.preventDefault()
formdata=new FormData(this)
submit(this)
}
submit(this) calls the ajax. Submit(this)调用ajax。 I tried to delay the submit, but then nothing works.
我试图延迟提交,但是没有任何效果。 For example.
例如。 If I call an alert() during my submit, the code is added and the submit works fine;
如果我在提交过程中调用了alert(),则会添加代码,并且提交工作正常; except for the fact that now I have an alert.
除了现在我有一个警报。 The problem is that both codes run at the same time and the Braintree code is too slow to react.
问题是两个代码同时运行,而Braintree代码太慢而无法响应。 I also tried to re-position the link above and below my JS code with no luck.
我也尝试将链接重新定位在我的JS代码上方和下方,但是没有运气。
As mentioned here , I think you should use onPaymentMethodReceived
callback from GlobalSetup of BrainTree. 如前所述在这里 ,我认为你应该使用
onPaymentMethodReceived
回调从布伦特里的GlobalSetup。 Instead of handling form submit on your own using jQuery, you can configure this callback in the setup like below. 除了可以使用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();
}
});
The onPaymentMethodReceived
is called when a payment_method_nonce
has been generated by Drop-in (as the result of a form submission). 当Drop-in生成
payment_method_nonce
(作为表单提交的结果)时,将调用onPaymentMethodReceived
。 It will be called with a paymentMethod
object, which contains the nonce as a string. 将使用
paymentMethod
对象调用该对象,该对象包含随机数作为字符串。
You can find more details here about the paymentMethod
object passed to onPaymentMethodReceived
callback, it has a property called nonce
. 您可以在此处找到有关传递给
onPaymentMethodReceived
回调的paymentMethod
对象的更多详细信息,该对象具有一个称为nonce
的属性。
Hope this helps :) 希望这可以帮助 :)
My solution for prevent AJAX submit before nonce receiving. 我的解决方案是防止AJAX在临时收款之前提交。 Hope this helps.
希望这可以帮助。
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()
I wanted to do the same and that's what I did. 我想做同样的事情,这就是我所做的。
that's it and don't forget to serialize the form before you send it, hope this will help you 😃 就是这样,不要忘记在发送表格之前先序列化表格,希望这对您有所帮助
the source code here braintree payments set up your client 这里的源代码braintree付款设置了您的客户
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" );
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.