Hi All,
I’m trying to integrate a payment portal into my bubble site through my own custom plugin.
The payment gateway has a pop-up that is called from their library when the user clicks pay. Unfortunately, the popup loads behind all the bubble elements (page included).
Any way to fix this?
Thanks!
No idea whether this will work or not but have you tried playing around with the “move to front”/“move to back” functionality when you right click on elements in the elements tree?
Hi @paul29 ,
Thanks for the response.
Unfortunately, that doesn’t seem to help. The popup (which is created on-click and does not exist in bubble) is loading behind the actual “index” page. for the example, i made the background of the “page” semi transparent to show. If I make it completely opaque, you cant even see the popup. Also tried making it completely transparent, but you still cant click through it. It’s almost as if the “Bubble” page is overlaid on top of the actual page.
Makes sense.
One other thing I would try and then I’m out of ideas is to put your button “pay now” in a bubble popup and see if that results in the same “behind the index page” functionality. If it still does show up behind the page then I have no idea how to fix (my only guess would be something in the code of your custom plugin which I have never built before so have no experience with). If it now shows up behind the bubble popup but in front of the index page then you could add some functionality to temporarily hide the bubble popup while the user interacts with the custom popup.
If that works, it may not be the look you’re looking for but I’ve learned with bubble that sometimes you have to sacrifice a bit of user experience to at least get the functionality working.
My last question is, can you click any of the buttons in your custom popup the way it works right now? I doubt it given it is behind the page, but if you can, an option would be, when you click “pay now” to hide the pay now butt, hide the potato picture and change the background colour to 100% transparent. Once the user is done with the custom popup, you could put everything back to the way it was.
So, I have a really ugly work around…But it works.
I went into the element inspector when I ran the “Preview”. From there I looked for the element that contained the popup once it loaded and saw that it did not have a “z-Index” associated with it.
In the code of my plugin, I added a function to check every second to see if that element was present and once it was, to set the z-index to a high number so it remained on top.
Very messy, but it worked.
Example code below:
function yourFunction(){
// your call for the popup comes here. Note it was async in my case
var popupframe = document.getElementsByClassName("[insertClassNameHere]");
function moveUp(){
if (popupframe.length){
for (var i = 0; i < popupframe.length; i++) {
popupframe[i].style.zIndex = 3000;
}
}
else {
setTimeout(moveUp, 1000);// try again in 1000ms
}
}
moveUp();
}
In my case the element did not have a unique “ID” so I had to use the “getElementsByClassName” function. This gives you a list, hence the need for the loop. If your element does have an ID, you can use “getElementById” and you take out the loop. the “popupframe.length” part should still work.
Ultimately this should have been sorted out in the popups code but this workaround can help anyone with this issue.
Hope this helps.
Do you instantiate some kind of container? Like a div?
I’ve had this user before and setting the containers overflow
In my case, there was a function from the payment gateway’s library to call the popup (where the user would enter their card details and pay).
This would be called when the user clicked a “pay” button on the bubble site and the code from my plugin would run and would create a div “on click”. This should have acted as an overlay on top of the site, but since the dev team of the payment gateway didn’t assign a z-index to the popup on their end, the popup loaded behind everything (since bubble has a default z-index=1).