@tineon/t9n

Framework-agnostic checkout SDK for Tineon (T9N). Works in React, Vue, Angular, and plain JavaScript apps.

Modal strategy

• Uses Shadow DOM (not iframe) for integration flexibility.
• Uses max overlay z-index (2147483647) to stay above host app UI.

Features

• Button trigger (createButton / mountButton)
• Non-button trigger support (bindTrigger)
• Button style overrides (text, theme, className, inline style)
• 15-minute checkout session flow
• Native-currency-only checkout enforcement
• Address generation + QR + confirmation flow
• Lifecycle hooks (onOpen, onStatusChange, onSuccess, onFail, etc.)

Install

npm i @tineon/t9n

Quickstart

import { initializeT9n } from "@tineon/t9n";

const checkout = initializeT9n({
  publicKey: "pk_live_xxx",
  amountNgn: 50000,
  currencies: ["BTC", "ETH", "TRX"],
  customer: { email: "[email protected]", name: "Ada", reference: "order-123" },
  metadata: { orderId: "order-123" },
  callbackUrl: "https://merchant.example.com/payment/success",
  hooks: {
    onSuccess: ({ sessionId }) => console.log("paid", sessionId),
    onFail: ({ error }) => console.error("checkout error", error),
  },
});

checkout.mountButton("#pay-btn-slot", {
  text: "Pay with Crypto",
  theme: "solid",
});

Triggers

checkout.open();

const detach = checkout.bindTrigger("#custom-card-pay", "click");
// later: detach()

Runtime config

type CheckoutConfig = {
  publicKey: string; // required, pk_live_*
  amountNgn: number;
  currencies: NativeCurrency[]; // required, native only, no duplicates
  customer: { email: string; name?: string; reference?: string }; // email is required
  metadata?: Record<string, unknown>;
  callbackUrl?: string;
  requestTimeoutMs?: number;
  pollIntervalMs?: number;
  hooks?: {
    onOpen?: () => void;
    onClose?: () => void;
    onSessionCreated?: (session) => void;
    onCurrencySelected?: (payload) => void;
    onStatusChange?: (status) => void;
    onSuccess?: (payload) => void;
    onFail?: (payload) => void;
  };
  button?: {
    text?: string;
    className?: string;
    theme?: "solid" | "light" | "outline";
    style?: Record<string, string>;
  };
};