HTML Paddle Buttons do not work on Bubble (via JavaScript Libraries)

rodrig.naska · 2020-07-13T21:44:05.262Z

Hi! A newbie here who has learned tons and tons from this forum. However, I am facing an issue regarding importing JS libraries and adding HTML buttons that I cannot find the answers to anywhere.

I am building a virtual mailbox management tool (https://postbox.bubbleapps.io) for which I am using Paddle to enable payments and subscriptions (Stripe would be my first choice, but it isn’t available in my country).

First, to import the Padde JavaScript library, I am adding an HTML element to the Header of my site with the code below:

<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script type="text/javascript">
Paddle.Setup({ vendor: 1***** });
</script>

Then, as instructed by Paddle, I am trying to add checkout buttons to the site as HTML elements that contain this code:

<a href="#!" class="paddle_button" data-product="599904" >Get Bronze Yearly!</a>

However, it is not working as it is supposed to. When doing the same thing in Carrd (a static no-code website builder), it works like a breeze as seen below:

paddle carrd1848×900 649 KB

Meanwhile, on Bubble (https://postbox.bubbleapps.io/billing), the purchase button from Paddle does not appear as a button but only as text and nothing happens when it is clicked:

bubble pbh billing1848×900 117 KB

I have also tried using the Tools Plugin to add JS through The Loaderr but to no avail. I would greatly appreciate any help and/or guidance!

keith · 2020-07-13T22:35:25.724Z

Well, the paddle.js script is loaded. (I assume you did that with LOADERR? As it looks like your app is on free level right now, correct? In fact, it’s loaded in the page twice, as LOADERR can show you.)

What’s probably happening is that your Paddle.Setup script isn’t running.

I’m talking about this:

rodrig.naska:

<script type="text/javascript">
Paddle.Setup({ vendor: 1***** });
</script>

What you can do is install Toolbox in your project and then use the Run JavaScript action to execute that JavaScript.

Make a workflow that fires When Page is Loaded. In the Run JavaScript’s script field, just enter that one line (not the script tags that surround it):

rodrig.naska:

Paddle.Setup({ vendor: 1***** });

That should prolly do it.

rodrig.naska · 2020-07-14T15:35:19.710Z

Thanks a ton, @keith! Works flawlessly now.

system · 2020-09-21T21:44:05.954Z

This topic was automatically closed after 70 days. New replies are no longer allowed.