Embedding a Popup Checkout Page Within Your Website Button: A Step-by-Step Guide

Wish to embed the popup checkout page in your own website button so it looks more professional?
Then here is how you can do it -

1. You need to obtain the popup button code from the Pabbly checkout customizer.
Checkout Customizer >> Page layout >> Popup >> Button code.

2. Fetch the onclick popup method from the entire code and Incorporate it into your website button code.
For example, the Pabbly popup button code is -

<a onclick="open_center_popup('https://payments.pabbly.com/subscribe/609fc937fbdb9eef0965f/test-payment?is_popup_preview=true')" class="anchor_button popup_checkout_button" style="background-color: #007bff; color: #ffffff;">Click Me</a>

So, I will pick onclick="open_center_popup('https://payments.pabbly.com/subscribe/609fc937fbdb9b5ceef0965f/test-payment?is_popup_preview=true')" and use it with my website button code.

Please refer to the following example -

So, if the website button code is -

<button class="btn btn-gradient-border btn-glow">Gradient Border Button</button>

I will proceed as follows to embed the Pabbly popup checkout page into my website button-

<button onclick="open_center_popup('https://payments.pabbly.com/subscribe/63f4abd50beb4c499580944a/test-gateway?is_popup_preview=true')" class="btn btn-gradient-border btn-glow">Gradient Border Button</button>