30 Agu 2026 1 menit baca #javascript

Membuat pesan pesanan WhatsApp yang rapi dari keranjang

Checkout ke WhatsApp cocok untuk toko kecil, asalkan pesannya terstruktur dan mudah disalin admin.

Arif Rahman Hakim · Web developer freelance

Banyak toko kecil belum butuh gerbang pembayaran otomatis. Yang mereka butuhkan: pesanan masuk dalam format yang sama setiap kali. Caranya sederhana, yaitu menyusun teks dari isi keranjang lalu membuka tautan wa.me dengan parameter text.

Susun pesan dari data keranjang

TypeScript

type Item = { nama: string; varian: string; qty: number; harga: number };

const rp = (n: number) => 'Rp' + n.toLocaleString('id-ID');

export function pesanWA(items: Item[], ongkir: number, alamat: string) {
  const baris = items.map(
    (i, n) => `${n + 1}. ${i.nama} (${i.varian}) x${i.qty} = ${rp(i.qty * i.harga)}`
  );
  const subtotal = items.reduce((s, i) => s + i.qty * i.harga, 0);
  return [
    'Halo, saya mau pesan:',
    ...baris,
    `Ongkir: ${rp(ongkir)}`,
    `Total: ${rp(subtotal + ongkir)}`,
    `Alamat: ${alamat}`,
  ].join('\n');
}

const url = 'https://wa.me/?text=' + encodeURIComponent(pesanWA(items, 12000, alamat));

Hal yang sering terlewat

Selalu pakai encodeURIComponent, terutama untuk tanda & dan baris baru.
Hitung ulang total di sisi admin; harga di browser bisa diubah pengunjung.
Simpan keranjang di localStorage agar tidak hilang saat pembeli berpindah halaman.

Tanpa JavaScript, tetap sediakan tombol WhatsApp biasa dengan teks umum supaya pembeli tidak terjebak.

Susun pesan dari data keranjang

Hal yang sering terlewat

Catatan lain