0

I have a Rails-driven website. One of the pages uses Braintree to do credit card processing.

It sometimes takes a few seconds for the Braintree credit card transaction to be processed by Braintree.

Question

What I'd like to do is

  1. disable the submit button while Braintree does it's processing (sometimes as much as 15 seconds but typically about 5 seconds), as well as,
  2. put up a "spinner" indicating the user should not do anything while we wait for Braintree to finish its work.

Suggestions?

RalphShnelvar
  • 557
  • 1
  • 6
  • 17

2 Answers2

0

For custom ui you can basic structure from clinet side is:-

var client_token = "<%= @token %>"
  var checkout;
  braintree.setup(client_token, "custom", {
  option-1,
  option-2,
  option-3,
  option-......
});

// should have a html div with spinner which should be by default hide,and on click payment button it will show.

// Adds click event listener to your own PayPal button of choice

$('#spinner_div').hide();
$('#my-button-element').on('click', function(e){
  e.preventDefault();
  checkout.paypal.initAuthFlow();
  $('#spinner_div').show();
  return false;
});

References: -

1- https://developers.braintreepayments.com/reference/client-reference/javascript/v2/configuration#onpaymentmethodreceived-details-object

2- https://developers.braintreepayments.com/guides/paypal/overview/javascript/v2

3- https://harryxue.net/using-a-custom-html-form-with-braintree/

4- https://gist.github.com/danielwu426/70eac6b34ab7491610f0

5- https://github.com/braintree/braintree_rails_example

6- https://developers.braintreepayments.com/guides/paypal/client-side/javascript/v2

Anand
  • 6,457
  • 3
  • 12
  • 26
0

I added an id (ralph_submit_button) to the submit:

<button id="ralph_submit_button" class="button" type="submit" style="color: white;"><span>Approve Transaction</span></button>

I modified the recommended javascript as

<script>
  var form = document.querySelector('#payment-form');
  var client_token = "<%= @client_token %>";

  braintree.dropin.create({
    authorization: client_token,
    container: '#bt-dropin',
    paymentOptionPriority: ['card'],
    // paypal: {
    //   flow: 'vault'
    // }
  }, function (createErr, instance) {
    form.addEventListener('submit', function (event) {
      <%# See : https://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-input-button %>
      document.getElementById("ralph_submit_button").disabled = true;

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

Try as I might, I could not get a spinner to work with Braintree.

Others might want to look at https://github.com/tcannonfodder/submit-button-spinner/blob/master/demo.html . You might have more success than I. The code in https://github.com/tcannonfodder/submit-button-spinner/blob/master/demo.html seems to work well but I was unable to integrate that code into my Braintree code.

RalphShnelvar
  • 557
  • 1
  • 6
  • 17