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ên | URL | Mô tả |
|---|---|---|
| SDK | sdk.js · sdk.min.js (1.5KB) | Thư viện JS cho custom integration |
| Embed Widget | checkout.js · min.js (1.9KB) | Drop-in iframe checkout |
| Sale Template | sale-page.html | Template multi-product, copy & customize |
| AI Prompt | ai-prompt.md | Copy vào Claude/ChatGPT để AI build checkout |
| Hướng dẫn (MD) | integration-guide.md | Markdown cho AI agent đọc |
| API Docs | Swagger UI | OpenAPI 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
| Attribute | Mô tả | Mặc định |
|---|---|---|
data-sellkit-checkout | Tenant slug / Product slug (bắt buộc) | — |
data-sellkit-ref | Mã giới thiệu (affiliate) | — |
data-sellkit-coupon | Mã giảm giá điền sẵn | — |
data-sellkit-lang | Ngôn ngữ: vi hoặc en | vi |
data-sellkit-height | Chiề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.
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
| Method | Endpoint | Mô 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-preview | Tính giá (membership, bundle, coupon) |
| POST | /api/v1/public/checkout | Tạo đơn hàng + thanh toán |
| GET | /api/v1/public/orders/{id}/status | Theo 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_amountvàtax_inclusive - Xuất hóa đơn: Gửi
tax_infotrong checkout request, lưu vào order meta
Xem thêm: Pricing Engine | License API | Cài đặt