Webhook Integration

Updated on: 30 September 2024

Halo Sultanku!, pada artikel ini, mimin akan membahas bagaimana cara anda untuk mengintegrasikan Custom Webhook, sehingga anda dapat membuat Bagibagi dapat berkomunikasi dengan aplikasi yang anda inginkan.

Mimin akan menjelaskan bagaimana cara anda mengintegrasikan aplikasi anda dengan Bagibagi, sekaligus melakukan validasi transaksi demi mencegah transaksi palsu yang masuk ke-aplikasi anda, dibawah ini adalah beberapa sesi integrasi Webhook yang anda dapat ikuti:

• Integrasi Platform Lain Ke-Bagibagi
• Integrasi Aplikasi Anda Ke-Bagibagi
• Validasi Transaksi Dari Bagibagi Ke-Aplikasi Anda

Integrasi Platform Lain Ke-Bagibagi

Anda dapat melakukan integrasi Platform lain Ke-Bagibagi dengan memasukkan url Webhook yang ada, pada bagian tabs Integration Page dalam halaman Stream Overlay, dan memasukkan Webhook Url pada bagian Webhook Integration yang anda inginkan.

Integrasi Aplikasi Anda Ke-Bagibagi

Anda dapat melakukan integrasi Aplikasi anda sehingga menerima notifikasi transaksi dari Bagibagi dengan memasukkan Custom Webhook Url pada input form Custom Url yang ada pada bagian tabs Integration Page dalam halaman Stream Overkay, dan memasukkan Custom Url aplikasi anda pada bagian ini. Bagibagi akan mengirimkan notifikasi transaksi dengan metode POST dalam bentuk application/json Dengan contoh seperti di-bawah ini:

        
        {
            "transaction_id": "bagibagi-965b3d64-1f5e-4361-a01b-5b58df37190c",
            "name": "Seseorang",
            "amount": 10000,
            "message": "Sukses selalu ya om ❤️",
            "mediaShareUrl": "https://www.youtube.com/watch?v=jHonT8q2MOQ",
            "created_at":"8/24/2024 10:30:00 AM"
        }
        
    

Validasi Transaksi Dari Bagibagi Ke-Aplikasi Anda

Jika anda ingin mencegah transaksi palsu yang masuk pada Custom Url yang anda masukkan, anda dapat melakukan validasi berdasarkan header X-Bagibagi-Signature yang kami kirimkan pada Custom Url anda. Signature dapat anda validasi dengan algoritma SHA-256, dengan signing key sesuai dengan Webhook Token yang anda dapat lihat pada Tab Integrasi Akun anda. Anda dapat melakukan validasi seperti contoh skenario yang kami berikan dibawah ini.

Semisal Webhook Token anda adalah 'secret', dan anda mendapatkan notifikasi transaksi yang memiliki body seperti dibawah ini:

      
            {
                "transaction_id": "bagibagi-965b3d64-1f5e-4361-a01b-5b58df37190c",
                "name": "Seseorang",
                "amount": 10000,
                "message": "Sukses selalu ya om ❤️",
                "mediaShareUrl": "https://www.youtube.com/watch?v=jHonT8q2MOQ",
                "created_at":"8/24/2024 10:30:00 AM"
            }
            
        

Kami juga akan mengirimkan header X-Bagibagi-Signature yang akan memiliki value '5c46b62f3348b62089671c2ad640e52b91789039339e94bdaaec1e4fd04950c6' dan dapat anda validasi dengan beberapa contoh bahasa pemrograman dibawah ini:

        
TypeScript

        
import { createHmac, timingSafeEqual } from "node:crypto"

function isValidSignature(
  value: Object,
  webhookToken: string,
  signature: string
): boolean {
  const generatedSignature = createHmac("sha256", webhookToken)
    .update(JSON.stringify(value))
    .digest("hex")
  const signatureBuffer = Buffer.from(signature, "hex")
  const generatedSignatureBuffer = Buffer.from(generatedSignature, "hex")
  return timingSafeEqual(
    new Uint8Array(signatureBuffer),
    new Uint8Array(generatedSignatureBuffer)
  )
}

const body = {
  "transaction_id": "bagibagi-965b3d64-1f5e-4361-a01b-5b58df37190c",
  "name": "Seseorang",
  "amount": 10000,
  "message": "Sukses selalu ya om ❤️",
  "mediaShareUrl": "https://www.youtube.com/watch?v=jHonT8q2MOQ",
  "created_at": "2/17/2025 10:46:21 AM"
}

const webhookToken = "secret"
const signature = "e9b17b5f09e7cfbe09bc677799aa8cb586f3bbe7b1c19a4be2545c16b240d250"
console.log(isValidSignature(body, webhookToken, signature));