Callback function to braintree.setup about braintree-web HOT 15 CLOSED

@idl3 unfortunately there is no callback to hook into. Out of curiosity, which integration are you using? Drop-in?

from braintree-web.

Yup Drop-in! Just wondering if theres a reason why a setup callback wouldn't be included? Wouldn't it just be accepting another argument into options and running that at the end of the setup process?

from braintree-web.

It is certainly something we can explore. I will sync up with the team to discuss our options and let you know where we end up. Thanks for posting this issue.

from braintree-web.

I've modified a unminified version of braintree.js 2.5.1 to include a "onLoad" callback function that will fire after the iframe has been injected into the DOM, after which a .load function listener can be used to fire any form instantiation methods afterwards.

You can see the modified script here https://gist.github.com/idl3/8bf95acc821de2659eff

I added a new bus event called ONLOAD and also its own callback method which is then injected into the client.initialize portion.

How I would then use the setup function is as follows,

braintree.setup(
  braintree_token,
  'dropin', {
  container: 'dropin',
  paymentMethodNonceReceived: function (event, nonce) {
    $('.braintree-checkout').append("<input type='hidden' name='payment_method_nonce' value='"+ nonce +"'></input>");
    $.ajax({
      url: '#{braintree_charge_path}',
      type: 'post',
      data: $('.braintree-checkout').serialize(),
      context: $('.braintree-checkout'),
      beforeSend: function(evt, xhr, settings){
        // beforesend stuff etc.
      },
      complete: function(evt, xhr, status){
        // completed stuff etc. 
      },
      error: function(evt, xhr, status, error){
        // show error message if fails
      }
    });
  },
  onLoad: function(){
    $('iframe[name="braintree-dropin-frame"]').load(function(){
      setTimeout(function(){
        // i set a timeout as sometimes the animation transition from the swirling lock to the completed form may take a second or so.
      },1500);
    });
  }
});

from braintree-web.

@idl3 this is really awesome! I certainly see the need for a hook to let you know when the Drop-In is ready and it is something we are discussing internally. I also know how difficult it is to work your way through browserified code to provide feedback and debug issues. So thanks for that! I think if we were to actually do this though, it would make more sense for us to emit the onLoad event back to you after the iFrame was actually written to the DOM. That code gets executed as part of dropin.create so emitting the ONLOAD event before that could lead to a race condition.

Taking that even further, would it make more sense for the ONLOAD event to be emitted from inside of our iFrame after we have composed and rendered our UI? That would eliminate the need for an arbitrary setTimeout and I would imagine instead of onLoad, we could have something like an onReady callback. What are your thoughts on that?

from braintree-web.

Yeah onReady seems to be perfect 👍
My solution was a very hackish attempt for it to work ;) couldn't figure out how to place the emit inside the dropin.create method. I'll see what I can do on my end get things going before an official release is out 👯

We're excited to be moving production over to braintree this weekend, so fingers crossed :)

from braintree-web.

This is really great! Thanks @idl3 I was looking for this too and I think it's absolutely needed in the official version, I mean a callback to know when the drop-in is ready.

from braintree-web.

I have modified the code to now callback only after the initialize has been called.
And its now updated to 2.6.0!
Here's the gist for anyone who needs its.
https://gist.github.com/idl3/d20efa6d7a4c18110752

For the paranoid that I have put a backdoor in there, do a git diff between the original here at https://js.braintreegateway.com/js/braintree-2.6.0.js

from braintree-web.

@idl3 thanks for taking the time to do that. We are working on implementing an official onReady callback mechanism for an upcoming release. I'll be sure to post here when its out.

from braintree-web.

@idl3 thank you for your patience. We recently released version 2.7.0 which includes support for an onReady callback. Using the example provided above, you can now do this:

braintree.setup(braintree_token, 'dropin', {
  container: 'dropin',
  paymentMethodNonceReceived: function (event, nonce) {
    ...
  },
  onReady: function () {
    // console.log('Braintree is ready');
  }
});

We are working on adding this new functionality to our documentation, but you can take advantage of this feature now!

from braintree-web.

It's really good, but unfortunately you still haven't a unminified version of this repository, can I ask why while we can see there is an unminified version here: https://js.braintreegateway.com/js/braintree-2.7.0.js
Now, I need to take the 2.7.0 put it on our repository and using that on our bower list. This only because you ship only the minified version here. It does not make sense for me.

from braintree-web.

Excellent, thank you very much! Please update the documentation, I was looking for this feature.

from braintree-web.

@chuchuva will do! Sorry it's taking longer than expected to get the new documentation out.

from braintree-web.

Awesome stuff :) Thanks for this!

from braintree-web.

Works very good, thanks!

from braintree-web.