I am implementing a card payment system where:
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.
<input type="button" value="Pay with Lightbox" onclick="Checkout.showLightbox();" />
<input type="button" value="Pay with Payment Page" onclick="Checkout.showPaymentPage();" />
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.
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.