Mini Checkout
Self-contained inline checkout for 1 product or 1 bundle. Customer enters data, picks payment, and submits without leaving the page. Use on landing pages for 'Beli Sekarang' conversion flow.
Type: "miniCheckout"
Self-contained inline checkout for 1 product or 1 bundle. Customer enters data, picks payment, and submits without leaving the page. Use on landing pages for 'Beli Sekarang' conversion flow.
Props
| Field | Type | Default | Keterangan |
|---|---|---|---|
selectedId | string (product/bundle id) | — | Produk / Bundle |
showPreview | boolean | true | Tampilkan Preview |
previewShowTitle | boolean | true | Preview: Judul (tampil saat showPreview = true) |
previewShowImage | boolean | true | Preview: Gambar (tampil saat showPreview = true) |
previewShowPrice | boolean | true | Preview: Harga (tampil saat showPreview = true) |
previewShowDescription | boolean | false | Preview: Deskripsi (tampil saat showPreview = true) |
showQuantity | boolean | false | Tampilkan Qty Selector |
outOfStockMessage | string | "Stok habis" | Pesan Stok Habis |
requireLogin | boolean | false | Wajib Login |
showNameField | boolean | true | Tampilkan Field Nama (tampil saat requireLogin = false) |
showPhoneField | boolean | true | Tampilkan Field Phone (tampil saat requireLogin = false) |
enableCoupon | boolean | true | Aktifkan Coupon |
showPaymentMethods | boolean | true | Tampilkan Metode Pembayaran |
showSummary | boolean | true | Tampilkan Sub Total & Total |
buttonText | string | "Bayar Sekarang" | Teks Tombol |
buttonSize | 'sm'|'md'|'lg' | "md" | Ukuran Tombol |
buttonBgColor | CSS color | — | Warna Background |
buttonTextColor | CSS color | — | Warna Teks |
width | 'full'|'normal'|'narrow' | "normal" | Lebar |
enableTerms | boolean | false | Aktifkan T&C |
termsUrl | string (URL) | — | URL Terms (tampil saat enableTerms = true) |
privacyUrl | string (URL) | — | URL Privacy (tampil saat enableTerms = true) |
successAction | 'default'|'custom_url'|'inline'|'whatsapp' | "default" | Tipe Aksi |
successCustomUrl | string (URL) | — | URL Custom (tampil saat successAction = custom_url) |
successInlineMessage | string | "Terima kasih! Pesanan kamu sudah kami terima." | Pesan Inline (tampil saat successAction = inline) |
successWhatsappNumber | string | — | Nomor WhatsApp (tampil saat successAction = whatsapp) |
successWhatsappTemplate | string | "Halo,
Saya ingin konfirmasi pesanan:
*{{product_name}}*
*Order ID*: {{order_number}}
Atas nama *{{customer_name}}*
Total *Rp{{total}}*" | Template Pesan (tampil saat successAction = whatsapp) |
trackMetaPixel | boolean | false | Aktifkan Meta Pixel |
trackMetaPixelId | enum | — | Kosongkan untuk pakai Pixel default site. (tampil saat trackMetaPixel = true) |
trackTiktokPixel | boolean | false | Aktifkan TikTok Pixel |
trackTiktokPixelId | enum | — | Kosongkan untuk pakai Pixel default site. (tampil saat trackTiktokPixel = true) |
Contoh
{
"id": "min01abc",
"type": "miniCheckout",
"props": {
"selectedId": "",
"selectedName": "",
"selectedThumbnailUrl": "",
"showPreview": true,
"previewShowTitle": true,
"previewShowImage": true,
"previewShowPrice": true,
"previewShowDescription": false,
"showQuantity": false,
"outOfStockMessage": "Stok habis",
"requireLogin": false,
"showNameField": true,
"showPhoneField": true,
"enableCoupon": true,
"showPaymentMethods": true,
"showSummary": true,
"buttonText": "Bayar Sekarang",
"buttonSize": "md",
"buttonBgColor": "",
"buttonTextColor": "",
"width": "normal",
"enableTerms": false,
"termsUrl": "",
"privacyUrl": "",
"successAction": "default",
"successCustomUrl": "",
"successInlineMessage": "Terima kasih! Pesanan kamu sudah kami terima.",
"successWhatsappNumber": "",
"successWhatsappTemplate": "Halo,\n\nSaya ingin konfirmasi pesanan:\n\n*{{product_name}}*\n\n*Order ID*: {{order_number}}\n\nAtas nama *{{customer_name}}*\n\nTotal *Rp{{total}}*",
"trackMetaPixel": false,
"trackMetaPixelId": "",
"trackTiktokPixel": false,
"trackTiktokPixelId": ""
}
}