braintree / braintree-web-drop-in

Braintree Drop-in for the web
MIT License
200 stars 126 forks source link

Please split up braintree.dropin.create() into separate initialize and mount #717

Open cmawhorter opened 3 years ago

cmawhorter commented 3 years ago

General information

Issue description

Please split up async braintree.dropin.create() into async initialize() and a sync mount().

That way I could background the initialize/async stuff on page load and not have to show a second spinner to display the payment form.

Additionally, because of the requirement the DOM element be empty to use (why not just empty it?), I can't easily set my own placeholder and it means I have to deal with a janky content shift:

  1. dropin container renders/added to dom
  2. page looks broken until drop-in renders its spinner (which is delayed for some reason)
  3. spinner renders and page content shifts to accommodate spinner height
  4. form renders. page content shifts again to accommodate the different form height

If you must continue with things that way please add load/ready events so I can show and hide my own wait ui.

As it stands right now my current plan is to render the form to a container that is not attached to the dom and then attach/detach it when the payment step is rendered. Which is pretty hacky.

crookedneighbor commented 3 years ago

I'm marking this issue with the label for v2. I think you make a lot of good points, and we'll definitely take them into consideration for the design of v2 of the Drop-in SDK.