Skip to main content

Checkout Overlay Integration Guide

Overview​

Add secure payment checkout to your website in 2 simple steps! The checkout overlay automatically handles everything - no complex setup required.

Quick Start (2 Steps)​

Step 1: Add the script to the end of your <head> element​

Place this script tag at the end of your <head> section, just before the closing </head> tag:

<script type="text/javascript" src="https://app.pulse-billing.com/checkout-overlay.js"></script>

Step 2: Add a button with your checkout URL​

<button class="cp-button" data-checkout-url="https://app.pulse-billing.com/checkout/show/71/78?showCoupon=true&popup=true">
    Buy Now
</button>

✓ That's it! The overlay will automatically open when the button is clicked.

Complete Example​

Here's a complete HTML snippet that you can copy and paste to test the checkout overlay:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout Overlay Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background-color: #f5f5f5;
        }
        .demo-container {
            text-align: center;
            padding: 30px;
            background-color: #f8f9fa;
            border-radius: 10px;
            margin: 20px auto;
            max-width: 600px;
        }
        .cp-button {
            background: rgb(68, 91, 203);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(77, 104, 235, 0.3);
        }
        .cp-button:hover {
            background: rgb(77, 104, 235);
            box-shadow: 0 4px 12px rgba(77, 104, 235, 0.4);
        }
        .demo-text {
            margin-top: 15px;
            color: #666;
            font-size: 0.9em;
        }
    </style>
    <!-- Include the checkout overlay script -->
    <script type="text/javascript" src="https://app.pulse-billing.com/checkout-overlay.js"></script>
</head>
<body>
    <div class="demo-container">
        <h1>Checkout Overlay Demo</h1>
        <p>Click the button below to see the checkout overlay in action:</p>
        
        <button class="cp-button" data-checkout-url="https://app.pulse-billing.com/checkout/show/71/78?showCoupon=true&popup=true">
            Buy Now - $99.99
        </button>
        
        <p class="demo-text">
            Click the button to open the secure checkout overlay
        </p>
    </div>
</body>
</html>

Instructions:

  1. Copy the HTML code above
  2. Save it as demo.html
  3. Open it in your web browser
  4. Click the "Buy Now" button to see the checkout overlay

Note: Add the following CSS to your page to style the demo button:

.cp-button {
    background: rgb(68, 91, 203);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(77, 104, 235, 0.3);
}

.cp-button:hover {
    background: rgb(77, 104, 235);
    box-shadow: 0 4px 12px rgba(77, 104, 235, 0.4);
}

URL Parameters​

Customize your checkout experience with these URL parameters:

ParameterRequiredDescription
popup=trueRequiredOptimizes the checkout UI for popup/overlay display
showCoupon=trueRecommendedShows coupon code input field for discounts
couponCode=[code]OptionalPre-fill a specific coupon code
currency=[code]OptionalSet a specific currency (e.g., USD, EUR)
afid=[id]OptionalAffiliate ID for commission tracking

Affiliate attribution from your own website (optional)​

If affiliates promote your website (e.g. https://yourdomain.com?aff=123) and you want checkouts opened via the overlay to be attributed automatically, add the affiliate tracking script described in Affiliate Management.

Best Practices​

1. Always include popup=true​

This parameter optimizes the checkout UI for overlay/popup display.

2. Place script at the end of <head>​

Include the checkout-overlay.js script at the end of your <head> section, just before </head>. Load it only once per page, even with multiple checkout buttons.

3. Use showCoupon=true​

Allow customers to apply discount codes during checkout.

4. Style the button​

Customize the .cp-button class with CSS to match your website's design.

5. Test on mobile​

The overlay automatically adapts to mobile screens, but always test your implementation.

Custom Button Styling​

Style your checkout button with custom CSS:

.cp-button {
    background: rgb(68, 91, 203);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.cp-button:hover {
    background: rgb(77, 104, 235);
}

Ready to add checkout to your website? Follow the quick start guide above to get up and running in just 2 steps!