Add a shop to any website in minutes.

Go from signup to a live cart on your website in under 15 minutes.

1. 01

   Create an account

   Sign up at /register — takes 30 seconds, no credit card required.

   /register
2. 02

   Create your store

   Give it a name and your website URL. You can have multiple stores later.

3. 03

   Add products

   Go to Products → New product. Set a name, price, and stock count.

4. 04

   Embed the cart widget

   Paste one script tag into your website. Works on any platform — Webflow, WordPress, plain HTML.

5. 05

   Connect your bank

   Go to Payments → Connect Stripe. A quick onboarding form and you can start accepting payments.

Choose how you integrate: script tag + global (no bundler) or npm package + createT2ShopWidgets (React, Next.js, Vite, etc.). The cart opens as a slide-over drawer. Logged-in merchants can copy snippets from the dashboard under Integration.

<!-- Paste before </body> on every page. Use your hosted widget URL (see dashboard → Integration). -->
<script src="https://cdn.t2shop.dev/widget/latest/t2shop-widget.js" defer></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    T2ShopWidgets.config({
      apiBaseUrl: "https://YOUR_T2SHOP_DOMAIN",
      storeId: "YOUR_STORE_ID",
      widgets: {
        cart: true,
        // Or pass options instead of true:
        // cart: {
        //   elementName: "t2-cart-widget",
        //   theme: { primaryColor: "#2563eb", mode: "light" },
        //   ui: { floatingPlacement: "bottom-right", floatingSize: "sm" },
        // },
      },
    });
  });
</script>

// Cart is available only after config() with widgets.cart enabled.
// Optional: guard custom "Add to cart" buttons
if (!T2ShopWidgets.isCartWidgetEnabled()) return;

// Open / close the cart drawer
T2ShopWidgets.cart.open();
T2ShopWidgets.cart.close();

// Add a line item (image URL is required for the cart row)
await T2ShopWidgets.cart.addProduct({
  productId: "YOUR_PRODUCT_ID",
  image: "https://your-cdn.com/product.jpg",
  quantity: 1,
});

// Small static sites: pass name + price yourself (no separate catalog API call for the line label)
await T2ShopWidgets.cart.addProduct({
  productId: "YOUR_PRODUCT_ID",
  name: "Handmade mug",
  price: 24.99,
  image: "https://your-cdn.com/mug.jpg",
  quantity: 1,
});

// Recommended: one module that creates a single SDK instance (singleton) and
// re-exports it. Import that module once at app startup (e.g. main.tsx / root layout client).
// Same pattern as the open-source demo: t2shop-widget/app/widget-init.ts

import { createT2ShopWidgets } from "t2-shop-widgets";

export const widgetApi = createT2ShopWidgets({
  apiBaseUrl: "https://YOUR_T2SHOP_DOMAIN",
  storeId: "YOUR_STORE_ID",
  widgets: {
    cart: {
      theme: { primaryColor: "#2563eb", mode: "light" },
      ui: { floatingPlacement: "bottom-right", floatingSize: "sm" },
    },
  },
});

// Elsewhere in your app:
// import { widgetApi } from "@/lib/t2shop-widget";
// await widgetApi.products.get({ pageSize: 50 });
// await widgetApi.cart.addProduct({ productId, image, quantity: 1 });

// React, Next.js, Vite — install "t2-shop-widgets" and call createT2ShopWidgets once:
import { createT2ShopWidgets } from "t2-shop-widgets";

const shop = createT2ShopWidgets({
  apiBaseUrl: "https://YOUR_T2SHOP_DOMAIN",
  storeId: "YOUR_STORE_ID",
  widgets: { cart: true },
});

await shop.cart.addProduct({
  productId: "YOUR_PRODUCT_ID",
  image: "https://your-cdn.com/product.jpg",
  quantity: 1,
});

If you build a custom grid or search (not only static HTML cards), the SDK can fetch your store catalog from the same public endpoint as the cart: GET /api/public/v1/products. Call .products.get after config or on a createT2ShopWidgets instance.

// After T2ShopWidgets.config(...) — wraps GET /api/public/v1/products
// page = 1-based page index; pageSize = 1–100 per request; search = filter by name/slug
const { items, total, page, pageSize } = await T2ShopWidgets.products.get({
  status: "ACTIVE",
  page: 1,
  pageSize: 20,
  search: "mug",
});

// With createT2ShopWidgets → widgetApi (widgets/products/sdk.ts)
const { items, total, page, pageSize } = await widgetApi.products.get({
  status: "ACTIVE",
  page: 2,
  pageSize: 20,
  search: "desk",
});

// Pagination: use response.total and pageSize to compute pages (e.g. Math.ceil(total / pageSize))
const pageSize = 20;
let page = 1;
const { items, total, page: currentPage } = await widgetApi.products.get({
  status: "ACTIVE",
  page,
  pageSize,
});
const totalPages = Math.max(1, Math.ceil(total / pageSize));
// Next page: await widgetApi.products.get({ ...params, page: currentPage + 1, pageSize });

T2Shop uses Stripe to process payments. Each store connects its own Stripe account — money goes directly to your bank without passing through T2Shop.

For security, your cart widget only works on domains you explicitly allow. This prevents anyone else from embedding your store on their website.

Every checkout from your cart widget creates an order in your dashboard.

Run through this before accepting your first real payment.

• Account created and verifiedDone
• Store created with a name and site URLDone
• At least one product set to ActiveDone
• Widget script added to your websiteDone
• Your website domain added under Store → Security → Trusted Origins
• Stripe account connected from Payments → Connect Stripe
• Test checkout from your live website