> ## Documentation Index
> Fetch the complete documentation index at: https://developer.tazapay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

export const PrimitivesDiagram = () => {
  const NODES = {
    payins: {
      icon: "arrow-down",
      title: "Payins",
      desc: "Collect Funds"
    },
    balances: {
      icon: "scale-balanced",
      title: "Balances",
      desc: "Store Value"
    },
    fx: {
      icon: "arrows-rotate",
      title: "FX",
      desc: "Convert Currency"
    },
    entities: {
      icon: "building-columns",
      title: "Entities",
      desc: "Manage Parties"
    },
    payouts: {
      icon: "paper-plane",
      title: "Payouts",
      desc: "Send Funds"
    }
  };
  const Node = ({n}) => <div className="tz-prim-node">
      <span className="tz-prim-icon">
        <Icon icon={n.icon} size={18} color="var(--tz-icon-color)" />
      </span>
      <div>
        <div className="tz-prim-title">{n.title}</div>
        <div className="tz-prim-desc">{n.desc}</div>
      </div>
    </div>;
  const Branch = ({variant}) => <div className={"tz-prim-branch tz-prim-branch--" + variant}>
      <span className="tz-prim-branch-stem tz-prim-branch-stem--mid" />
      <span className="tz-prim-branch-stem tz-prim-branch-stem--left" />
      <span className="tz-prim-branch-stem tz-prim-branch-stem--right" />
      <span className="tz-prim-branch-bar" />
      <span className="tz-prim-branch-dot tz-prim-branch-dot--mid" />
      <span className="tz-prim-branch-dot tz-prim-branch-dot--left" />
      <span className="tz-prim-branch-dot tz-prim-branch-dot--right" />
    </div>;
  const Line = () => <div className="tz-prim-line">
      <span className="tz-prim-line-dot tz-prim-line-dot--top" />
      <span className="tz-prim-line-dot tz-prim-line-dot--bottom" />
    </div>;
  return <div className="tz-prim-diagram">
      <Node n={NODES.payins} />
      <Line />
      <Node n={NODES.balances} />
      <Branch variant="down" />
      <div className="tz-prim-split">
        <Node n={NODES.fx} />
        <Node n={NODES.entities} />
      </div>
      <Branch variant="up" />
      <Node n={NODES.payouts} />
    </div>;
};

export const ProductTabs = () => {
  const TABS = [{
    id: "gca",
    title: "Collection Accounts",
    link: "/collection-accounts/overview/overview",
    items: [{
      icon: "plus",
      title: "Requesting for VAs",
      desc: "Request virtual accounts via dashboard, API, or support.",
      image: "/images/tab-requestingForVA.png"
    }, {
      icon: "eye",
      title: "Viewing VAs",
      desc: "Inspect provisioned accounts and stablecoin wallets.",
      image: "/images/tab-viewVirtualaccounts.png"
    }, {
      icon: "arrow-down",
      title: "Incoming Payments",
      desc: "Track collects, holds, reversals, and FX events.",
      image: "/images/tab-incoming-Payments.png"
    }, {
      icon: "people-group",
      title: "Collect on behalf of",
      desc: "Receive funds attributed to your customers' entities.",
      image: "/images/tab-collectOBO.png"
    }]
  }, {
    id: "payouts",
    title: "Payouts",
    link: "/payouts/overview/overview",
    items: [{
      icon: "diagram-project",
      title: "Payout Network",
      desc: "Supported rails, corridors, and transfer networks.",
      image: "/images/tab-Payout-network.png"
    }, {
      icon: "circle-dot",
      title: "Creating a Payout",
      desc: "Initiate payouts via dashboard, API.",
      image: "/images/tab-create-Payout.png"
    }, {
      icon: "arrows-rotate",
      title: "Managing FX",
      desc: "Lock rates and attach FX quotes to payouts.",
      image: "/images/tab-managingFX.png"
    }, {
      icon: "rotate-left",
      title: "Reversal",
      desc: "Handle failed payouts and returned funds.",
      image: "/images/tab-reversal.png"
    }]
  }, {
    id: "lpm",
    title: "Local Payments",
    link: "/local-payments/overview/local-payment-methods-lpms",
    items: [{
      icon: "cart-shopping",
      title: "Checkout",
      desc: "Accept payments through hosted or embedded checkout.",
      image: "/images/tab-checkout.png"
    }, {
      icon: "earth-americas",
      title: "Coverage",
      desc: "Supported LPMs by country, currency, and method.",
      image: "/images/tab-lpm-coverage.png"
    }, {
      icon: "plug",
      title: "Integration",
      desc: "Embed LPMs via hosted page, redirect, or JS SDK.",
      image: "/images/tab-integration.png"
    }, {
      icon: "receipt",
      title: "Post-Payment",
      desc: "Settlements, refunds, reconciliation, and webhooks.",
      image: "/images/tab-post-payment.png"
    }]
  }, {
    id: "cards",
    title: "Cards Acceptance",
    link: "/cards/overview/cards",
    items: [{
      icon: "credit-card",
      title: "Overview",
      desc: "Card payments and supported card types.",
      image: "/images/tab-cards-overview.png"
    }, {
      icon: "code",
      title: "Integration",
      desc: "Embed card checkout via JS SDK or hosted page.",
      image: "/images/tab-integrationcard.png"
    }, {
      icon: "receipt",
      title: "Post-Payment",
      desc: "Settlements, refunds, disputes, and reconciliation.",
      image: "/images/tab-card-post-payment.png"
    }]
  }, {
    id: "managed",
    title: "Managed Payments",
    link: "/managed-payments/overview/overview",
    items: [{
      icon: "building-columns",
      title: "Global Treasury",
      desc: "Collect centrally, hold multi-currency, pay out globally.",
      image: "/images/tab-global-treasury.png"
    }, {
      icon: "server",
      title: "Banking as a Service",
      desc: "Stablecoin and fiat infrastructure for fintechs and neobanks.",
      image: "/images/tab-bankingasaservice.png"
    }, {
      icon: "arrows-left-right",
      title: "Transfers within Tazapay",
      desc: "Instant fee-free transfers between Tazapay accounts.",
      image: "/images/tab-managed.png"
    }]
  }, {
    id: "tazamatch",
    title: "Tazamatch",
    link: "/tazamatch/overview/about",
    items: [{
      icon: "circle-info",
      title: "Overview",
      desc: "Payee verification to reduce misdirected payments.",
      image: "/images/tab-overviewTM.png"
    }, {
      icon: "key",
      title: "Key concepts",
      desc: "How Tazamatch validates account holder identity.",
      image: "/images/tab-key.png"
    }, {
      icon: "earth-americas",
      title: "Coverage",
      desc: "Supported countries, banks, and verification schemes.",
      image: "/images/tab-coverage.png"
    }, {
      icon: "code",
      title: "How to use",
      desc: "Integrate payee verification via API before initiating payouts.",
      image: "/images/tab-How-to-use.png"
    }]
  }];
  const INACTIVE_TABS = [{
    id: "ramps",
    title: "Ramps",
    link: "/Ramps/overview",
    items: [{
      icon: "chart-line",
      title: "Overview",
      desc: "Introduction to crypto on/off ramps and supported assets.",
      image: "/images/tab-overviewramp.png"
    }, {
      icon: "wallet",
      title: "Wallet",
      desc: "Manage stablecoin and fiat wallets for ramp transactions.",
      image: "/images/tab-wallet.png"
    }, {
      icon: "arrow-down",
      title: "On-ramp",
      desc: "Convert fiat to crypto via supported payment methods.",
      image: "/images/tab-on-ramp.png"
    }, {
      icon: "arrow-up",
      title: "Off-ramp",
      desc: "Convert crypto to fiat and settle to bank accounts.",
      image: "/images/tab-off-ramp.png"
    }]
  }];
  const [activeTab, setActiveTab] = React.useState(0);
  const [activeItem, setActiveItem] = React.useState(0);
  const [canLeft, setCanLeft] = React.useState(false);
  const [canRight, setCanRight] = React.useState(false);
  const listRef = React.useRef(null);
  const checkScroll = React.useCallback(() => {
    const el = listRef.current;
    if (!el) return;
    setCanLeft(el.scrollLeft > 2);
    setCanRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 2);
  }, []);
  React.useEffect(() => {
    checkScroll();
    const el = listRef.current;
    if (!el) return;
    const ro = new ResizeObserver(checkScroll);
    ro.observe(el);
    return () => ro.disconnect();
  }, [checkScroll]);
  const scroll = dir => {
    const el = listRef.current;
    if (!el) return;
    el.scrollBy({
      left: dir * 200,
      behavior: "smooth"
    });
  };
  const selectTab = i => {
    setActiveTab(i);
    setActiveItem(0);
  };
  const tab = TABS[activeTab];
  return <div className="tz-ptabs">
      <div className="tz-ptabs-nav">
        <button className={"tz-ptabs-arrow" + (canLeft ? "" : " tz-ptabs-arrow--hidden")} onClick={() => scroll(-1)} aria-label="Scroll tabs left">
          <Icon icon="chevron-left" size={13} color="#64748b" />
        </button>
        <div className="tz-ptabs-list" ref={listRef} onScroll={checkScroll}>
          {TABS.map((t, i) => <button key={t.id} className={"tz-ptabs-tab" + (activeTab === i ? " tz-ptabs-tab--active" : "")} onClick={() => selectTab(i)}>
              <Icon icon={t.icon} size={14} color={activeTab === i ? "var(--tz-icon-color)" : "#94a3b8"} />
              {t.title}
            </button>)}
        </div>
        <button className={"tz-ptabs-arrow" + (canRight ? "" : " tz-ptabs-arrow--hidden")} onClick={() => scroll(1)} aria-label="Scroll tabs right">
          <Icon icon="chevron-right" size={13} color="#64748b" />
        </button>
      </div>

      <div className="tz-ptabs-body">
        {tab.comingSoon ? <div className="tz-coming-soon-panel">
            <span className="tz-coming-soon-icon"><Icon icon="clock" size={32} color="var(--tz-icon-color)" /></span>
            <h3 className="tz-coming-soon-title">Coming Soon</h3>
            <p className="tz-coming-soon-desc">This product is under active development. Documentation will be available here once it launches.</p>
          </div> : <div className="tz-ptabs-content">
            <div className="tz-ptabs-items">
              {tab.items.map((item, i) => <div key={i} className={"tz-ptabs-item" + (activeItem === i ? " tz-ptabs-item--active" : "")} onClick={() => {
    window.location.href = tab.link;
  }} onMouseEnter={() => setActiveItem(i)}>
                  <span className="tz-ptabs-item-icon">
                    <Icon icon={item.icon} size={19} color="var(--tz-icon-color)" />
                  </span>
                  <div>
                    <div className="tz-ptabs-item-title">{item.title}</div>
                    <div className="tz-ptabs-item-desc">{item.desc}</div>
                  </div>
                </div>)}
            </div>
            <div className="tz-ptabs-preview">
              <img src={tab.items[activeItem].image} alt={tab.title + " preview"} />
            </div>
          </div>}
      </div>
    </div>;
};

<div className="not-prose">
  <div className="tz-hero">
    <img src="https://mintcdn.com/tazapay-58ae360f/mMgVEcxRPdleXJLj/images/page-hero.png?fit=max&auto=format&n=mMgVEcxRPdleXJLj&q=85&s=20065492af31f87fc457674754c019d7" className="tz-hero-bg-img" alt="" aria-hidden="true" width="2310" height="1346" data-path="images/page-hero.png" />

    <div className="tz-hero-inner">
      <div className="tz-hero-content">
        <div className="tz-hero-left">
          <span className="tz-dev-badge">Developer Documentation</span>

          <h1 className="tz-hero-title">
            Five Primitives

            <br />

            <span className="tz-hero-accent">Infinite Possibilities</span>
          </h1>

          <p className="tz-hero-subtitle">Build any money movement workflow using five composable primitives. Handle collections, balances, FX, payouts and entities seamlessly across fiat and stablecoins.</p>

          <a href="/getting-started/overview/get-started-with-tazapay" className="tz-hero-cta">
            Get Started with Tazapay
          </a>
        </div>

        <div className="tz-hero-right">
          <PrimitivesDiagram />
        </div>
      </div>
    </div>
  </div>
</div>

<div className="tz-page">
  <div className="not-prose">
    <h2 className="tz-section-title">Key capabilities</h2>

    <div className="tz-caps-grid">
      <a href="/getting-started/core-concepts/customer" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="people-group" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">Customer</div>
        <div className="tz-cap-desc">Your end users and payers</div>
      </a>

      <a href="/getting-started/core-concepts/kyb-overview" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="shield-halved" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">KYB</div>
        <div className="tz-cap-desc">Verify businesses before transacting</div>
      </a>

      <a href="/getting-started/core-concepts/account/overview" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="building-columns" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">Account</div>
        <div className="tz-cap-desc">Sub-accounts and entity structure</div>
      </a>

      <a href="/getting-started/core-concepts/payment-method" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="credit-card" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">Payment Method</div>
        <div className="tz-cap-desc">Cards, wallets, and local methods</div>
      </a>

      <a href="/getting-started/core-concepts/payment-attempt/overview" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="money-bill-transfer" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">Payment Attempt</div>
        <div className="tz-cap-desc">Single charge lifecycle & states</div>
      </a>

      <a href="/getting-started/core-concepts/balances/overview" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="scale-balanced" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">Balances</div>
        <div className="tz-cap-desc">Multi-currency funds you hold</div>
      </a>

      <a href="/api-reference/tazapay-api/payout" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="receipt" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">Transactions</div>
        <div className="tz-cap-desc">Payins, payouts, and collects</div>
      </a>

      <a href="/getting-started/core-concepts/fx-transaction/overview" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="arrows-rotate" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">FX Transaction</div>
        <div className="tz-cap-desc">Exchange Rate Configuration</div>
      </a>

      <a href="/getting-started/core-concepts/settlements/overview" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="wallet" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">Settlements</div>
        <div className="tz-cap-desc">How collected funds reach you</div>
      </a>

      <a href="/getting-started/core-concepts/refund/overview" className="tz-cap-card">
        <span className="tz-cap-icon">
          <Icon icon="rotate-left" size={20} color="var(--tz-icon-color)" />
        </span>

        <div className="tz-cap-title">Refund</div>
        <div className="tz-cap-desc">Reverse charges & payin reversals</div>
      </a>
    </div>
  </div>

  <div className="not-prose">
    <span className="tz-platform-badge"><img src="https://mintcdn.com/tazapay-58ae360f/SWJmhDU02-pAjete/images/logos/tazapay-icon.svg?fit=max&auto=format&n=SWJmhDU02-pAjete&q=85&s=cbf85b1132703732bdead8a6fcb07b5a" className="tz-badge-icon" alt="" aria-hidden="true" width="20" height="20" data-path="images/logos/tazapay-icon.svg" />Tazapay Platform</span>
    <h2 className="tz-platform-title">Payment infrastructure for every use case</h2>
    <p className="tz-platform-subtitle">Combine collections, FX, and payouts to power global financial workflows.</p>
  </div>

  <ProductTabs />

  <div className="not-prose tz-resources">
    <h2 className="tz-section-title">Resources</h2>

    <div className="tz-resources-grid">
      <div>
        <div className="tz-res-col-title">Need help?</div>

        <a href="https://tazapay.com/contact-us" className="tz-res-link">
          <Icon icon="message" size={18} />

          Contact support
        </a>

        <a href="https://support.tazapay.com" className="tz-res-link">
          <Icon icon="book" size={18} />

          Knowledge Base
        </a>

        <a href="https://dashboard-sandbox.tazapay.com" className="tz-res-link">
          <Icon icon="lock" size={18} />

          Access sandbox
        </a>
      </div>

      <div>
        <div className="tz-res-col-title">Socials</div>

        <a href="https://www.linkedin.com/company/tazapay" className="tz-res-link">
          <Icon icon="linkedin" iconType="brands" size={18} />

          LinkedIn
        </a>
      </div>
    </div>
  </div>
</div>