Embedded Checkout

Embedded Checkout membuat halaman pembayaran Aulaa muncul sebagai jendela di atas website Anda. Pembeli tidak pindah halaman: ia klik "Beli", membayar di jendela itu, lalu jendelanya tertutup sendiri.

Sebelum mulai

Pastikan tiga hal ini:

1. Website Anda sudah tercatat di project. Isi kolom Link Toko, Media Sosial, atau Website di halaman project dengan alamat website tempat tombol "Beli" dipasang. Contohnya, kalau Anda mengisi tokosaya.com:
   • tokosaya.com dan www.tokosaya.com: jendela muncul.
   • shop.tokosaya.com atau website lain: jendela tidak muncul.
2. Website memakai https. Alamat yang diawali http:// (tanpa "s") tidak bisa.
3. Project sudah disetujui. Kalau Anda mengganti alamat website, project ditinjau ulang, dan selama itu jendela tidak muncul.

Sedang uji coba di mode sandbox? Anda tidak perlu menunggu project disetujui, dan bisa langsung mencobanya dari komputer sendiri (localhost) sebelum website Anda online.

Aturan ini sengaja ketat supaya checkout Aulaa tidak bisa dipasang di website lain, misalnya situs penipuan. Di website yang tidak terdaftar, jendela hanya menampilkan tulisan Halaman pembayaran tidak bisa ditampilkan:

Pilih cara memasang

Ada dua cara. Yang dilihat pembeli sama persis. Bedanya hanya pada apa yang bisa dilakukan website Anda.

	Cara 1: Tempel saja	Cara 2: Pakai JavaScript
Cocok untuk	Website biasa, WordPress, atau toko yang link pembayarannya sudah ada	Website yang dibuat oleh programmer
Yang perlu dikerjakan	Tempel satu baris kode, lalu tambahkan satu kata di tombol "Beli"	Menulis sedikit kode JavaScript
Setelah pembeli membayar	Jendela tertutup sendiri, halaman Anda tidak berubah	Website Anda bisa langsung bereaksi, misalnya menampilkan "Terima kasih" atau mengosongkan keranjang
Link pembayaran	Harus sudah ada di tombol	Boleh dibuat saat itu juga, misalnya oleh server Anda lewat API Call

Kalau ragu, mulai dari Cara 1.

Cara 1: Tempel saja

Langkah 1. Tempel baris ini satu kali di halaman yang punya tombol "Beli":

<script src="https://payment.aulaa.co/embed.js" defer></script>

Langkah 2. Di tombol atau tautan "Beli", tambahkan kata data-aulaa-checkout:

<a href="https://payment.aulaa.co/pay/ID_PEMBAYARAN" data-aulaa-checkout>Beli</a>

Selesai. Isi href dengan nilai payment_link dari respons JSON Buat Pembayaran, contohnya https://payment.aulaa.co/pay/….

Cara 2: Pakai JavaScript

Tempel baris yang sama seperti Langkah 1 di atas, lalu buka jendelanya dari kode Anda saat tombol "Beli" diklik:

// paymentLink = link pembayaran, misalnya "payment_link" dari API Call.
Aulaa.checkout.open(paymentLink, {
  // Jalan saat pembayaran selesai.
  onSuccess(pembayaran) {
    tampilkanTerimaKasih()
  },
  // Jalan saat jendela tertutup: ditutup pembeli, atau tertutup sendiri setelah lunas.
  onClose(info) {
    if (!info.paid) tampilkanPesan('Pembayaran belum selesai')
  },
})

Jangan pernah menandai pesanan lunas dari onSuccess. onSuccess (dan kabar aulaa:paid) hanya untuk tampilan, misalnya menampilkan "Terima kasih". Kabar dari browser bisa tidak sampai (pembeli menutup tab) dan bisa dipalsukan siapa saja. Kalau Anda mengirim barang atau mengaktifkan layanan berdasarkan kabar ini, Anda bisa tertipu pesanan yang tidak pernah dibayar.

Tanda lunas yang sah hanya dua:

1. Webhook dari Aulaa ke server Anda, atau
2. Cek Status Pembayaran dari server Anda, dengan hasil paid.

Yang dilihat pembeli

• Setelah membayar, jendela menampilkan Pembayaran Berhasil, lalu tertutup sendiri dalam 3 detik. Pembeli tetap di halaman Anda.
• Bayar dengan kartu kredit? Data kartu diisi langsung di dalam jendela. Kalau verifikasi bank tidak muncul, pembeli bisa membukanya di tab baru lewat tautan di bawah form.
• Bayar dengan e-wallet? Langkah pembayarannya dibuka di tab baru, karena aplikasi e-wallet sering tidak jalan di dalam jendela. Jendela menunggu, lalu tertutup sendiri begitu lunas.
• Pembeli bisa menutup jendela kapan saja: tombol ×, tombol Esc, atau klik di luar jendela. Menutup jendela tidak membatalkan tagihan.
• Di ponsel, jendela memenuhi layar.

Kalau jendela tidak muncul

• Yang muncul hanya tulisan "Halaman pembayaran tidak bisa ditampilkan". Alamat website belum cocok dengan yang terdaftar di project, belum https, atau project belum disetujui. Lihat Sebelum mulai.
• Pembeli malah pindah ke halaman pembayaran biasa. Baris kode di Langkah 1 belum terpasang, atau link di tombol bukan link payment.aulaa.co.
• Website Anda memasang aturan keamanan Content-Security-Policy. Izinkan alamat payment.aulaa.co:

script-src https://payment.aulaa.co;
frame-src  https://payment.aulaa.co;

Pengaturan tambahan (opsional)

Yang ingin diatur	Cara 1: tambahkan di tombol	Cara 2: tambahkan di kode
Jendela selalu terang atau gelap	data-aulaa-theme="light" atau "dark"	theme: 'light' atau 'dark'
Jangan tutup sendiri setelah lunas	data-aulaa-auto-close="false"	autoClose: false
Menutup jendela dari kode		simpan hasil Aulaa.checkout.open(…), lalu panggil .close()

Isi pembayaran di onSuccess: id, order_id, dan status. Isi info di onClose: paid (sudah lunas atau belum) dan reason ("user" ditutup pembeli, "paid" tertutup sendiri setelah lunas, "api" ditutup dari kode Anda).

Pada Cara 1, tombol juga mengirim kabar yang bisa ditangkap JavaScript: aulaa:paid, aulaa:close, dan aulaa:loaded.