Integrating an external JS library (Paddle Checkout) with Hype 3 site

Using JavaScript with Hype
1

Hello,

I’m trying to integrate the following JS library with Hype 3.

The problem I’m running into is that the overlay checkout doesn’t work occasionally on Google Chrome/Safari on my Mac, and not at all in Firefox or any mobile browser.

I’ve edited the inner HTML of the “Buy” button to be the following:

<a href="#" style="text-decoration:none;color:#FFFFFF" class="paddle_button" data-product="499079" data-theme="none" data-allow-quantity="yes">Buy $6.99</a><br>

I’ve also edited the HTML head to include these libraries:

`

`

I’ve contacted the Paddle vendor about it and they’re convinced that the problem is with Hype, since it works on other sites without issue.

I’m attaching a zipped copy of my Hype project in case that helps.

Thank you!

2

Here’s the link to the zip file.

https://dl.dropboxusercontent.com/u/3869918/tmnotifier.hype.zip

Thanks!

3

The problem here is that Paddle and jQuery are downloaded and parsed before your Buy button appears. Paddle needs to see the data-product and class="paddle_button" in the Dom, but this element is dynamically written to the DOM by Hype’s runtime after Paddle.js loads.

To get the Paddle JavaScript to load at the right time, run this function as a JavaScript function On Layout Load for both of your layouts:

jQuery.getScript("https://paddle.s3.amazonaws.com/checkout/checkout.js", function(data, status, jqxhr) {
});

tmnotifier-2.hype.zip (1.2 MB)

4

Thanks, Daniel! This is better, since now it will work in Firefox, but no matter what I’m not able to get this working on a mobile browser. I’ve tried both Safari and Chrome on iOS with your changes exported as HTML 5. Any thoughts? Is the tap handled differently than the click by any chance?

5

I also just now tried on Android with the Chrome browser and encountered the same issue. Thanks!

6

Any ideas? I’m still not able to get this working on any mobile browsers. Thanks!

7

On Mobile, it looks like the touch events for the button itself were conflicting with what Paddle was doing. To fix this, turn off ‘Use Touch Events’ in the Document inspector and re-export.

1 Like
8

Thanks again, Daniel! This worked!