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
Keywords: E-commerce, Midtrans, Progressive Web App, Payment Gateway, Scrum

Abstract

Butik Busana Fashion currently relies on marketplaces such as Shopee and Tokopedia as its primary sales channels.

While this approach expands customer reach, it faces significant margin compression due to rising commission and

service fees, with platform deductions ranging from 4.25% to 10% on Tokopedia and up to 10% on Shopee.

Concurrently, the boutique's existing website remains underutilized; functioning merely as an inactive, static catalog

without transactional capabilities, it fails to serve as an independent sales channel. This study aims to develop a

website-based e-commerce system for the MSME Butik Busana Fashion, integrated with the Midtrans payment

gateway and utilizing Progressive Web App (PWA) technology to enhance the user experience. The system, previously

a static catalog, has been transformed into a fully transactional platform featuring product management, shopping

cart, checkout, and automated payment processing. The system development employs the Agile Scrum methodology,

encompassing product backlog, sprint planning, sprint execution, sprint review, and sprint retrospective phases. The

Midtrans integration facilitates payments via multiple methods, including virtual accounts, QRIS, and e-wallets,

supported by an automated transaction status notification system via webhooks. Meanwhile, the implementation of

PWA enables push notification capabilities to deliver payment reminders to users. Implementation results demonstrate

that the integration of Midtrans and PWA successfully addresses the need for seamless on-site payments and real-time

payment reminder notifications. Lighthouse testing yielded scores of 93 for Performance, 96 for Accessibility, 92 for

Best Practices, and 100 for SEO. This indicates that the Midtrans and PWA integration significantly enhances

accessibility, information delivery speed, and the overall user experience. Furthermore, functional testing using the

Black Box method across 37 test scenarios in 15 modules achieved a 100% success rate, confirming that all functional

requirements of the system have been fully met.

Published
2026-07-20
How to Cite
Afridho Ikhsan, Komarudin, O., & Carudin, C. (2026). Integrasi Progressive Web App Dengan Payment Gateway Midtrans Pada Website E-Commerce Umkm (Studi Kasus: Butik Busana Fashion). IKRA-ITH Teknologi Jurnal Sains Dan Teknologi, 10(2), 275-280. https://doi.org/10.37817/ikraith-teknologi.v10i2.7201