Tampilkan QR yang tepat untuk setiap transaksi

Endpoint gambar

Response yang berhasil menggunakan Content-Type image/png dan berukuran 500 x 500 piksel. Endpoint hanya mengembalikan QR milik project yang sesuai dengan API key.

Cara tercepat: pakai field dari response create

Setiap Transaction (dari create, get, atau simulate) sudah menyertakan qr_url — link siap pakai ke endpoint gambar di atas, jadi tidak perlu menyusun URL sendiri. Kalau aplikasi Anda punya renderer QR sendiri (mis. di app mobile), pakai qr_payload — string QRIS mentah yang sama yang dipakai untuk membuat gambar PNG-nya.

const trx = await kipay.createTransaction({ amount: 285000 });

// Opsi 1 — langsung pakai sebagai src gambar
imgElement.src = trx.qr_url;

// Opsi 2 — render sendiri pakai library QR pilihan Anda
renderQrCode(trx.qr_payload);

Teruskan gambar melalui backend

Route internal menerima trx_id, mengambil PNG dari KiPay secara server-to-server, lalu meneruskan Content-Type dan status HTTP yang sama ke checkout.

export async function GET(
  _request: Request,
  context: { params: Promise<{ transactionId: string }> }
) {
  const { transactionId } = await context.params;
  const apiKey = process.env.KIPAY_API_KEY;
  if (!apiKey) return new Response('KiPay is not configured', { status: 500 });

  const source =
    `https://api.kipay.biz.id/api/pay/${apiKey}/transactions/${encodeURIComponent(transactionId)}/qr.png`;
  const response = await fetch(source, { cache: 'no-store' });

  return new Response(response.body, {
    status: response.status,
    headers: { 'Content-Type': response.headers.get('Content-Type') ?? 'image/png' },
  });
}

Berikan instruksi yang mudah dipahami

• Tampilkan amount final, bukan requested_amount
• Tampilkan expires_at dalam zona waktu yang jelas
• Sediakan tombol untuk mengecek status tanpa mewajibkan refresh halaman
• Bedakan status paid dan expired secara visual
• Jangan menjadikan bukti transfer dari pelanggan sebagai sumber status

Jika gambar tidak tersedia

Response 404 dapat berarti API key atau trx_id salah, atau transaksi belum memiliki qr_payload. Jangan menampilkan placeholder QR. Tampilkan pesan error pada checkout, lalu minta backend membaca transaksi untuk diagnosis.