Build in minutes, not weeks.

Three steps to your first product grid.

Wrap your app once with your project ID and a public key, then call the hooks anywhere. The provider handles caching, de-duplication, and refetching through TanStack Query.

Step 1 · Wrap your app

import { TramaProvider } from 'trama-sdk';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <TramaProvider
      apiKey={process.env.NEXT_PUBLIC_TRAMA_KEY!}   // a tr_pub_ key — safe in the browser
      projectId="proj_xxxxxxxx"                     // from your dashboard
    >
      {children}
    </TramaProvider>
  );
}

Step 2 · Render products + cart

'use client';
import { useProducts, useCart } from 'trama-sdk';

export default function Store() {
  const { products, isLoading } = useProducts({ limit: 12 });
  const { addItem, goToCheckout } = useCart();

  if (isLoading) return <p>Loading…</p>;

  return (
    <div>
      {products.map((p) => (
        <article key={p.id}>
          <h3>{p.name}</h3>
          <p>{p.price.formatted}</p>
          <button onClick={() => addItem(p.id, p.variants[0]?.id)}>Add to cart</button>
        </article>
      ))}
      <button onClick={goToCheckout}>Checkout →</button>
    </div>
  );
}

Step 3 · Ship

goToCheckout() redirects to your platform's native, hosted checkout — payments, taxes, and order creation stay on Wix, Shopify, or Webflow. You never touch payment code. Deploy to Vercel, Netlify, or anywhere React runs.

Three key types. Know which goes where.

Keys are stored only as one-way hashes — the raw value is shown once at creation. Rotate or revoke any key anytime in Settings → API keys.

React hooks for everything.

Every hook is powered by TanStack Query — they cache, de-duplicate, and refetch on focus by default. Each normalized entity carries a metadata field with the raw platform payload, so you never lose access to native fields.

Content sites, no storefront required.

Blog, marketing, and docs sites use the CMS surface on its own. Discover the connected site's collections — Webflow CMS collections, Wix Data collections, or Shopify metaobject types — then read their items.

'use client';
import { useCmsItems } from 'trama-sdk';

export default function Blog() {
  const { items } = useCmsItems('blog-posts');  // collection id or slug
  return (
    <ul>
      {items.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

To enumerate collections server-side: await client.getCmsCollections().

Gate content with verified members.

Your frontend logs the user in with the platform's own auth (Wix member login, Shopify customer login) and holds the session token. Your backend forwards it to Trama, which verifies it live against the platform and returns a trusted identity. Trama is a verifier — the platform stays the source of truth.

import { TramaClient } from 'trama-sdk';

const trama = new TramaClient({ apiKey: process.env.TRAMA_KEY!, projectId: 'proj_xxxxxxxx' });

export async function requireMember(platformToken: string) {
  const member = await trama.verifyMember(platformToken);
  if (!member) throw new Error('Not signed in');   // invalid / expired
  return member;
  // → { platformId, platform, email, firstName, lastName,
  //     tags: ['vip', 'course-access'], verifiedAt, metadata }
}

Shopify customer tags flow through for tier gating. Webflow has no native membership (User Accounts was discontinued), so verify returns a clear 501 — keep Memberstack/Outseta/your own backend as the identity source and Trama serves the content around it.

Predictable errors, never a black box.

Every response uses one envelope. Errors carry a stable code, a human message, and a requestId for support — never a raw platform error or a leaked secret.

// success
{ "success": true, "data": { /* ... */ }, "meta": { "cacheHit": true } }

// error
{ "success": false,
  "error": { "code": "…", "message": "human-readable message" },
  "requestId": "abc123" }

Handle non-2xx responses by the standard HTTP status: retry 429 after the Retry-After header (the SDK does this for you), re-authenticate on 401, and read error.message for everything else. Every error includes a requestId you can quote to support.

Under the hood: webhooks are signed, deduplicated, and retried automatically; transient failures recover on their own; and your integrations are continuously monitored so they keep working when a platform changes — you're alerted to issues before they reach your users.

Keep building.

The SDK is fully typed, so your editor autocompletes every hook, argument, and response — you rarely need to leave your code. For a guided walkthrough tailored to your platform, see the headless guides for Wix, Shopify, and Webflow. For account, billing, and connection questions, the Help & FAQ has you covered. Still stuck? The support chat in the corner answers straight from these docs.