# Membangun Portal Pelanggan B2B Terintegrasi dengan ERP Kustom > Cara merancang dan membangun portal B2B yang menghadap pelanggan yang memungkinkan klien memesan, melacak pengiriman, melihat faktur, dan membayar secara online — sepenuhnya terintegrasi dengan modul order dan AR ERP Anda. URL: https://www.matthewswong.com/id/blog/erp-customer-portal-b2b/ - Author: Matthews Wong (https://www.matthewswong.com/id/about/) - Published: 2025-06-10 - Updated: 2026-10-17 - Category: ERP Pada 2025, 85% perusahaan B2B menawarkan portal pelanggan online, naik dari 68% tahun sebelumnya. Perusahaan yang mengadopsi saluran B2B digital melaporkan rata-rata peningkatan pendapatan penjualan 41%. Untuk bisnis B2B Indonesia yang melayani klien korporat, portal pelanggan mengubah proses pemesanan via email dan telepon menjadi pengalaman swalayan yang berkembang tanpa pertumbuhan headcount yang proporsional. ## Apa yang Benar-Benar Dibutuhkan Pelanggan B2B Portal pelanggan B2B bukan toko ecommerce. Klien B2B membutuhkan: memesan berdasarkan daftar harga yang dinegosiasikan, melacak status pesanan dan pengiriman secara real-time, mengakses dan membayar faktur mereka, melihat riwayat transaksi mereka, dan berkomunikasi tentang pesanan tertentu. ### Harga Khusus Pelanggan dan Batas Kredit Dalam B2B Indonesia, setiap klien utama memiliki daftar harga yang dinegosiasikan. Portal ini membaca harga dari tabel customer_price_list ERP: setiap klien memiliki price list ID, dan ketika mereka menelusuri produk, mereka melihat harga kontrak mereka, bukan harga publik. Portal juga menampilkan batas kredit tersedia dan saldo outstanding mereka saat ini. > Dari pengalaman saya membangun sistem ERP sebagai konsultan ERP lepas: bangun pemeriksaan kredit di tingkat API, bukan hanya frontend. Saya memiliki implementasi awal di mana pemeriksaan batas kredit hanya ada di UI React — klien yang canggih dapat melewatinya dengan memanggil API langsung. Selalu paksakan aturan bisnis (batas kredit, minimum kuantitas pesanan, produk terbatas) di lapisan NestJS service. ## Manajemen Pesanan dan Pelacakan Status Real-Time Alur pesanan: pelanggan membuat pesanan di portal → pesanan disinkronkan ke ERP sebagai Sales Order → staf gudang ERP memilih dan mengirim → pembaruan pengiriman mengalir kembali ke portal → pelanggan melihat status real-time. Sinkronisasi bidireksional ini adalah tantangan integrasi inti. ### Unduhan Dokumen — Faktur, DO, dan COA Klien B2B perlu mengunduh dokumen: faktur pajak (PDF e-Faktur untuk rekonsiliasi PPN), Surat Jalan (untuk proses penerimaan barang mereka), dan Sertifikat Analisis untuk pemasok bahan baku. Semua ini dihasilkan di ERP dan disimpan dalam object storage dengan signed URL. Portal mengekspos pusat dokumen per pesanan dan per faktur. > **Peringatan: Invalidasi Cache Daftar Harga** > Daftar harga pelanggan berubah — kontrak baru ditandatangani, harga promosi berakhir, biaya produk berubah. Jika Anda meng-cache daftar harga di lapisan aplikasi portal (misalnya di Redis untuk performa), Anda harus membatalkan cache ketika daftar harga diperbarui di ERP. Saya mengalami insiden memalukan di mana klien mendapat harga lama selama satu bulan penuh karena TTL cache diatur 24 jam. Untuk data harga, gunakan TTL yang jauh lebih pendek (maksimal 5 menit). ## Bagaimana Saya Mendekati Ini Portal pelanggan adalah aplikasi Next.js terpisah yang diautentikasi melalui JWT khusus pelanggan. API NestJS memiliki konteks pelanggan yang membatasi setiap query ke data pelanggan yang terautentikasi — semua pesanan, faktur, dan pengiriman difilter berdasarkan customer_id di tingkat database menggunakan Row Level Security PostgreSQL. ## Integrasi Pembayaran Faktur Online Saya mengintegrasikan Midtrans (payment gateway terkemuka Indonesia) untuk pembayaran faktur online. Klien dapat membayar faktur outstanding langsung dari portal. Alur pembayaran: klien memilih faktur yang akan dibayar → halaman pembayaran Midtrans terbuka → pada sukses, Midtrans mengirim webhook ke handler pembayaran NestJS → pembayaran dicatat di modul AR → status faktur diperbarui menjadi 'Dibayar'. ## Adopsi dan Mengukur Keberhasilan Setelah 6 bulan portal pelanggan di klien saya: 73% pesanan ditempatkan melalui portal (naik dari 0%), waktu pemrosesan pesanan rata-rata turun dari 4 jam menjadi 15 menit, dan panggilan layanan pelanggan turun 55%. Metrik yang penting untuk keberhasilan portal B2B: tingkat adopsi portal per akun pelanggan, pesanan melalui portal vs. saluran tradisional, tingkat pembayaran faktur secara online vs. transfer bank, dan waktu dari pesanan ke konfirmasi pesanan ERP. ## Sumber & Bacaan Lebih Lanjut - Shopify — B2B Customer Portals: Boost Conversions and Customer Loyalty 2025 — https://www.shopify.com/enterprise/blog/b2b-customer-portal - OrderEase — What Is a B2B Self-Service Portal? Benefits, Features & ROI — https://www.orderease.com/community/what-is-a-b2b-self-service-portal-benefits-features-roi - PicBusiness — Customer Expectations in 2026: ERP Self-Service & Transparency — https://picbusiness.com/customer-expectations-2026-erp-self-service-transparency/ > **Key takeaway:** Pada 2025, 85 persen perusahaan B2B menyediakan portal pelanggan online, naik dari 68 persen setahun sebelumnya, dan yang mengadopsi kanal B2B digital melaporkan kenaikan pendapatan penjualan rata-rata 41 persen. Portal baru memberi hasil itu jika membaca data stok, harga dan kredit dari ERP secara langsung. ## Source links - https://www.shopify.com/enterprise/blog/b2b-customer-portal - https://www.orderease.com/community/what-is-a-b2b-self-service-portal-benefits-features-roi - https://picbusiness.com/customer-expectations-2026-erp-self-service-transparency/ ## FAQ ### Mengapa pemeriksaan batas kredit harus diterapkan di tingkat API, bukan hanya di UI? Pemeriksaan batas kredit yang hanya ada di frontend dapat dilewati oleh klien yang canggih dengan memanggil API secara langsung. Dengan menerapkan aturan ini di lapisan NestJS service, aturan bisnis tetap berlaku apa pun cara portal diakses. UI kemudian berfungsi sebagai lapisan kemudahan di atas aturan server-side tersebut. ### Bagaimana portal menyinkronkan status pesanan antara aplikasi pelanggan dan ERP? Integrasi menggunakan kombinasi database trigger dan NestJS event emitter. Ketika status Sales Order berubah di ERP, sebuah event dipancarkan yang memperbarui tabel status yang menghadap portal, sehingga pelanggan dapat melihat progres pesanan dan pengiriman secara real-time. Pelanggan juga dapat berlangganan notifikasi email untuk setiap perubahan status. ### Berapa TTL cache yang disarankan untuk data daftar harga pelanggan, dan mengapa? Maksimal 5 menit adalah TTL yang disarankan untuk data harga, atau implementasikan event invalidasi cache dari ERP ke portal via webhook. Penggunaan TTL 24 jam menyebabkan insiden di mana klien mendapat harga lama selama satu bulan penuh setelah daftar harga diperbarui di ERP. TTL yang lebih pendek atau invalidasi berbasis event mencegah harga usang sampai ke pelanggan. ### Payment gateway apa yang digunakan untuk pembayaran faktur online, dan bagaimana duplikasi pembayaran dicegah? Midtrans, payment gateway terkemuka di Indonesia, diintegrasikan untuk pembayaran faktur online. Handler webhook yang mencatat pembayaran harus bersifat idempoten, karena Midtrans dapat mengirim webhook duplikat — memproses webhook yang sama dua kali akan salah mengosongkan saldo faktur. Pemeriksaan idempoten di handler pembayaran NestJS mencegah hal ini. ### Hasil terukur apa yang dicapai portal setelah enam bulan? Setelah enam bulan, 73% pesanan ditempatkan melalui portal (naik dari 0%), waktu pemrosesan pesanan rata-rata turun dari 4 jam menjadi 15 menit, dan panggilan layanan pelanggan turun 55%. Hasil ini dicapai dengan menggantikan proses intake manual via telepon dan email dengan sinkronisasi ERP otomatis dan akses dokumen swalayan. --- - HTML version: https://www.matthewswong.com/id/blog/erp-customer-portal-b2b/ - English: https://www.matthewswong.com/en/blog/erp-customer-portal-b2b/ - Site index for agents: https://www.matthewswong.com/llms.txt - Sitemap: https://www.matthewswong.com/sitemap.xml - API description (OpenAPI): https://www.matthewswong.com/openapi.json