Embedding Pabbly Checkout Page Dynamically or Asynchronously on your Website

MukeshR · May 24, 2024

To embed the Pabbly checkout page dynamically or asynchronously on your website, follow these steps:

Step 1. Add the Container for the Checkout Page
First, include the following HTML code where you want to embed the checkout page:

Code:

<div id="pabbly_checkout"></div>

Step 2: Then add a script dynamically

Example:

Code:

// Function to dynamically load the script
function loadPabblyScript() {
    var script = document.createElement('script');
    script.src = 'https://payments.pabbly.com/api/checkout/embed.js?_p=63558XXXXX2daXXXc39f';
    script.async = true; // Load the script asynchronously
    document.body.appendChild(script);
}
// Load the script after the page has fully loaded
window.addEventListener('load', loadPabblyScript);

The Final Code Looks like this

Code:

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
   </head>
   <body>
      <div id="pabbly_checkout"></div>
      <script>
         // Function to dynamically load the script
         function loadPabblyScript() {
            var script = document.createElement('script');
            script.src = 'https://payments.pabbly.com/api/checkout/embed.js?_p=63558XXXXX2daXXXc39f';
            script.async = true; // Load the script asynchronously
            document.body.appendChild(script);
         }
         // Load the script after the page has fully loaded
         window.addEventListener('load', loadPabblyScript);
      </script>
   </body>
</html>

Embedding Pabbly Checkout Page Dynamically or Asynchronously on your Website

Similar threads