# Virtual Try‑On (VTO) for E‑Commerce: B2B2C Integration Guide

This playbook shows how to build a production‑ready Virtual Try‑On (VTO) platform for Turkish e‑commerce sites. Users register by email, explicitly consent (KVKK/GDPR), and receive a credit allowance (e.g., 10 tries) to virtually try products like gözlük, ayakkabı, küpe, bileklik, and kıyafet. When credits run out, the UI prompts users to purchase a package. Admins manage customers, credits, and products from a secure panel.

We’ll use **Zoer** to rapidly generate the full‑stack app and admin surface, then integrate a third‑party **AR/AI VTO provider** (e.g., Jeeliz, Banuba, DeepAR, Wanna Kicks) to power face/body tracking and product overlay — the “magic” that requires specialized CV/AR SDKs.

## The Prompt That Generates the App (Rephrased)
Use this in Zoer to scaffold your VTO service (faithful to requirements, not verbatim):

```
"Create a Turkish VTO integration platform for e‑commerce websites. Users register by email, check an explicit consent box (KVKK/GDPR), and receive a credit limit (e.g., 10 tries) to virtually try products (glasses, shoes, earrings, bracelets, clothing). Each try matches a product image/asset with the user’s photo or camera feed via an external AR/AI provider SDK/API. When credits are exhausted, show 'krediniz tükendi, lütfen paket satın alın'. Include an admin panel to view/delete customers, increase/decrease credits, and add/delete products. Store all data automatically on signup."
```

## B2B2C Model and Architecture
- **B2B**: You sell the VTO widget/service to merchants; they embed your script or iframe.
- **B2C**: End‑users on merchant sites consume credits to try on items.
- **Hybrid approach**: Zoer generates the core app (auth, admin interface, DB, Turkish UI), you integrate the AR/AI provider SDK and payment upsell.

## Core Data Model (PostgreSQL)
```
-- Users: email signup, consent, credits
CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  email VARCHAR(255) UNIQUE NOT NULL,
  password_hash TEXT NOT NULL,
  izin_onayi BOOLEAN NOT NULL,
  kredi_limiti INTEGER DEFAULT 10,
  kredi_kalan INTEGER DEFAULT 10,
  created_at TIMESTAMP DEFAULT NOW()
);

-- Products: catalog with VTO assets
CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  isim VARCHAR(255) NOT NULL,
  kategori VARCHAR(100) NOT NULL, -- gozluk | ayakkabi | kupe | bileklik | kiyafet
  foto_url TEXT,
  vto_provider VARCHAR(50), -- jeeliz | banuba | deepar | wanna
  vto_asset_ref TEXT,       -- provider asset id / config
  created_at TIMESTAMP DEFAULT NOW()
);

-- Sessions: try events for auditing/limits
CREATE TABLE sessions (
  id SERIAL PRIMARY KEY,
  user_id INTEGER REFERENCES users(id),
  product_id INTEGER REFERENCES products(id),
  deneme_tarihi TIMESTAMP DEFAULT NOW()
);
```

## Turkish UX, Consent, and Credits
- Site language: Türkçe (labels, toasts, errors).
- Registration form requires email + checkbox: “KVKK/GDPR kapsamında açık rıza veriyorum”.
- After each try, decrement `kredi_kalan`. When `kredi_kalan = 0`, show: “Krediniz tükendi, lütfen paket satın alın”.
- Offer Stripe‑based upsell to buy additional credits (Zoer can scaffold Stripe flows; plug in pricing tiers).

## Integrating AR/AI VTO Providers
VTO is not a generic API — it needs SDKs with face/body tracking, landmarks, and 2D/3D overlays. Popular options:
- **Jeeliz**: WebGL face tracking for glasses overlays
- **Banuba**: Face AR SDK for web/mobile, supports try‑on
- **DeepAR**: Real‑time AR filters and virtual try‑on
- **Wanna Kicks / Similar**: Footwear try‑on (mobile SDKs)

Integration pattern:
1. Load provider JS/wasm SDK on the product page or embedded widget (script tag or ES module).
2. Initialize with provider key (stored server‑side; issue short‑lived tokens to client).
3. For face items (gözlük, küpe), use camera feed or uploaded image; apply overlay/render.
4. For body items (kıyafet, ayakkabı), use provider’s body/foot tracking pipeline.
5. Emit a “try” event to backend → record `sessions` row and decrement credits.

Security and operations:
- Store provider keys in a secret manager; never expose long‑lived keys.
- Use presigned URLs for image uploads to S3/R2; serve assets via CDN.
- Validate file types/sizes; process thumbnails on upload.

## Admin Panel
- View/search customers; delete accounts on request.
- Adjust credits (increase/decrease), reset limits.
- Add/remove products; attach `vto_asset_ref` per provider.
- Monitor “try” volume and credit consumption analytics.

## What Zoer Generates vs What You Add
| Capability | Zoer | Your Integration |
| --- | --- | --- |
| Auth (email/password), Turkish UI, consent capture | Generated | Configure i18n strings, consent storage |
| DB schema, CRUD admin, product catalog | Generated | Extend with VTO fields (`vto_provider`, `vto_asset_ref`) |
| Stripe checkout for credits | Generated | Map packages to credit top‑ups |
| AR/AI VTO rendering | Not built‑in | Integrate provider SDK (Jeeliz/Banuba/DeepAR/Wanna) + WebGL |
| Secure key management | Partially | Vault/Secrets Manager + short‑lived client tokens |

## Credit Logic (Sketch)
```
onTry(productId):
  if user.kredi_kalan <= 0: show "krediniz tükendi..."; return
  renderVTO(productId) // provider SDK
  POST /api/try { productId }
    → validate, insert sessions row, set kredi_kalan = kredi_kalan - 1
    → return remaining credits
```

## Example Code Export Structure
```
vto-platform/
├── src/app/next_api/
│   ├── auth/            # email signup/login, consent
│   ├── users/           # credit ops, GDPR/KVKK deletion
│   ├── products/        # catalog CRUD with VTO fields
│   ├── sessions/        # try logging, credit decrement
│   └── billing/         # Stripe: purchase credit packages
├── src/components/vto/  # Camera/upload widget + provider bindings
├── public/i18n/tr.json  # Turkish strings
├── app.sql              # PostgreSQL schema
└── package.json
```

## Zoer Copilot: Useful Automations
```
"Add a Turkish i18n bundle and swap all UI strings to TR locale by default."

"Implement credit top‑up products with Stripe and map to kredi_kalan += package_credits."

"Create a provider token endpoint: server signs short‑lived SDK tokens for clients."

"Add a consent export/delete endpoint for KVKK/GDPR compliance."
```

## Getting Started
1. Use Zoer to scaffold: TR UI, email auth, consent, DB tables, admin panel
2. Export code and integrate your chosen VTO provider SDK
3. Wire Stripe credit packages and secure key/token handling
4. Deploy behind CDN with image upload validation and caching
5. Track tries, tune performance, and iterate with real merchant feedback

Deliver a scalable VTO service that merchants can embed in minutes — while keeping privacy, consent, and user experience first.