Skip to main content

title: “Cart & Checkout” description: “Keranjang belanja multi-seller, checkout, payment gateway, POS mirror, voucher & diskon, dan order splitting di SNISHOP ERP.”

Cart & Checkout

Cart

Ringkasan Eksekutif

Cart.jsx (837 baris) merupakan pusat sistem keranjang belanja dan checkout SNISHOP ERP yang mendukung arsitektur multi-seller — item dari seller berbeda di-group secara otomatis dan diproses sebagai order terpisah. Sistem ini menangani 4 metode pembayaran utama, membuat POS mirror records, broadcast ke order queue via BroadcastChannel, dan menghitung commission secara server-side untuk menjamin integritas data finansial. Checkout flow dirancang untuk menangani kompleksitas marketplace: ketika customer checkout item dari beberapa seller sekaligus, sistem otomatis split menjadi beberapa order (ProductOrder untuk item official, MarketplaceOrder untuk third-party sellers) dengan perhitungan commission yang akurat dan audit trail yang lengkap. Sistem ini juga mengimplementasikan security policy yang ketat: browser-side code tidak pernah menggunakan asServiceRole, tidak pernah memanggil Company.list(), dan commission rate selalu di-fetch via server function.

Kapabilitas Utama

Arsitektur Komponen

Diagram Alur Data End-to-End

Entity & Model

MarketplaceCart

ProductOrder (Official Items)

MarketplaceOrder (Third-Party Items)

CompanyPOSTransaction (POS Mirror)

Fitur Utama

1. Multi-Seller Checkout

Checkout flow menangani item dari multiple sellers dalam satu transaksi:

2. Order Splitting Logic

Financial Breakdown (MarketplaceOrder):

3. Payment Methods

Payment Routing:

4. Company Context Filtering

Cart items di-filter berdasarkan company context menggunakan filterCartItemsForContext(): Security: Mencegah cross-company cart leakage dalam multi-tenant environment.

5. POS Mirror & Broadcast

Setiap order yang dibuat di-cart juga di-mirror ke POS system: BroadcastChannel API: Komunikasi real-time antar browser tabs — POS di tab lain bisa langsung receive update tanpa perlu polling.

6. Commission Calculation

Commission rate selalu di-fetch dari server function untuk security: Security Policy: Browser-side code tidak pernah menghitung commission secara lokal — selalu via server function untuk mencegah manipulation.

7. Voucher & Diskon System

Sistem checkout mendukung beberapa mekanisme diskon yang dapat dikombinasikan: Flow Voucher Application: Reseller Discount Tiers (dari ShopSettings.reseller_discounts): Pricing Calculation Formula:

8. Cart Management

9. Order Status Tracking

10. Quota-Based Products

Sistem mendukung produk berbasis kuota yang memungkinkan satu order digunakan berulang kali hingga kuota habis: Use Case: Produk digital seperti jasa desain yang bisa direvisi beberapa kali — customer beli 1 order dengan kuota 5 revisi.

Security Policies

Browser-Side Restrictions

Cart mengimplementasikan 3 security policy yang di-enforce via test files: Rationale: Mencegah privilege escalation dan data leakage dalam multi-tenant environment.

Kebijakan Keamanan RLS (Row-Level Security)

CompanyPOSTransaction memiliki RLS paling ketat di antara semua entity cart/order:
Implikasi:
  • Staff POS hanya bisa mengakses transaksi dalam company yang sedang aktif
  • User bisa mengakses transaksi yang mereka buat sendiri
  • Admin memiliki akses penuh tanpa batasan company
  • Mencegah cross-tenant data leakage dalam environment multi-company
Cart (MarketplaceCart) menggunakan RLS sederhana tanpa kondisi eksplisit — akses dikontrol melalui filterCartItemsForContext() di browser-side untuk filtering berdasarkan company context. Commission Rate tidak pernah diekspos ke browser — selalu di-fetch via server function getMarketplaceCommissionRate() untuk mencegah manipulasi nilai komisi dari client-side.

MyOrders (Order History)

MyOrders.jsx (345 baris) menampilkan unified order history dari 2 sumber: Fitur: Flow MyOrders Polling:

Cara Akses

Dari sidebar, klik menu Shop > Cart. URL publik: /checkout

Flow Penggunaan

Customer

  1. Browse produk dari Shop atau Marketplace
  2. Klik “Add to Cart” untuk menambahkan produk
  3. Buka halaman Cart (/checkout)
  4. Review item di keranjang
  5. Update quantity atau hapus item jika perlu
  6. Select items yang ingin di-checkout
  7. Klik “Checkout”
  8. Pilih metode pembayaran (Saldo / Manual / Mayar / SNISHOP Pay)
  9. Isi alamat pengiriman (jika fisik)
  10. Selesaikan pembayaran
  11. Lihat order status di halaman MyOrders (/pesanan-saya)

Admin

  1. Monitor order masuk dari MarketplaceOrdersTab
  2. Untuk Manual Transfer: konfirmasi pembayaran dan update status
  3. Process order: update status dari pending → processing → completed
  4. Upload result files untuk order digital yang selesai
  5. Track commission yang masuk dari marketplace orders

Integrasi Cross-Module

Tips

  • Test multi-seller checkout dengan item dari official dan third-party seller — pastikan order splitting bekerja dengan benar
  • Monitor BroadcastChannel sync — POS di tab lain harus receive update real-time
  • Untuk Manual Transfer, set ekspektasi ke customer bahwa order baru diproses setelah pembayaran dikonfirmasi admin
  • Commission rate di-fetch via server function untuk security — jangan pernah hardcode atau calculate di browser
  • Gunakan company context filtering untuk mencegah cross-company cart leakage
  • MyOrders polling (10 detik) memastikan customer lihat update status tanpa perlu refresh manual
  • Voucher memiliki usage_limit dan valid_until — pastikan validasi kedua field ini sebelum apply diskon
  • Reseller discount tier dihitung otomatis berdasarkan membership level customer — tidak perlu input manual
  • Untuk produk berbasis kuota, monitor quota_remaining agar tidak terjadi over-usage

Referensi Entity Schema (base44)

Bagian ini mendokumentasikan schema entity secara lengkap berdasarkan definisi JSONC di base44/entities/.

Diagram Relasi Entity (erDiagram)

Tabel Schema Detail Entity

MarketplaceCart — Keranjang Belanja Marketplace

DigitalProduct — Produk Digital (Official)

Struktur order_form_fields[]: Struktur variants[]:

ProductOrder — Pesanan Produk Digital (Official)

MarketplaceOrder — Pesanan Marketplace (Third-Party Seller)

Struktur items[] (MarketplaceOrder): Struktur shipping_address (MarketplaceOrder):

MarketplaceCommissionSettings — Pengaturan Komisi Marketplace

CompanyPOSTransaction — Transaksi POS (Mirror & Direct)

Struktur items[] (CompanyPOSTransaction): Struktur payments[] (Split Payment):

CompanyPOSProduct — Produk POS & Inventory

Struktur channel_pricing:

ShopSettings — Pengaturan Toko

Struktur promo_banner: Struktur reseller_discounts:

ProductVoucher — Voucher Produk (Checkout)

Voucher — Voucher Subscription/Plan

VoucherUsage — Log Penggunaan Voucher

Diagram State — Siklus Hidup Order

State: ProductOrder (Produk Digital Official)

State: MarketplaceOrder (Pesanan Marketplace Third-Party)

State: CompanyPOSTransaction (Transaksi POS & Mirror)

State: ProductVoucher (Siklus Hidup Voucher)

Diagram Sequence — Flow Pembayaran & Verifikasi

Flow Add to Cart

Flow Checkout Multi-Seller dengan Split Payment

Flow Verifikasi Pembayaran Manual Transfer

Flow Commission Calculation & Payout

Flow Pricing Calculation (Checkout)

Tabel Enum — Nilai yang Diizinkan

Enum: ProductOrder.status

Enum: MarketplaceOrder.status

Enum: MarketplaceOrder.payment_status

Enum: CompanyPOSTransaction.payment_method

Enum: CompanyPOSTransaction.payment_status

Enum: CompanyPOSTransaction.source

Enum: CompanyPOSTransaction.sales_channel

Enum: CompanyPOSTransaction.order_status

Enum: CompanyPOSTransaction.status

Enum: CompanyPOSProduct.product_type

Enum: CompanyPOSProduct.packaging_type

Enum: CompanyPOSProduct.storage_condition

Enum: DigitalProduct.category

Enum: Voucher.discount_type / ProductVoucher.discount_type

Enum: VoucherUsage.plan

Enum: VoucherUsage.billing_period

Tabel RBAC — Hak Akses per Role

Matriks Hubungan Entity

Penanganan Error & Edge Cases