SKRIPSI
IMPLEMENTASI PAYMENT REQUEST API PADA
PROGRESSIVE WEB APPS
( STUDI KASUS : PENJUALAN LAPTOP DI EKSEKUTIF KOMPUTER )
ABDUL HAMID HASIBUAN
Nomor Mahasiswa : 155410037
PROGRAM STUDI TEKNIK INFORMATIKA
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
AKAKOM
YOGYAKARTA
2019
SKRIPSI
IMPLEMENTASI PAYMENT REQUEST API PADA
PROGRESSIVE WEB APPS
Diajukan sebagai salah satu syarat untuk menyelesaikan studi jenjang S1
Program Studi Teknik Informatika
Sekolah Tinggi Manajemen Informatika dan Komputer
Akakom
Yogyakarta
Disusun Oleh :
Abdul Hamid Hasibuan
Nomor Mahasiswa : 155410037
PROGRAM STUDI TEKNIK INFORMATIKA
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
AKAKOM
YOGYAKARTA
2019
i
ii
iii
HALAMAN PERSEMBAHAN
Dengan selesainya skripsi ini, saya persembahkan untuk :
1. Bapak dan mama serta keempat adik saya yang telah mendukung dan menjadi
alasan utama saya menyelesaikan skripsi ini. Terimakasih doa dan semangat
yang selalu dipanjatkan agar selama saya mengerjakan skripsi diberi
kelancaran.
2. Kepada dosen pembimbing saya Pak [Link] M.T. Terimakasih atas
bimbingan dan arahannya agar skripsi ini dapat selesai dengan baik.
3. Putri Ayu Lestari. Partner saya sekaligus orang yang selalu membantu dan
menyemangati, dan selalu mengingatkan saya untuk menyelesaikan skripsi ini,
menjadi tempat berbagi error program dan mendengarkan semua cerita tentang
skripsi saya. Terima kasih Nog.
4. Teman-teman seperjuangan Teknik Informatikan angkatan 2015 yang telah
menjadi teman dalam berbagai mini project, skripsi dan dalam hal lain.
Terimakasih telah menjadi kelas yang nyaman dan hebat.
5. Terimakasi untuk pihak-pihak yang tidak disebutkan. Karena bantuan dan
dukuangan kalian juga saya dapat menyelesaikan skripsi ini.
iv
MOTTO
“Manusia tak selamanya benar dan tak selamanya salah,
kecuali ia yang selalu mengoreksi diri dan membenarkan
kebenaran orang lain atas kekeliruan diri sendiri.”
v
INTISARI
Eksekutif Komputer adalah sebuah usaha yang bergerak pada penjualan laptop
baru dan bekas. Berlokasi di Bekasi dan Bandung yang beroperasi secara online dan
offline. Untuk pembelian secara online, saat ini website Eksekutif Komputer hanya
berperan sebagai katalog, sedangkan untuk melakukan pemesanan, pembeli harus
menghubungi pihak Eksekutif Komputer. Kendala yang dialami adalah lambatnya
pelayanan terhadap transaksi yang dilakukan karena pembeli masih melakukan
pembayaran dengan cara transfer secara tradisional, dan lambatnya pengguna jika ingin
mengakses website Eksekutif Komputer karena harus melalui browser.
Dari kendala yang dialami, oleh karena itu pada penelitian ini menerapkan
teknologi payment request API menggunakan library stripe API untuk menerima
pembayaran dari pembelian barang yang dilakukan pembeli yaitu melalui sebuah
panggilan API yang disediakan oleh stripe. Pembayaran dilakukan langsung pada
aplikasi menggunakan kartu debit atau kredit visa dan mastercard. Dan dengan
menerapkan teknologi progressive web apps dapat mempercepat pembeli dalam
mengakses website tanpa harus membuka melalui browser dan website mampu
menampilkan katalog barang meskipun dalam kondisi offline.
Hasil dari penerapan yang dilakukan pada penelitian ini yaitu menggunakan
stripe API bisa digunakan untuk menerima pembayaran langsung dari aplikasi
menggunakan kartu kredit atau debit mastercard dan visa. Kemudian dengan
menggunakan teknologi service worker dari progressive web apps, membuat aplikasi
mampu menampilkan katalog barang meskipun dalam kondisi offline.
Kata Kunci : e-commerce, internet, payoneer, payment request api, payment service
provider, progressive web apps, stripe.
vi
KATA PENGANTAR
Segala puji syukur penulis panjatkan kehadirat Allah SWT yang telah memberi
rahmat dan hidayah-Nya, sehingga penulis dapat menyelesaikan penulisan skripsi ini
dengan judul “Implementasi Payament Request Api Pada Progressive Web Apps
(Studi Kasus Pada Penjualan Laptop Di Eksekutif Komputer)”. Skripsi ini
diajukan sebagai salah satu syarat untuk menyelesaikan program studi Teknik
Informatika jenjang Strata-1 STMIK Akakom Yogyakarta.
Dalam penyusunan skripsi ini tak lupa penulis ucapkan banyak terimakasi
kepada pihak-pihak yang telah berkenan membantu penulis dalam menyelesaikan
Skripsi ini yang diantaranya :
1. Ibu Dini Fakta Sari, S.T., M.T., selaku ketua jurusan Teknik Informatika strata
Satu (S1) Sekolah Tinggi Manajemen Informatika dan Komputer AKAKOM
Yogyakarta.
2. Bapak Ir. Sudarmanto, M.T., selaku dosen pembimbing yang telah
membimbing serta mengarahkan dan membantu dalam penyusunan skripsi ini.
3. Kedua orang tua dan kakak saya, seluruh teman dan orang terdekat selaku
penyemangat saya selama proses penyusunan skripsi.
Penulis menyadari, bahwa Skripsi ini masih jauh dari kesempurnaan, oleh karena itu
kritik dan saran yang bersifat membangun sangat penulis harapkan. Akhir kata, semoga
dapat bermanfaat bagi penulis dan semua pihak yang berkaitan serta dapat
dipergunakan untuk kebutuhan dimasa [Link].
Yogyakarta, Agustus 2019
Penulis
vii
DAFTAR ISI
Hal
HALAMAN JUDUL ...................................................................................... i
HALAMAN PERSETUJUAN ...................................................................... ii
HALAMAN PENGESAHAN ........................................................................ iii
HALAMAN PERSEMBAHAN .................................................................... iv
HALAMAN MOTTO .................................................................................... v
INTISARI ....................................................................................................... vi
KATA PENGANTAR .................................................................................... vii
DAFTAR ISI ................................................................................................... viii
DAFTAR GAMBAR ...................................................................................... xi
DAFTAR TABEL .......................................................................................... xiv
BAB I PENDAHULUAN ............................................................................... 1
1.1. Latar Belakang Masalah .................................................................... 1
1.2. Rumusan Masalah .............................................................................. 3
1.3. Ruang Lingkup ................................................................................... 3
1.4. Tujuan Penelitian ............................................................................... 4
1.5. Manfaat Penelitian ............................................................................. 5
1.6. Sistematika Penulisan ........................................................................ 5
BAB II TINJAUAN PUSTAKA DAN DASAR TEORI ............................. 7
viii
2.1. Tinjauan Pustaka ................................................................................ 7
2.2. Dasar Teori ......................................................................................... 9
2.2.1. Payment Request API .............................................................. 9
2.2.2. Stripe ........................................................................................ 10
2.2.3. Progressive Web Apps ............................................................. 14
2.2.4. Service Worker ........................................................................ 16
2.2.5. HTTPS ..................................................................................... 17
BAB III METODE PENELITIAN ............................................................... 19
3.1. Bahan/Data ......................................................................................... 19
3.2. Peralatan ............................................................................................. 19
3.2.1. Perangkat Keras ....................................................................... 19
3.2.2. Perangkat Lunak ...................................................................... 20
[Link] dan Rancangan Sistem .......................................................... 20
3.3.1. Analisis Masukan ..................................................................... 20
3.3.2. Analisis Proses ......................................................................... 21
3.3.3. Analisis Keluaran ..................................................................... 21
3.3.4. Diagram Konteks ..................................................................... 21
3.3.5. Diagram Alir Data Level 1 ...................................................... 22
3.3.6. Diagram Alir Data Level 2 Proses 3 ........................................ 24
3.3.7. Rancangan Basis Data.............................................................. 26
3.3.8. Proses Payment Request API Pada Aplikasi ........................... 27
ix
3.3.9. Proses Progressive Web Apps Pada Aplikasi .......................... 29
3.3.10. Rancangan Masukan .............................................................. 30
3.3.11. Rancangan Keluaran .............................................................. 33
BAB IV IMPLEMENTASI DAN PEMBAHASAN .................................... 36
4.1. Implementasi dan Uji Coba Sistem.................................................... 36
4.1.1. Implementasi ............................................................................ 36
4.1.2. Uji Coba Sistem ....................................................................... 45
4.1.3. Hasil Uji Coba Sistem .............................................................. 49
4.2. Pembahasan ........................................................................................ 61
BAB V PENUTUP .......................................................................................... 64
5.1. Kesimpulan ........................................................................................ 64
5.2. Saran .................................................................................................. 66
DAFTAR PUSTAKA ..................................................................................... 67
LAMPIRAN
x
DAFTAR GAMBAR
Gambar 2.1. Contoh Form Payment Request API ........................................... 13
Gambar 2.2. Life Cycle Service Worker .......................................................... 16
Gambar 3.1. Diagram Konteks......................................................................... 21
Gambar 3.2. Diagram Alir Data Level 1 .......................................................... 23
Gambar 3.3. Diagram Alir Data Level 2 Proses 3 ........................................... 25
Gambar 3.4. Rancangan Basis Data ................................................................. 26
Gambar 3.5. Proses Payment Request API Pada Aplikasi ............................... 27
Gambar 3.6. Proses Progressive Web Apps Pada Aplikasi ............................. 29
Gambar 3.7. Rancangan Masukan Data Barang .............................................. 31
Gambar 3.8. Rancangan Masukan Data Pembeli ............................................. 31
Gambar 3.9. Rancangan Masukan Data Kirim ................................................ 32
Gambar 3.10. Rancangan Masukan Data Transaksi ........................................ 32
Gambar 3.11. Rancangan Keluaran Data Barang ............................................ 33
Gambar 3.12. Rancangan Keluaran Data Pembeli ........................................... 34
Gambar 3.13. Rancangan Keluaran Data Kirim .............................................. 34
Gambar 3.14. Rancangan Keluaran Data Transaksi ........................................ 35
Gambar 4.1. Kode Program Instalasi Service Worker ..................................... 36
Gambar 4.2. Kode Program Aktivasi Service Worker ..................................... 37
Gambar 4.3. Kode Program Pengambilan Data Pada Service Worker ............ 38
xi
Gambar 4.4. Kode Program [Link]....................................................... 39
Gambar 4.5. Kode Program Pembayaran Dengan Stripe Di Sisi Client .......... 40
Gambar 4.6. Kode Program Pembayaran Dengan Stripe Di Sisi Server ......... 42
Gambar 4.7. Kode Program Cek Ongkos Kirim Dengan API Rajaongkir ...... 44
Gambar 4.8. Tampilan Halaman Utama .......................................................... 45
Gambar 4.9. Tampilan Halaman Tentang Kami .............................................. 46
Gambar 4.10. Tampilan Halaman Produk........................................................ 46
Gambar 4.11. Tampilan Halaman Detail Produk ............................................. 47
Gambar 4.12. Tampilan Halaman Hubungi Kami ........................................... 47
Gambar 4.13. Tampilan Halaman Keranjang Belanja ..................................... 48
Gambar 4.14. Tampilan Halaman Checkout .................................................... 48
Gambar 4.15. Hasil Uji Coba Pertama Service Worker Secara Online ........... 49
Gambar 4.16. Hasil Uji Coba Pertama Service Worker Secara Offline .......... 50
Gambar 4.17. Hasil Uji Coba Kedua Service Worker Secara Online .............. 51
Gambar 4.18. Hasil Uji Coba Kedua Service Worker Secara Offline ............. 51
Gambar 4.19. Menginstall Website Menjadi Aplikasi di Smartphone ............ 52
Gambar 4.20. Saldo Sebelum Transaksi .......................................................... 52
Gambar 4.21. Melakukan Checkout................................................................. 53
Gambar 4.22. Hasil Uji Coba Pembayaran ...................................................... 54
Gambar 4.23. Saldo Sesudah Transaksi ........................................................... 55
Gambar 4.24. Bukti Transaksi Digital ............................................................. 55
xii
Gambar 4.25. Hasil Transaksi di Dashboard Pembeli ..................................... 56
Gambar 4.26. Transfer Dari Stripe ke Payoneer .............................................. 57
Gambar 4.27. Hasil Transfer Dari Stripe ke Payoneer..................................... 58
Gambar 4.28. Detail Transaksi Yang Diterima Payoneer ................................ 59
Gambar 4.29. Saldo Akun Payoneer ................................................................ 59
Gambar 4.30. Transfer Payoneer Ke Bank Lokal ............................................ 60
xiii
DAFTAR TABEL
Gambar 2.1. Acuan Tinjauan Pustaka .............................................................. 9
xiv