Embed NextPay in your app

Three integration shapes: iframe (simplest), JavaScript SDK (programmatic), React component (typed). All three carry an SSO token from your host application so users don't double-sign-in.

1. Get an SSO token from your backend

The widget never asks the user for credentials — your host application is already authenticated. Issue a short-lived signed token containing the user's identity and pass it to the widget. Below is the canonical Node implementation.

// Backend (Node) — issue an SSO token for the current user.
import { createHmac } from "node:crypto";

function base64Url(buf) {
  return Buffer.from(buf).toString("base64")
    .replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}

export function issueNextPaySsoToken(user, tenantSlug) {
  const claims = {
    sub: user.id,
    email: user.email,
    name: user.fullName,
    tenantSlug,
    iat: Math.floor(Date.now() / 1000),
    exp: Math.floor(Date.now() / 1000) + 5 * 60, // 5 minute TTL
  };
  const payload = base64Url(Buffer.from(JSON.stringify(claims)));
  const sig = base64Url(
    createHmac("sha256", process.env.NEXTPAY_SSO_SHARED_SECRET)
      .update(payload).digest()
  );
  return payload + "." + sig;
}

2a. Embed via iframe (simplest)

Drop the iframe in your page and listen for postMessage events. Works with any framework.

html

<!-- NextPay payment widget -->
<iframe
  src="https://pay.nextics.com/widget?sso_token=YOUR_SSO_TOKEN"
  width="400"
  height="560"
  frameborder="0"
  style="border: none; border-radius: 12px;"
  allow="payment"
></iframe>

<!-- Listen for payment events -->
<script>
  window.addEventListener("message", function (event) {
    if (event.data?.type === "nextpay:payment_success") {
      console.log("Payment", event.data.transactionId, "settled");
      // your post-payment logic here
    }
  });
</script>

2b. Embed via JavaScript SDK

Open the widget programmatically. Useful for buttons, modals, conditional flows.

html

<!-- NextPay JS SDK -->
<script src="https://pay.nextics.com/sdk/v1/nextpay.js"></script>
<script>
  // Get an SSO token from YOUR backend (it signs with the shared secret).
  const ssoToken = await fetch("/internal/issue-nextpay-sso-token").then(r => r.text());

  NextPay.openWidget({
    ssoToken,
    recipient: "alice@example.com",
    amount: 25,
    currency: "EUR",
    onSuccess: (result) => console.log("paid", result.transactionId),
    onError:   (err)    => console.error(err),
  });
</script>

2c. Embed via React component

Typed React component with the same props as the SDK.

jsx

import { NextPayWidget } from "@nextpay/react";

export function CheckoutSection({ ssoToken }) {
  return (
    <NextPayWidget
      ssoToken={ssoToken}
      recipient="alice@example.com"
      amount={25}
      currency="EUR"
      onSuccess={(r) => console.log("paid", r.transactionId)}
      onError={(e) => console.error(e)}
    />
  );
}

Production notes. Lock down NEXTPAY_ALLOWED_FRAME_ANCESTORS on the widget host (e.g. https://nextics.com https://*.nextics.com) so only your hosts can iframe the widget. Rotate NEXTPAY_SSO_SHARED_SECRET regularly; consider migrating to JWT with key rotation when traffic warrants.