Comments (16)
Hey @ndabAP, we played around with patching this in the current major version and weren't really happy with any of the solutions, so we're planning on fixing this issue the right way™ in the next major version. We don't have an ETA for that yet, but it is being worked on and should include a solution for this issue. Thanks for your patience!
from braintree-web-drop-in.
Thanks for asking about this!
We have a teardown()
function that you should call to destroy Drop-in. Example:
var dropinInstance;
braintree.dropin.create({
// ...
}, function (err, dropin) {
// ...
dropinInstance = dropin;
});
// Destroy Drop-in
dropinInstance.teardown(function(err) {
if (err) { console.error('An error occurred during teardown:', err); }
});
We'll add documentation of this to our README.
Removing the click event listener is fine. Here's an alternative:
var dropinInstance;
braintree.dropin.create(/* ... */, function(err, dropin) {
// ...
dropinInstance = dropin;
});
_submitButton.addEventListener('click', function () {
dropinInstance.requestPaymentMethod(/* ... */);
});
The click event listener here uses dropinInstance
, which you can overwrite at any time.
Does this help?
from braintree-web-drop-in.
Hi @ndabAP, thanks for your example, it made reproducing the issue super easy. There are a few ways we could go about fixing this, but it seems like the best strategies might require a few breaking changes and therefore a major version bump. There are a few other major version bump changes we want to make soon, so we'll add this one to the list.
There are some less attractive patches that might do the trick, and we'll put some time into tracking those to see if there's something that can be done in the near future. As you said, currently there's no way to cancel the setup, but you should be fine to just ignore that error as a temporary workaround.
from braintree-web-drop-in.
Looks good, I'll use your method then.
from braintree-web-drop-in.
Great! Thanks again for pointing out this issue.
from braintree-web-drop-in.
I'm using braintree web drop in with Vue.js and I'm having an issue where I call the teardown method on my destroy life cycle hook (when I leave the checkout screen that has the drop in) and the teardown method gets called without producing any errors. However, when I go back to my checkout screen and reinitialize my dropin, I get the following error:
DropinError {name: "DropinError", message: "options.selector or options.container must reference an empty DOM node.", _braintreeWebError: undefined}
(warning)
PayPal Checkout Integration Script already loaded on page
Is there something that I'm doing incorrectly?
from braintree-web-drop-in.
@aphavichitr My guess is that Vue is removing the view from the DOM before Drop-in can succesfully remove itself. When you return to the checkout page, Vue re-inserts the view with the non-empty DOM node.
If you provide a demo app on Github that reproduces the issue, I'm happy to see if I can tweak the lifecycle hooks to work correctly with Drop-in, but if you want a quick solution, simply emptying the DOM node before calling create should do it.
var myContainer = document.getElementById('my-container');
myContainer.innerHTML = '';
braintree.dropin.create({
authorization: myAuth,
container: myContainer
}, callback);
The checkout.js warning is nothing to be concerned about, but I will see about silencing that warning.
from braintree-web-drop-in.
@crookedneighbor Thanks for the solution. I tried it and it didn't work because It turned out to be an issue with the EventBus I was using and not related to the lifecycle hooks or the drop in listeners getting tore down. I had an EventBus in my created lifecycle hook that initialized the braintree dropin after the api response from getting the client token. I didn't remove the EventBus listeners with EventBus.$off in the beforeDestroy lifecycle hook when navigating away from the page, so every time I returned to the Checkout component, it would create a new EventBus listener and therefore keep reinitializing an extra braintree dropin for the number of times I've been on the page without a refresh. I probably should avoid using the EventBus, but I haven't figured out a way to get the client token asynchronously before initializing the drop in, since I'm getting the client token and initializing the drop in in sibling components.
from braintree-web-drop-in.
@aphavichitr Are you vaulting with Drop-in? If not, you could always use a tokenization key, so you don't need to fetch a client token at all.
from braintree-web-drop-in.
@crookedneighbor Not vaulting with drop-in. Thanks, I'll take a look at the tokenization key.
from braintree-web-drop-in.
I have the problem with Vue.js, too. When switching fast between routes, the DOM element with id="braintree
gets removed before the initialization can happen.
The teardown
function won't help since the creation isn't finished, yet.
from braintree-web-drop-in.
Repository to reproduce:
https://github.com/ndabAP/braintree-vue-routes-issue
Steps
$ yarn # or npm i
- Place a real authorization token at
src/views/BraintreeWebDropIn.vue
line 8 $ yarn serve # or npm run serve
- Go to given URL
- Click on
Other route
before three seconds passed - See error message in developer console
from braintree-web-drop-in.
@jackellenberger I really appreciate your openness and the given insight in your development.
from braintree-web-drop-in.
Any updates?
from braintree-web-drop-in.
Thanks a lot for your fast feedback.
from braintree-web-drop-in.
closing for inactivity. If you continue to encounter errors, please contact Support
from braintree-web-drop-in.
Related Issues (20)
- hoISeoI373mTmmqZxBUwNIeIGfEB4JQH5kNWfVB6tWxeiIUkTkw0EnHdwBJWRBOy HOT 1
- [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. HOT 2
- Apple Pay svg size iPhone 15 series / macOS Sonoma HOT 1
- updated CSP configuration HOT 4
- DropUI Fails to render with ApplePay on newer iPhones HOT 3
- Apple Pay UI goes disappears in a second HOT 1
- data-collector.min.js doesn't loaded HOT 3
- Display new card input form automatically when drop-in is initialized with customerId HOT 1
- Email from Braintree re Updates to required 3D Secure data fields HOT 12
- Initial render events randomly triggered HOT 1
- AuthenticationInsight seem not supported and impossible HOT 1
- Device Data is never returned HOT 2
- threeDSecure - Always Errors HOT 1
- REACT : instance.updateConfiguration() not updating the instance when using dropinInstance as a MutableRefObject
- CardholerName prefill HOT 2
- Release with updated braintree-web? HOT 1
- Pay Later
- Duplicate iframe elements
- 400 status code is returned from analytics API
- Paypal payment opens up an extra window above the iframe HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from braintree-web-drop-in.