Tích hợp Checkout

← Quay lại Cài đặt

Tích hợp checkout vào website bên ngoài

3 cách tích hợp checkout Sellkit — không cần API key, mở cho mọi domain.

Tài nguyên

Tài nguyênURLMô tả
SDKsdk.js · sdk.min.js (1.5KB)Thư viện JS cho custom integration
Embed Widgetcheckout.js · min.js (1.9KB)Drop-in iframe checkout
Sale Templatesale-page.htmlTemplate multi-product, copy & customize
AI Promptai-prompt.mdCopy vào Claude/ChatGPT để AI build checkout
Hướng dẫn (MD)integration-guide.mdMarkdown cho AI agent đọc
API DocsSwagger UIOpenAPI spec đầy đủ

Cách 1: Embed Widget (30 giây)

Dán đoạn code này vào bất kỳ trang HTML nào. Checkout hiển thị trong iframe — chọn gói, nhập thông tin, thanh toán, xác nhận.

<div data-sellkit-checkout="tenant-slug/product-slug"></div>
<script src="https://sk-api.vibery.app/embed/checkout.min.js"></script>

Tùy chọn

AttributeMô tảMặc định
data-sellkit-checkoutTenant slug / Product slug (bắt buộc)
data-sellkit-refMã giới thiệu (affiliate)
data-sellkit-couponMã giảm giá điền sẵn
data-sellkit-langNgôn ngữ: vi hoặc envi
data-sellkit-heightChiều cao cố định (px)auto-resize

Events

document.querySelector('[data-sellkit-checkout]')
  .addEventListener('sellkit:success', function(e) {
    console.log('Order:', e.detail);
    // { order_id, order_number, total, currency, status }
  });

Giới hạn: Không tùy chỉnh giao diện. Dùng Cách 2 hoặc 3 nếu cần custom UI.


Cách 2: Custom Integration (SDK)

Tự thiết kế giao diện checkout — SDK xử lý tất cả API call.

<script src="https://sk-api.vibery.app/embed/sdk.min.js"></script>

Bước 1: Lấy sản phẩm

var sk = new Sellkit('https://sk-api.vibery.app');

// Sản phẩm đơn
var data = await sk.getProduct('tenant-slug', 'product-slug');
// data.product.variants → [{ id, name, price, currency, meta }]
// data.checkout_note → ghi chú hiển thị trên checkout

// Sale (multi-product) — gọi trực tiếp API
var sale = await fetch('https://sk-api.vibery.app/api/v1/public/tenant-slug/sale/sale-slug').then(r => r.json());
// sale.products → [{ id, name, variants: [...] }]

Bước 2: Xem trước giá (quan trọng!)

Gọi khi nhập email (tính giá theo membership) và khi thay đổi sản phẩm đã chọn:

var pricing = await sk.previewPricing({
  tenant_slug: 'tenant-slug',
  variant_ids: ['uuid-1', 'uuid-2'],  // hỗ trợ bundle
  email: 'khach@example.com',         // kích hoạt giá membership
  coupon_code: 'GIAM20',              // tùy chọn
  quantity: 1
});
// pricing.subtotal        → giá gốc (cents)
// pricing.total           → giá cuối (cents, đã bao gồm thuế nếu có)
// pricing.discount        → tổng giảm giá
// pricing.adjustments     → [{ rule_name, amount }]
// pricing.coupon_discount → giảm từ coupon
// pricing.coupon_error    → lỗi coupon
// pricing.tax_amount      → thuế (nếu tenant cấu hình)
// pricing.tax_inclusive    → true nếu giá đã bao gồm VAT

Bước 3: Tạo đơn hàng

var order = await sk.checkout({
  tenant_slug: 'tenant-slug',
  variant_ids: ['uuid-1', 'uuid-2'],  // 1 hoặc nhiều sản phẩm
  name: 'Nguyễn Văn A',
  email: 'khach@example.com',
  phone: '0901234567',                 // tùy chọn
  coupon_code: 'GIAM20',              // tùy chọn
  ref: 'partner123',                   // affiliate code từ URL ?ref=xxx
  sale_id: 'sale-uuid',               // link đơn hàng với campaign
  tax_info: {                          // xuất hóa đơn (tùy chọn)
    company_name: 'Công ty ABC',
    tax_code: '0123456789',
    address: '123 Đường XYZ'
  }
});
// order.order_id      → UUID
// order.total         → số tiền (cents)
// order.is_free       → true nếu miễn phí
// order.checkout_url  → URL thanh toán (QR hoặc Stripe)
// order.simulate      → true nếu staging mode

Bước 4: Thanh toán

if (order.is_free) {
  showSuccess(order);  // Miễn phí — hoàn tất ngay
} else {
  // Chuyển sang trang thanh toán
  window.location.href = 'https://sellkit.vibery.app/c/order/' + order.order_id;
  // Hoặc hiển thị QR inline:
  // if (order.checkout_url.includes('qr')) img.src = order.checkout_url;
}

Bước 5: Theo dõi trạng thái

var cancel = sk.pollStatus(order.order_id, function(status) {
  if (status.status === 'paid' || status.status === 'fulfilled') {
    showSuccess(status);
    // status.fulfillment → { license_key, download_url, ticket_code }
  } else if (status._timeout) {
    showExpired();  // 30 phút timeout
  }
});
// cancel() để dừng polling

Helper

Sellkit.formatPrice(29900000, 'vnd')  → "299.000 ₫"
Sellkit.formatPrice(999, 'usd')       → "$9.99"

Cách 3: Sale Page Template

Template HTML hoàn chỉnh cho trang bán nhiều sản phẩm (bundle). Download, sửa 3 dòng config, deploy.

→ Xem / Download template

const CONFIG = {
  apiBase: 'https://sk-api.vibery.app',
  tenantSlug: 'your-tenant',       // ← sửa
  saleSlug: 'your-sale-slug',      // ← sửa
  checkoutBase: 'https://sellkit.vibery.app',
};

Template bao gồm: chọn sản phẩm (checkbox), tính giá theo membership khi nhập email, coupon, thông tin xuất hóa đơn, affiliate tracking.


Dùng AI để build checkout page

Copy nội dung file ai-prompt.md vào Claude, ChatGPT, hoặc Cursor. Điền tenant slug và mô tả thiết kế — AI sẽ build checkout page sử dụng SDK.

Prompt đã bao gồm đầy đủ: SDK API reference, ví dụ code, các behavior cần implement.


API Endpoints

MethodEndpointMô tả
GET/api/v1/public/{tenant}/{product}Lấy sản phẩm + variants
GET/api/v1/public/{tenant}/sale/{slug}Lấy sale + tất cả sản phẩm
POST/api/v1/public/pricing-previewTính giá (membership, bundle, coupon)
POST/api/v1/public/checkoutTạo đơn hàng + thanh toán
GET/api/v1/public/orders/{id}/statusTheo dõi trạng thái đơn hàng

Lưu ý

  • Không cần API key — tất cả endpoint public
  • CORS: Mở cho mọi domain — không cần đăng ký
  • Rate limit: Checkout 10/phút per IP. Các endpoint khác không giới hạn.
  • Giá cents: Tất cả giá trị tiền là cents (VND × 100). Hiển thị bằng Sellkit.formatPrice()
  • Thuế: Cấu hình trong tenant settings. Pricing preview trả tax_amounttax_inclusive
  • Xuất hóa đơn: Gửi tax_info trong checkout request, lưu vào order meta

Xem thêm: Pricing Engine | License API | Cài đặt