Hello bubble friends,
I need help to insert javascript for a payment button in my single page application that I am developing in bubble, however I have not been able to insert the payment button in a group that is hosted in a popup.
You can see the image with the code that I want to insert
I thank you for your valuable help.
You would need to copy this into an HTML element that you put into the popup where you want the button to be positioned.
You would also need to pass in the relevant dynamic data for the transaction such as the amount, and reference this where the 4950000 is, unless the amount is fixed
Josh @ Support Dept
Helping no-code founders get unstuck fast 
save hours, & ship faster with an expert 
on-demand
Thank you very much for your answer but unfortunately it didn’t work inserting it into an HTML element.
In the Bubble Editor the button is displayed:
but when I go to the preview, the button disappears as shown in the image:
So it’s likely that it’s there but it’s just out of view.
By setting your HTML element to a particular size doesn’t guarantee that what’s rendered within that element is going to fit.
i.e. I have this pricing element on my website and the button you see there is actually all rendered in HTML as it’s a calendly embed button. So similar sort of thing to what you’re doing.
While my HTML element is set to the size I want it to be, I also set the size of the button using CSS. So my HTML code looks like:
<button class="bubble-element Button" style="z-index: 6; align-self: end; min-width: 0px; order: 6; min-height: 47px; max-height: 47px; height: 47px; flex-grow: 1; width: calc(100% + 0px); cursor: inherit; background-image: none; background-color: rgb(0,18,25); text-align: center; font-family: Montserrat; font-size: 15px; color: rgb(255, 255, 255); letter-spacing: 0.5px; line-height: 0; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; transition: background 200ms ease; font-weight: 800; text-decoration: none; font-style: normal; "onclick="Calendly.initPopupWidget({url: 'https://calendly.com/supportdept?hide_gdpr_banner=1'});return false;">Get Unstuck</button>
So what I would do if I was you would be to put that code in a DIV and then specify the size using inline CSS.
Are you familiar with CSS?
Josh @ Support Dept
Helping no-code founders get unstuck fast 
save hours, & ship faster with an expert 
on-demand
No josh24, I’m definitely a No Coder, 
I’ve been trying, but the button does not activate when clicked
This is the page where I got the button:
It has a module for HTML, but I definitely want the user to stay on my site
This topic was automatically closed after 70 days. New replies are no longer allowed.