Checkout

npm install @rebornpay/checkout-3ds

const API_BASE = "https://sandbox-api.rebornpay.io";

function collectDeviceInformation() {
  const javaEnabled =
    typeof navigator.javaEnabled === "function" ? navigator.javaEnabled() : false;
  return {
    httpBrowserLanguage: navigator.language || "pt-BR",
    httpBrowserJavaEnabled: String(javaEnabled),
    httpBrowserColorDepth: String(screen.colorDepth),
    httpBrowserScreenHeight: String(screen.height),
    httpBrowserScreenWidth: String(screen.width),
    httpBrowserTimeDifference: String(new Date().getTimezoneOffset()),
    userAgentBrowserValue: navigator.userAgent,
    httpAcceptContent: "*/*",
    ipAddress: "0.0.0.0", // seu BFF deve sobrescrever com o IP real
  };
}

function waitForDeviceCollection(url, accessToken) {
  return new Promise((resolve, reject) => {
    const iframeName = `reborn-3ds-ddc-${crypto.randomUUID()}`;
    const iframe = document.createElement("iframe");
    iframe.name = iframeName;
    iframe.style.cssText = "display:none;width:1px;height:1px;border:0";
    const form = document.createElement("form");
    form.method = "POST";
    form.action = url;
    form.target = iframeName;
    form.style.display = "none";
    const jwt = document.createElement("input");
    jwt.type = "hidden";
    jwt.name = "JWT";
    jwt.value = accessToken;
    form.appendChild(jwt);
    let settled = false;
    const cleanup = () => { form.remove(); iframe.remove(); };
    iframe.onload = () => {
      if (settled) return;
      settled = true;
      setTimeout(() => { cleanup(); resolve(); }, 2000);
    };
    iframe.onerror = () => {
      if (settled) return;
      settled = true;
      cleanup();
      reject(new Error("3DS device collection failed"));
    };
    document.body.appendChild(iframe);
    document.body.appendChild(form);
    form.submit();
  });
}

function runChallengeStepUp(stepUpUrl) {
  return new Promise((resolve) => {
    const iframe = document.createElement("iframe");
    iframe.title = "Autenticação 3DS";
    iframe.src = stepUpUrl;
    iframe.style.cssText =
      "position:fixed;inset:0;width:100%;height:100%;z-index:9999;border:0;background:#fff";
    iframe.onload = () => setTimeout(() => { iframe.remove(); resolve(); }, 8000);
    document.body.appendChild(iframe);
  });
}

async function api(path, { method = "GET", body, apiKey } = {}) {
  const res = await fetch(`${API_BASE}${path}`, {
    method,
    headers: {
      "Content-Type": "application/json",
      ...(apiKey ? { "X-Api-Key": apiKey } : {}),
    },
    body: body ? JSON.stringify(body) : undefined,
  });
  if (!res.ok) throw new Error(await res.text());
  return res.json();
}

async function payWithCard({ paymentLinkId, cardToken, buyer, returnUrl, apiKey }) {
  const session = await api("/v1/checkout-sessions", {
    method: "POST",
    apiKey,
    body: {
      paymentLinkId,
      customer: {
        name: buyer.name,
        email: buyer.email,
        document: buyer.document.replace(/\D/g, ""),
      },
    },
  });

  const sessionId = session.sessionId;

  const setup = await api(`/v1/checkout-sessions/${sessionId}/threeds/setup`, {
    method: "POST",
    apiKey,
    body: { slugToken: cardToken },
  });

  await waitForDeviceCollection(setup.deviceDataCollectionUrl, setup.accessToken);

  const auth = await api(
    `/v1/checkout-sessions/${sessionId}/threeds/authenticate?paymentMethod=CREDIT_CARD`,
    {
      method: "POST",
      apiKey,
      body: {
        slugToken: cardToken,
        returnUrl,
        deviceChannel: "BROWSER",
        deviceInformation: collectDeviceInformation(),
        billing: buyer.billing,
      },
    },
  );

  let threeDs;
  if (auth.xid && auth.cavv && auth.directoryServerTransactionId) {
    threeDs = {
      xid: auth.xid,
      cavv: auth.cavv,
      cavvResultCode: "2",
      secureVersion: auth.specificationVersion ?? "2.1.0",
      directoryServerTransactionId: auth.directoryServerTransactionId,
      threeDsServerTransactionId: auth.authenticationTransactionId,
    };
  } else {
    if (auth.stepUpUrl) await runChallengeStepUp(auth.stepUpUrl);
    const challenge = await api(
      `/v1/checkout-sessions/${sessionId}/threeds/challenge-result`,
      {
        method: "POST",
        apiKey,
        body: { authenticationTransactionId: auth.authenticationTransactionId },
      },
    );
    threeDs = {
      xid: challenge.xid,
      cavv: challenge.cavv,
      cavvResultCode: "2",
      secureVersion: challenge.secureVersion,
      directoryServerTransactionId: challenge.directoryServerTransactionId,
      threeDsServerTransactionId: challenge.threeDsServerTransactionId,
    };
  }

  return api(`/v1/checkout-sessions/${sessionId}/confirm`, {
    method: "POST",
    apiKey,
    body: {
      paymentMethod: "CREDIT_CARD",
      installments: 1,
      cardToken,
      threeDs,
    },
  });
}