Embedded Checkout

How Embedded Checkout Works

Embedded Checkout renders the payment form inline within a container element on your page. Unlike Popup Checkout, the form is part of your page layout rather than an overlay.

Benefits:

• Inline experience — feels native to your page
• Full control over layout — place it anywhere in your flow
• PCI compliant — sensitive data handled in a secure iframe
• Responsive — adapts to your container width

Integration

Add a container element and mount the checkout form:

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

<script src="https://payments.hlhunt.org/js/hlhunt-checkout.js"></script>
<script>
  var checkout = HLHunt.checkout.mount("#checkout-container", {
    sessionKey: "cs_abc123",
    onSuccess: function (payload) {
      window.location.href = "/thank-you";
    },
    onCancel: function (payload) {
      console.log("Buyer cancelled", payload);
    },
    onError: function (payload) {
      console.error("Checkout error", payload);
    }
  });

  // checkout.unmount() removes the iframe when you no longer need it.
</script>

1. Create a Checkout Session on your server.
2. Add a <div> where you want the form to appear.
3. Call HLHunt.checkout.mount() with the container selector and the session key.
4. Handle the success callback to redirect or show a confirmation. The call returns an object with an unmount() method and the underlying iframe.

Mount Options

The embedded form renders in an auto-resizing iframe and is styled by your HL Hunt branding settings, not by page CSS. The mount call accepts these options: