Integrasi Progressive Web App Dengan Payment Gateway Midtrans Pada Website E-Commerce Umkm (Studi Kasus: Butik Busana Fashion)

  • Afridho Ikhsan Universitas Singaperbangsa Karawang
  • Oman Komarudin Universitas Singaperbangsa Karawang
  • Carudin Carudin Universitas Singaperbangsa Karawang
Kata Kunci: E-commerce, Midtrans, Progressive Web App, Payment Gateway, Scrum

Abstrak

Butik Busana Fashion saat ini masih bergantung pada marketplace seperti Shopee dan Tokopedia sebagai kanal utama

penjualan, meskipun hal ini membantu menjangkau pelanggan lebih luas. Namun, meningkatnya biaya komisi dan

layanan di kedua platform tersebut menekan margin keuntungan, dengan potongan mencapai 4,25% hingga 10% di

Tokopedia dan hingga 10% di Shopee. Di sisi lain, website butik yang ada belum berfungsi optimal karena masih

bersifat katalog statis tanpa fitur transaksi dan tidak aktif dihosting, sehingga belum dapat menjadi kanal penjualan

mandiri. Penelitian ini bertujuan untuk mengembangkan sistem e-commerce berbasis website pada UMKM Butik

Busana Fashion yang terintegrasi dengan payment gateway Midtrans serta menerapkan Progressive Web App (PWA)

untuk meningkatkan pengalaman pengguna. Sistem yang sebelumnya hanya berupa katalog statis dikembangkan

menjadi platform transaksi penuh yang mencakup fitur manajemen produk, keranjang belanja, checkout, serta

pemrosesan pembayaran secara otomatis. Metode pengembangan sistem yang digunakan adalah Agile Scrum yang

terdiri dari tahapan product backlog, sprint planning, sprint execution, sprint review, dan sprint retrospective. Integrasi

payment gateway Midtrans memungkinkan proses pembayaran dilakukan melalui berbagai metode seperti virtual

account, QRIS, dan e-wallet dengan sistem notifikasi status transaksi secara otomatis melalui webhook. Sementara itu,

penerapan PWA memungkinkan sistem memiliki kemampuan untuk push notification untuk memberikan informasi

terkait pengingat pembayaran. Hasil implementasi menunjukkan bahwa Midtrans dan PWA mampu menjawab atas

kebutuhan pembayaran secara langsung di dalam website sekaligus penerimaan notifikasi terkait pengingat

pembayaran. Pengujian Lighthouse menghasilkan nilai uji Performa (93), Aksesibilitas (96), Best Practices (92), dan

SEO (100). Hal ini menunjukkan integrasi Midtrans dan PWA memberikan peningkatan pada aspek kemudahan akses,

kecepatan informasi, dan pengalaman pengguna secara keseluruhan. Hasil pengujian fungsional menggunakan metode

Black box Testing terhadap 37 skenario uji dari 15 modul menunjukkan tingkat keberhasilan 100%, yang membuktikan

bahwa seluruh kebutuhan fungsional sistem telah terpenuhi.

Diterbitkan
2026-07-20