Javascript Rails braintree在输入框外的焦点上捕获错误
我正在Rails应用程序中使用braintree。集成使用gem'braintree'。我使用dropin UI,其实现方式如下:Javascript Rails braintree在输入框外的焦点上捕获错误,javascript,jquery,ruby-on-rails,braintree,braintree-rails,Javascript,Jquery,Ruby On Rails,Braintree,Braintree Rails,我正在Rails应用程序中使用braintree。集成使用gem'braintree'。我使用dropin UI,其实现方式如下: braintree.dropin.create({ authorization: client_token, container: '#bt-dropin' }, function (createErr, instance) { form.addEventListener('submit', function (event) { event.preventDef
braintree.dropin.create({
authorization: client_token,
container: '#bt-dropin'
}, 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
document.querySelector('#nonce').value = payload.nonce;
form.submit();
});
});
});
这个很好用。但是如果有错误,我需要捕获错误,如果光标从inputbox移出,我需要禁用submit按钮。有什么解决办法吗?
请帮忙。完全披露:我在Braintree工作。如果您有任何进一步的问题,请随时联系
虽然使用DropIn无法实现该解决方案,但我建议根据付款方式是否可请求动态启用或禁用submit按钮。见下文
为了更好地控制,我建议您查看我们的解决方案。您是否可以提供更多关于您的问题的上下文,例如,您是否希望捕获Drop-In或表单本身内部或Drop-In外部的错误。如果是这样,我可以提供如何禁用提交按钮的示例,直到可以提交下拉表单。假设光标位于输入框(cvv)内,并且没有在cvv中输入任何内容,我移动到到期日期。因此,cvv将显示错误(请填写cvv)。所有其他输入框都类似。当光标从输入框中移出时,我必须捕捉到任何错误。Shahana,谢谢你的清晰。这种水平的控制是不可能的下降。我建议使用Braintree的托管字段以获得最大的控制。最接近您的解决方案是根据付款方式是否可请求动态启用或禁用“提交”按钮
var submitButton = document.querySelector('#submit-button');
braintree.dropin.create({
authorization: 'client_token',
container: '#bt-dropin'
}, function (err, dropinInstance) {
submitButton.addEventListener('click', function () {
dropinInstance.requestPaymentMethod(function (err, payload) {
document.querySelector('#nonce').value = payload.nonce;
form.submit();
});
});
if (dropinInstance.isPaymentMethodRequestable()) {
// This will be true if you generated the client token
// with a customer ID and there is a saved payment method
// available to tokenize with that customer.
submitButton.removeAttribute('disabled');
}
dropinInstance.on('paymentMethodRequestable', function (event) {
console.log(event.type); // The type of Payment Method, e.g 'CreditCard', 'PayPalAccount'.
console.log(event.paymentMethodIsSelected); // true if a customer has selected a payment method when paymentMethodRequestable fires
submitButton.removeAttribute('disabled');
});
dropinInstance.on('noPaymentMethodRequestable', function () {
submitButton.setAttribute('disabled', true);
});
});