
Masalah Menunggu Tanpa Kepastian
Bayangkan kamu sedang menunggu kurir paket. Cara yang bodoh adalah: Kamu membuka pintu rumah setiap 5 menit untuk mengecek jalanan ("Kurir udah sampai belum?" "Belum."). Ini akan membuatmu kelelahan. Ini disebut Polling (Tarikan berulang).
Cara yang cerdas adalah: Kamu memberikan Nomor HP-mu ke kurir. Saat kurir tiba di depan rumah, kurir yang akan meneleponmu! Kamu bisa tidur tenang. Konsep telepon dari luar inilah yang disebut Webhooks di dunia *Backend*.
Apa itu Webhooks? (Reverse API)
Webhooks sering dijuluki Reverse API (API Terbalik).
Secara normal, Server *Backend*-mu (Toko.com) yang menembak Server Orang Lain (Payment Gateway Midtrans/Stripe) untuk meminta data.
Dengan Webhooks, Server Orang Lain-lah yang bertindak sebagai Klien, dan Ia akan menembak (mengirim POST Request) ke Server Backend-mu!
Skenario Pembayaran Nyata (Payment Gateway)
- Budi melakukan Checkout sepatu. Server-mu meminta Midtrans membuat QRIS.
- Budi pergi ke mesin ATM, lalu ia mentransfer uang.
- Di Detik itu juga, Server Midtrans (yang terhubung ke BCA) menyadari ada uang masuk.
- Server Midtrans langsung mengambil Nomor HP-mu (URL Webhook yang sudah kamu berikan, misal:
https://api.toko.com/webhook/midtrans) lalu menembaknya dengan HTTP POST. - Midtrans mengirim JSON:
{ "order_id": "99", "status": "SUCCESS" }. - Server-mu menerima tembakan itu, mengubah status pesanan menjadi Lunas, dan memunculkan Notifikasi Hijau ke layar HP Budi!
Syarat Mutlak Membuat Webhook
Karena URL Webhook-mu harus bisa ditembak oleh Midtrans/Stripe, Server-mu WAJIB berada di Internet Terbuka (Public IP/Domain). Kamu tidak bisa menerima Webhook jika aplikasimu masih berada di http://localhost:3000 karena Midtrans tidak bisa masuk ke dalam WiFi kamar kosmu!
Tips Tambahan: Untuk menguji Webhooks saat kamu masih dalam tahap pengembangan (di localhost), *developer* biasa menggunakan alat sakti pembuka terowongan sementara bernama Ngrok!
Mau langsung pakai template?
Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.
Browse Templates