Rails braintree catch error on focusout of the inputbox

Question

I am using braintree in my Rails application. Integrated using gem 'braintree'. I use a dropin UI which is implemented like this:

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

This works fine. But i need to catch errors if any and disable submit button if the cursor is moved out from the inputbox. Is there any solution for that? Please help.

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

While that solution specifically cannot be achieved using the DropIn, I would suggest dynamically enabling or disabling your submit button based on whether or not the payment method is requestable. See the example below.

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

For more control, I would suggest checking out our Hosted Fields solution.