Skip to content
NervixPayDocs

Embed checkout on any website

Paste the NervixPay HTML snippet into any site, attach reconciliation metadata, and test it end to end without trusting browser-supplied identity.

An embed puts the checkout inside your own page. The snippets below are generated by the same code as the Embeds page in your dashboard; only the link id is a placeholder.

  1. Step 1: Create an embed

    Open Embeds, name it, set the prices and pick a layout: card (full checkout), inline (a compact bar) or button (a floating button in the corner). You can also set a page to redirect to after payment.

  2. Step 2: Copy the HTML snippet

    Press copy on the embed. It is an iframe plus a small script that resizes the iframe to fit. Replace YOUR-LINK-ID if you copy from here.

    HTML embed (card)
    <iframe
  src="https://nervixpay.live/l/YOUR-LINK-ID?mode=card"
  width="420"
  height="640"
  style="border:0;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);border-radius:16px;"
  title="Pay with NervixPay"
  data-ref=""
  data-email=""
></iframe>
<script>
(function () {
  var iframe = document.currentScript && document.currentScript.previousElementSibling;
  if (!iframe || iframe.tagName !== "IFRAME") return;
  var ref = iframe.getAttribute("data-ref");
  var email = iframe.getAttribute("data-email");
  if (ref || email) {
    var checkout = new URL(iframe.src);
    if (ref) checkout.searchParams.set("ref", ref);
    if (email) checkout.searchParams.set("email", email);
    iframe.src = checkout.toString();
  }
  window.addEventListener("message", function (event) {
    if (event.origin !== new URL(iframe.src).origin || event.source !== iframe.contentWindow) return;
    if (!event.data || event.data.type !== "lumenpay:resize") return;
    var height = event.data.height;
    var width = event.data.width;
    if (Number.isFinite(height) && height > 0 && height <= 10000) iframe.style.height = height + "px";
    if (Number.isFinite(width) && width > 0 && width <= 4000) iframe.style.width = width + "px";
  });
})();
</script>

  3. Step 3: Tell NervixPay who is paying

    Fill data-ref with a reconciliation label and data-email with the customer's email. The browser sends both values, so a customer can change them. They come back on the payment, in the API and in the webhook, but they are untrusted metadata, not proof of identity. Leave them empty for anonymous payments.

    With customer details
    <iframe
  src="https://nervixpay.live/l/YOUR-LINK-ID?mode=card"
  width="420"
  height="640"
  style="border:0;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);border-radius:16px;"
  title="Pay with NervixPay"
  data-ref="user_42"
  data-email="buyer@example.com"
></iframe>
<script>
(function () {
  var iframe = document.currentScript && document.currentScript.previousElementSibling;
  if (!iframe || iframe.tagName !== "IFRAME") return;
  var ref = iframe.getAttribute("data-ref");
  var email = iframe.getAttribute("data-email");
  if (ref || email) {
    var checkout = new URL(iframe.src);
    if (ref) checkout.searchParams.set("ref", ref);
    if (email) checkout.searchParams.set("email", email);
    iframe.src = checkout.toString();
  }
  window.addEventListener("message", function (event) {
    if (event.origin !== new URL(iframe.src).origin || event.source !== iframe.contentWindow) return;
    if (!event.data || event.data.type !== "lumenpay:resize") return;
    var height = event.data.height;
    var width = event.data.width;
    if (Number.isFinite(height) && height > 0 && height <= 10000) iframe.style.height = height + "px";
    if (Number.isFinite(width) && width > 0 && width <= 4000) iframe.style.width = width + "px";
  });
})();
</script>

  4. Step 4: Paste it into your page

    Put the snippet where the checkout should appear. For a site builder, follow WordPress, Shopify, Wix, Squarespace and Webflow.

  5. Step 5: Confirm payments on your server

    When the order is paid the embed posts a nervixpay:paid message to your page. Use it only to update what the customer sees: any script can post that message. Unlock orders from the signed webhook or the payments API.

Other layouts and formats

HTML embed (floating button)
<iframe
  src="https://nervixpay.live/l/YOUR-LINK-ID?mode=button"
  width="180"
  height="60"
  style="border:0;max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);position:fixed;bottom:24px;right:24px;z-index:2147483000;"
  title="Pay with NervixPay"
  data-ref=""
  data-email=""
></iframe>
<script>
(function () {
  var iframe = document.currentScript && document.currentScript.previousElementSibling;
  if (!iframe || iframe.tagName !== "IFRAME") return;
  var ref = iframe.getAttribute("data-ref");
  var email = iframe.getAttribute("data-email");
  if (ref || email) {
    var checkout = new URL(iframe.src);
    if (ref) checkout.searchParams.set("ref", ref);
    if (email) checkout.searchParams.set("email", email);
    iframe.src = checkout.toString();
  }
  window.addEventListener("message", function (event) {
    if (event.origin !== new URL(iframe.src).origin || event.source !== iframe.contentWindow) return;
    if (!event.data || event.data.type !== "lumenpay:resize") return;
    var height = event.data.height;
    var width = event.data.width;
    if (Number.isFinite(height) && height > 0 && height <= 10000) iframe.style.height = height + "px";
    if (Number.isFinite(width) && width > 0 && width <= 4000) iframe.style.width = width + "px";
  });
})();
</script>
JavaScript embed (fills a div)
<div data-nervixpay-embed data-ref="" data-email=""></div>
<script>
(function () {
  var target = document.currentScript && document.currentScript.previousElementSibling;
  if (!target || target.tagName !== "DIV") return;
  var iframe = document.createElement('iframe');
  iframe.src = "https://nervixpay.live/l/YOUR-LINK-ID?mode=card";
  var ref = target.getAttribute("data-ref");
  var email = target.getAttribute("data-email");
  if (ref || email) {
    var checkout = new URL(iframe.src);
    if (ref) checkout.searchParams.set("ref", ref);
    if (email) checkout.searchParams.set("email", email);
    iframe.src = checkout.toString();
  }
  iframe.width = "420";
  iframe.height = "640";
  iframe.style.border = "0";
  iframe.style.maxWidth = "calc(100vw - 48px)";
  iframe.style.maxHeight = "calc(100dvh - 48px)";
  iframe.style.borderRadius = "16px";
  iframe.title = "Pay with NervixPay";
  target.appendChild(iframe);
  window.addEventListener("message", function (event) {
    if (event.origin !== new URL(iframe.src).origin || event.source !== iframe.contentWindow) return;
    if (!event.data || event.data.type !== "lumenpay:resize") return;
    var height = event.data.height;
    var width = event.data.width;
    if (Number.isFinite(height) && height > 0 && height <= 10000) iframe.style.height = height + "px";
    if (Number.isFinite(width) && width > 0 && width <= 4000) iframe.style.width = width + "px";
  });
})();
</script>
Embed checkout on any website | NervixPay Docs