Talk about features that would help Single Page Apps

braintree-web’s design comes from a time when checkout flows generally used a <form> POST. This is no longer the case in 2015, where SPAs and JS-heavy checkout flows are common.

There are a couple things that keep braintree-web from working well in SPAs, the biggest of which is that braintree.setup can only be called once per page load.

I’m starting this thread to discuss what kinds of features would be useful for making braintree-web work better in JS-heavy checkout flows.

Related Issues:

• setup() with different user #18
• Ability to disable dropin form event handlers #4
• paymentMethodNonceReceived callback doesn’t get a new nonce after submitting and re-entering number #20
• paypal support? https://github.com/jeffcarp/braintree-angular/issues/8

[iokaravas]

I ended up “solving” this by using an iframe. It might not seem clean but it works perfectly fine and there are no left-overs.

I’m creating a new iframe, injecting html that includes the form and script setup for braintree with the Client Token using javascript:window["content"] .

Then every callback of braintree’s drop-in (onPaymentReceived, onReady, onError) is handled by using Window.postMessage() on the main application window.

Every time you need to create a new drop-in with a different Client Token, you just remove the iframe, and re-create it. This is untested as far as older browsers go but it works perfectly fine on Firefox and Chrome.

Let me know what you think.

[kyledetella]

@parreirat glad to hear it helped out!

Also, good call on posting the documentation in this thread, that slipped my mind!