Skip to main content

Embedded Checkout Integration

Allows you to embed the payment form within your own site. Thanks to Shadow DOM, the widget's CSS does not affect your site's styles, and your site's styles do not affect the widget.

How Does It Work? (Shadow DOM)​

Shadow DOM creates an isolated DOM tree inside an HTML element. This means:

  • The widget's CSS does not affect the outside
  • External CSS does not break the widget
  • JavaScript events work properly
Your Website
├── Navbar
├── Content
│   └── #paylox-checkout ← Container
│       └── Shadow DOM (isolated area)
│           ├── Widget CSS
│           └── Payment Form
└── Footer

Setup​

Step 1: Add the Script File​

Add the following script before the <head> or <body> closing tag of your site:

<script src="https://checkout.paylox.io/sdk/paylox.js"></script>
Performance Tip

You can prevent your page from slowing down by loading the script with async or defer:

<script src="https://checkout.paylox.io/sdk/paylox.js" async></script>

Step 2: Create a Container​

Create an HTML element where the widget will be rendered:

<div id="paylox-checkout"></div>

This element determines where the widget will appear on your page. The widget is added inside this element in isolation.

Step 3: Initialize the Widget​

Initialize the widget with the session_id you received from your backend:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    Paylox.init({
      sessionId: "ses_a1b2c3d4e5f6g7h8i9j0k1l2",
      container: "#paylox-checkout",
      onSuccess: function(data) {
        console.log("Payment successful!", data);
        window.location.href = "/payment/success?order_id=" + data.order_id;
      },
      onFail: function(error) {
        console.log("Payment failed:", error);
        alert("Payment failed: " + error.message);
      },
      onClose: function() {
        console.log("Widget closed");
      }
    });
  });
</script>

Full Working Example​

You can copy the following HTML file and open it directly in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        h1 {
            color: #333;
        }
        .order-summary {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        #paylox-checkout {
            min-height: 400px;
        }
    </style>
</head>
<body>
    <h1>Order Payment</h1>

    <div class="order-summary">
        <h3>Order Summary</h3>
        <p>Product: Wireless Headphones</p>
        <p>Amount: <strong>150.00 TL</strong></p>
    </div>

    <div id="paylox-checkout"></div>

    <script src="https://checkout.paylox.io/sdk/paylox.js"></script>
    <script>
        const SESSION_ID = "ses_ENTER_SESSION_ID_HERE";

        Paylox.init({
            sessionId: SESSION_ID,
            container: "#paylox-checkout",
            onSuccess: function(data) {
                alert("Payment successful! Order No: " + data.order_id);
                window.location.href = "/thank-you";
            },
            onFail: function(error) {
                alert("Payment failed: " + error.message);
            }
        });
    </script>
</body>
</html>

Init Parameters​

ParameterTypeRequiredDescription
sessionIdstringYesCheckout session ID received from your backend
containerstringNoCSS selector. Default: #paylox-checkout
onSuccessfunctionNoCalled when payment is successful
onFailfunctionNoCalled when payment fails
onClosefunctionNoCalled when widget is closed

Removing the Widget​

To programmatically remove the widget:

Paylox.destroy();

Frequently Asked Questions​

Why doesn't the widget break my page's styles?​

Embedded Checkout uses Shadow DOM technology, so all of the widget's CSS runs in an isolated area. The widget's styles don't leak to your page, and your page's styles don't enter the widget.

Can multiple widgets be used on the same page?​

No. Only one Paylox widget can be active at a time. Call Paylox.destroy() before initializing a second widget.

Does the widget work on mobile?​

Yes. The widget has a responsive design and works seamlessly on mobile devices.

Are Content Security Policy (CSP) settings required?​

Yes. You need to add the following domains to your whitelist:

script-src: https://checkout.paylox.io
connect-src: https://api.jetcheckout.com

Troubleshooting​

IssueSolution
Widget not showingMake sure the container element exists in the DOM
"Session not found" errorMake sure the Session ID is correct and hasn't expired
CSS looks brokenCheck from the console that the script loaded correctly
CORS errorMake sure your site's domain is added to the API URL's CORS settings