Welcome

T2Shop Documentation

T2Shop gives you a complete commerce backend — products, cart, checkout, and payments — that you can embed on any website in minutes. No coding experience needed for the basics. Developers get a full API and npm SDK on top.

→Get started in 5 steps →Embed the cart widget →Add and manage products →Accept payments

Setup

Get started in 5 steps

From zero to a live cart on your website in under 15 minutes.

Create your account

Create account →

Create a store

Give your store a name and enter your website URL. You can have multiple stores under one account.

Add products

Go to Products → New product. Every sellable option is a variant — give it a price, stock level, and set it to Active.

Paste the widget on your website

Copy one script tag and paste it before </body> on your site. That's it — the cart appears automatically.

Connect Stripe to accept payments

Go to Payments → Connect Stripe. A short onboarding form and you can take real orders. Money goes directly to your bank.

Integration

Embed the cart widget

Paste this snippet before the </body> tag of your website. Replace YOUR_STORE_ID with the ID shown in your dashboard under Store → Settings.

1. Add the widget to your page

html

<script
  src="https://cdn.jsdelivr.net/npm/@t2devs/t2shop-widget@latest/lib/t2-shop-widgets.iife.js"
  defer
></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    T2ShopWidgets.config({
      apiBaseUrl: "https://t2-shop.com",
      storeId: "YOUR_STORE_ID",
      widgets: { cart: true },
    });
  });
</script>

2. Wire up your Add to cart button

html

<button onclick="addToCart()">Add to cart</button>

<script>
  async function addToCart() {
    try {
      await T2ShopWidgets.cart.addProduct({
        productId: "YOUR_PRODUCT_ID",
        variantId: "YOUR_VARIANT_ID",
        quantity: 1,
      });
    } catch (e) {
      alert("Could not add to cart: " + e.message);
    }
  }
</script>

Where do I find my Product ID and Variant ID?

In the dashboard, open any product. The IDs are shown at the top of the product detail page and in the URL. Each variant (size, colour, etc.) has its own ID.

Using React, Next.js, or Vite?

Install the npm package instead. Full TypeScript support, tree-shakeable, works in any modern framework.

bash

npm install @t2devs/t2shop-widget
pnpm add @t2devs/t2shop-widget
yarn add @t2devs/t2shop-widget
bun add @t2devs/t2shop-widget

import { createT2ShopWidgets } from "@t2devs/t2shop-widget";

export const shop = createT2ShopWidgets({
  apiBaseUrl: "https://t2-shop.com",
  storeId: "YOUR_STORE_ID",
  widgets: { cart: true },
});

// Use anywhere in your app
await shop.cart.addProduct({
  productId: "YOUR_PRODUCT_ID",
  variantId: "YOUR_VARIANT_ID",
  quantity: 1,
});

Catalogue

Managing products

Products live inside your store. Each product can have one or more variants — for example a T-shirt in different sizes or colours. Only Active products appear in your cart.

Creating a product

Go to Products → New product. Fill in the name, then add at least one variant with a price and stock level. Upload an image per variant if you have one. Set the status to Active when it's ready to sell.

Product statuses

Draft — hidden from your cart, work in progress. Active — visible and purchasable. Archived — hidden without being deleted. Useful for seasonal items you plan to bring back.

Stock levels

Stock is per variant. When stock hits zero, that variant can't be added to the cart. Update stock from the variant edit page or from the Orders section after a sale.

Payments

Accepting payments

T2Shop uses Stripe to process card payments. Money goes directly from your customer to your bank — T2Shop never holds your funds.

1. Connect Stripe

In the dashboard, go to Payments → Connect Stripe. Click the button and follow Stripe's short onboarding — takes about 5 minutes.

2. Add your bank account

Stripe will ask for your bank details so it knows where to send payouts. T2Shop never sees this information.

3. You're live

Once connected, your cart will process real card payments. Payouts are deposited on a rolling 2-day schedule.

Testing payments

Before going live, use Stripe's test card 4242 4242 4242 4242 with any future expiry date and any 3-digit CVC. No real money moves.

Cash on delivery

You can also accept cash on delivery for in-person orders. Create the order manually in the dashboard and mark it paid once you collect cash.

Security

Allowed domains

Your cart widget will only load on domains you explicitly allow. This prevents anyone else from embedding your store on their website.

How to add your domain

1. Dashboard → Store → Security
2. Under Trusted Origins, enter your full website URL
3. Save — the cart will work on that domain immediately

Cart not loading?

The most common reason is a missing trusted origin. Make sure you've added your exact URL including https://. Add www and non-www separately if you use both.

Orders

Viewing orders

Every completed checkout creates an order in your dashboard. Go to Orders to see everything your customers have bought.

Order statuses

Pending → Requires payment → Paid → Fulfilled. You can see the full status on each order's detail page.

Customer details

Each order shows the customer's name, email, and exactly what they bought including variant labels and quantities.

Payment records

The payment section of each order includes the Stripe payment ID and the amount charged. Keep this for refunds or reconciliation.

Go live

Ready to take real orders?

Run through this list before accepting your first real payment.

Account created and email verified

Store created with a name and site URL

At least one product set to Active

Widget script added to your website

Your website domain added under Store → Security → Trusted Origins

Stripe account connected from Payments → Connect Stripe

Test checkout using Stripe test card 4242 4242 4242 4242

All checked off?

You're ready. Place a real test order with a small amount to confirm the full flow.

Open your dashboard →