Logo Muhammad Luthfi
Muhammad Luthfi AgustianSystem Analyst & Software Engineer
E-Commerce & Digital#02 of 9Live Demo Aktif

E-Commerce B2B & B2C Satwagia

Perencanaan storefront digital B2B dan B2C terintegrasi: MedusaJS, Next.js, kalkulasi ongkir RajaOngkir, dan sinkronisasi pesanan ke ERP eWebAcc.

Klien / ProyekPT Satwa Bahagia Indonesia
Tahun Pengerjaan2026
Peran / LayananProduct Planning, System Analyst & End-to-End QA
Status RilisLive Demo
Teknologi & Tools:Next.jsMedusaJS (Headless E-Commerce)RajaOngkir APIERP eWebAcc SyncGoogle Stitch / FigmaPostman
E-Commerce B2B & B2C Satwagia

Ringkasan Eksekutif & Ruang Lingkup

Proyek modernisasi saluran penjualan digital untuk PT Satwa Bahagia Indonesia yang melayani transaksi retail pelanggan langsung (B2C) serta pesanan partai grosir klinik/reseller (B2B). Mengintegrasikan backend headless commerce MedusaJS dengan frontend responsif Next.js, kalkulasi ongkos kirim otomatis multi-ekspedisi RajaOngkir, dan sinkronisasi data transaksi ke sistem ERP eWebAcc perusahaan.

01 / The Challenge

Pemisahan Skema Harga B2B vs B2C & Validasi ERP

Satwagia membutuhkan satu platform e-commerce yang dapat membedakan alur belanja pelanggan umum dengan mitra klinik rekanan (harga khusus, kuantiti minimum, dan syarat pembayaran berbeda), sekaligus memastikan setiap transaksi yang terjadi langsung tercatat ke dalam ERP eWebAcc tanpa proses entri ulang manual.

  • Perbedaan business rules untuk tier harga B2C vs harga grosir B2B dengan batasan minimum order.
  • Kebutuhan estimasi ongkir otomatis ke seluruh Indonesia yang akurat berdasarkan dimensi dan berat produk obat hewan.
  • Menghindari selisih saldo piutang dan stok barang antara web e-commerce dengan data master ERP pusat.
02 / The Solution

Headless Architecture dengan Sinkronisasi ERP

Menyusun scope MVP, merancang arsitektur user flow, mendesain antarmuka responsif, serta memimpin pengujian end-to-end integration testing dari checkout customer hingga pembuatan sales order di ERP.

  • Headless Commerce Architecture: MedusaJS untuk manajemen produk, diskon, dan order, dipadukan dengan Next.js untuk performa frontend cepat.
  • Tiered Pricing Engine: Tampilan katalog dan harga yang menyesuaikan dengan role login user (Retail vs Mitra B2B).
  • RajaOngkir Multi-Courier Integration: Kalkulasi ongkos kirim real-time JNE, SiCepat, J&T, dan kurir kargo.
  • ERP Order Synchronizer: Transaksi berbayar otomatis diposting sebagai Sales Order (SO) ke ERP eWebAcc.
04 / System & User Flow

Alur Transaksi & Sinkronisasi ERP

Alur terstruktur yang menghubungkan proses dari input awal pengguna hingga rekonsiliasi akhir.

01

Katalog & Tiered Role

Pengguna mengakses web; harga produk menyesuaikan status akun (publik/B2C atau reseller/B2B terverifikasi).

02

Cart & Validasi Minimum Order

Sistem memvalidasi stok ketersediaan di gudang pusat dan mengecek batas minimum pembelian B2B.

03

Checkout & RajaOngkir

Customer memilih alamat pengiriman, API RajaOngkir menghitung ongkos kirim secara presisi berdasarkan total gramatur.

04

Payment Gateway

Pembayaran diproses dan webhook mengonfirmasi status pelunasan transaksi secara otomatis.

05

Sinkronisasi ke ERP eWebAcc

Sistem mengirimkan payload order ke ERP eWebAcc untuk pembuatan Sales Order, reservasi stok fisik, dan persiapan pengiriman.

Fitur Utama yang Ditonjolkan

Dual Storefront Mode (B2B & B2C)

Pengalaman belanja terpisah antara customer retail dan distributor dengan manajemen harga grosir bertingkat.

Real-Time Shipping Calculation

Integrasi API kurir domestik terlengkap dengan estimasi waktu tiba dan opsi asuransi pengiriman.

ERP Inventory Reservation

Pesanan yang masuk langsung memesan stok di ERP agar tidak terjadi overselling dengan transaksi offline outlet.

Interactive Prototyping & Review

Konsep desain dirancang menggunakan Google Stitch dan direview intensif bersama tim developer backend.

Visual Showcase Gallery

Tangkapan Layar & Antarmuka Sistem

Screenshot resolusi tinggi yang merepresentasikan alur kerja dan antarmuka sesungguhnya.

Konsep Desain Storefront

Konsep Desain Storefront

Tampilan antarmuka e-commerce dengan navigasi kategori produk kesehatan hewan yang intuitif.

Dampak Nyata & Hasil Implementasi

Business Impact & Deliverables

Berhasil menyelesaikan rancangan MVP, implementasi antarmuka, dan pengujian end-to-end integrasi eWebAcc, mengeliminasi entri manual pesanan online oleh staf administrasi.

100% otomatisasi pencatatan Sales Order dari web ke ERP eWebAcc
Akurasi perhitungan ongkos kirim multi-ekspedisi dengan toleransi selisih 0%
Waktu pemrosesan pesanan B2B dipangkas dari 1 hari menjadi hitungan menit