1

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.

shahana hamza
  • 107
  • 1
  • 1
  • 10
  • Could you provide a bit more context on your question, such as if you’re looking to catch errors within the Drop-In or the form itself, or outside the Drop-In. If so, I can provide examples on how to disable the submit button UNTIL the Drop-In form is able to be submitted. – drs6222 Oct 17 '17 at 14:17
  • Suppose the cursor is inside the inputbox(cvv) and with out entering anything in CVV, i moved to to Expiry date..so an error will be showed at CVV(Please fill out a CVV.). Similar for all other input boxes. I have to catch error if any when the cursor is moved out from input box. – shahana hamza Oct 24 '17 at 09:12
  • Shahana, thanks for the clarity. This level of control is not possible with the DropIn. I would suggest using Braintree's Hosted Fields in order to gain the most control. The closest solution for you is to dynamically enable or disable your submit button based on whether or not the payment method is request-able – drs6222 Oct 24 '17 at 19:28

1 Answers1

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.

drs6222
  • 606
  • 3
  • 10