Unable to get Popup to appear in my Bubble Page

Need help
1

I am implementing a card payment system where:

  1. The payer initiates the payment process for goods and services on bubble app. In response, my application submits a JavaScript request with the required data to the Payment Gateway to display the chosen payment interface: a Lightbox or Hosted Payment Page. This popup payment interface would appear once the payer clicks on the button to show the Lightbox.

  2. The payer is presented with the payment interface and they fill the payment details.

This system avoids me having to comply with PCI DSS requirements (Bubble is not PCI DSS certified) as all payment data is handled by the gateway.

The Gateway provides me with the codes which I customise for my account. Most of the code is Javascript. A button fires a function which opens a popup on my page. The payment interface in the popup is served by the Payment Gateway.

The code given to me is HTML with JavaScript which is referenced in in the Header Section. In the body section is the following:

 <body>
     <input type="button" value="Pay with Lightbox" onclick="Checkout.showLightbox();" />
     <input type="button" value="Pay with Payment Page" onclick="Checkout.showPaymentPage();" />
  </body>

What I did was to put this entire HTML code into an HTML element in my Bubble page. What I see are 2 button with the words “Pay with Lightbox” and another with “Pay with Payment Page”. When I clicked on the button no popup appeared.

In desperation, I pasted the exact code into a php file in another hosting site. When I click on the button in the php page, the popup appeared as shown below.

Mastercard Popup that does not appear in Bubble app (edited)
Mastercard Popup that does not appear in Bubble app (edited)1548×1458 194 KB

As you can see in the image, the popup appears on top of my php page. It functions properly.

Do any of our Bubble experts here know why the popup appears in a php page but not in my Bubble page? Is there some setting that I am missing?

By the way, I am not using Stripe, Braintree or Paypal as their discount rate is much-much higher than bank sponsored payment gateways.

2

I have decided to change my approach and instead of using HTML elements, I have instead stuffed the Javascript into Toolbox (thanks Misha). Latching the Javascript to a Bubble button, the Popup miraculously appeared. I can say that this problem is solved.

Hence, lesson learnt is that all Javascript must go into Toolbox. It does not trigger properly in an HTML element.

3

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