DOCS

Integrasi kustom

Integrasi kustom

Bangun integrasi Checkout end-to-end ke situs kustom Anda.

Daftar periksa integrasi 

Ikuti daftar periksa komprehensif ini untuk menyiapkan akun Zonos Dashboard Anda dan mengintegrasikan Zonos Checkout ke situs atau platform kustom Anda.

Untuk memulai, silakan hubungi tim penjualan kami untuk membuat akun dan menandatangani perjanjian. Setelah perjanjian ditandatangani, Anda akan menerima dua setoran mikro di akun Anda yang perlu diverifikasi.

Silakan kirimkan jumlah setoran mikro ini melalui email ke accounting@zonos.com dengan ID toko Dashboard Anda (CC perwakilan penjualan Anda).

Setelah diverifikasi, detail perbankan Anda akan ditampilkan di Dashboard -> Settings -> Billing.

Setelah membuat akun Zonos Anda, Anda perlu mengkonfigurasi pengaturan di Dashboard untuk memastikan Checkout berfungsi dengan baik dengan toko Anda. Bagian ini mencakup semua konfigurasi Dashboard yang penting.

Siapkan pembayaran 

Hubungkan rekening bank untuk menerima pembayaran tepat waktu dari Checkout. Pembayaran diproses setiap hari dalam penundaan 2 hari dari pembayaran yang ditangkap. Untuk melakukan ini, silakan ikuti langkah-langkah berikut:

  1. Navigasi ke Dashboard -> Settings -> Checkout settings .
  2. Klik Add bank account
  3. Anda akan dibawa ke portal Stripe untuk menyelesaikan pengaturan dan memberikan informasi berikut:
    • Informasi rekening bank.
    • EIN Perusahaan.
    • Nomor Jaminan Sosial pemilik perusahaan 25%. Untuk detail lebih lanjut tentang mengapa ini diperlukan, lihat dokumentasi Stripe.

Catatan: Jika Anda perlu memperbarui jadwal pembayaran Anda, silakan hubungi support@zonos.com

Siapkan domain yang diizinkan 

Skrip Zonos JS memerlukan daftar domain yang diizinkan untuk tujuan keamanan. Ini mencegah situs yang tidak sah memuat skrip dan memastikan hanya berjalan di domain yang disetujui Anda. Tanpa konfigurasi ini, skrip akan mengembalikan kesalahan izin.

Untuk menyiapkan ini:

  1. Navigasi ke Dashboard -> Settings -> Checkout settings
  2. Di bawah URLs, tambahkan domain lengkap Anda dan subdomain apa pun tempat Checkout akan digunakan. Misalnya, jika domain Anda adalah example.com, Anda harus menambahkan example.com dan test.example.com.

Sesuaikan pengaturan branding 

Konfigurasi pengaturan branding Anda di Dashboard untuk mencocokkan tampilan dan nuansa toko Anda.

Untuk melakukan ini, silakan ikuti langkah-langkah berikut:

  1. Navigasi ke Dashboard -> Settings -> Checkout settings -> Branding
  2. Konfigurasi pengaturan berikut:
    • Logo.
    • Brand dan warna aksen.
    • Tema, Gaya, dan Font.

Untuk informasi lebih lanjut tentang pengaturan branding, lihat dokumentasi kami.

Hubungkan penyedia pengiriman 

Untuk memberikan penawaran pengiriman saat checkout, Anda perlu menghubungkan penyedia pengiriman ke akun Zonos Anda. Ini akan memungkinkan Anda mengaktifkan tingkat layanan pengiriman tertentu saat checkout.

Untuk menghubungkan penyedia pengiriman, silakan ikuti langkah-langkah berikut:

  1. Navigasi ke Dashboard -> Settings -> Shipping -> Rates
  2. Klik Add carrier
  3. Ikuti instruksi pengaturan penyedia.

Untuk detail lebih lanjut tentang menghubungkan akun penyedia, lihat dokumentasi kami.

Siapkan zona pengiriman 

Zona pengiriman memungkinkan Anda mengkonfigurasi penyedia pengiriman dan tingkat layanan mana yang tersedia untuk berbagai wilayah dunia.

Untuk menyiapkan zona pengiriman, silakan ikuti langkah-langkah berikut:

  1. Navigasi ke Dashboard -> Settings -> Shipping -> Locations
  2. Klik New zone
  3. Masukkan nama zona dan pilih negara yang ingin Anda kirim.
  4. Pilih penyedia dan tingkat layanan yang ingin Anda tawarkan.

Untuk detail lebih lanjut tentang zona pengiriman, lihat dokumentasi kami.

Siapkan fallback negara asal dan kode HS 

Negara asal dan kode HS digunakan untuk menghitung bea dan pajak yang akurat.

Jika Anda tidak memberikan negara asal atau kode HS tertentu, kami akan menggunakan fallback yang disiapkan di Dashboard.

Untuk menetapkan fallback Negara Asal dan kode HS Anda:

  1. Navigasi ke Dashboard -> Settings -> Shipping -> Catalog.
  2. Untuk negara asal, pilih negara tempat sebagian besar produk Anda diproduksi.
  3. Untuk kode HS, masukkan kode HS produk Anda yang paling umum. Jika Anda tidak memiliki kode HS, navigasi ke Classify di Dashboard dan masukkan nama dan deskripsi produk Anda untuk membuat kode HS yang akurat.

Snippet Zonos JS adalah integrasi JavaScript sisi klien yang memungkinkan fungsionalitas checkout global di situs Anda. Ini berfungsi sebagai jembatan antara platform e-commerce Anda dan layanan Zonos, menangani:

  • Pengalaman Checkout: Merender UI checkout dan memproses pembayaran.
  • Layanan Lokasi: Mendeteksi lokasi pengunjung dan mengelola konversi mata uang.
  • Integrasi Keranjang: Terhubung dengan sistem keranjang dan pesanan Anda yang ada.
  • Keamanan: Memvalidasi domain dan mengautentikasi permintaan API.

Snippet dimuat secara asinkron untuk mencegah dampak apa pun pada kinerja situs Anda. Ini menginisialisasi dengan kredensial API toko Anda dan menangani semua interaksi sisi klien dengan aman. Implementasi dirancang agar tidak mengganggu, memerlukan perubahan minimal pada alur checkout yang ada.

Di bawah ini adalah contoh lengkap yang mencakup pemuatan skrip, inisialisasi, dan penanganan peristiwa untuk direferensikan saat mengintegrasikan Checkout.

1
  1. Lewatkan ID yang sesuai melalui customHTML Checkout Anda sehingga relay tahu properti/piksel mana yang akan dipecat:
1

Untuk instruksi iframe langkah demi langkah, referensi peristiwa lengkap (termasuk pemetaan muatan purchase / Purchase), dan tip debug, lihat:

Untuk mensinkronkan pesanan antara sistem Anda dan Zonos Dashboard, terapkan panggilan API dan webhook ini:

Mutasi yang Diperlukan 

MutasiDeskripsi
orderUpdateAccountOrderNumberMenyinkronkan nomor akun asli Anda dengan Dashboard. Docs →
orderAddTrackingNumberDiperlukan hanya jika Anda tidak mencetak label di Dashboard. Memastikan pelacakan muncul di Dashboard sehingga Zonos dapat menjamin perhitungan biaya pendaratan Anda. Docs →

Webhook yang Diperlukan 

WebhookDeskripsi
ORDER_CREATEDDiperlukan untuk mengirim pesanan Checkout ke platform asli Anda. Docs →
ORDER_STATUS_CHANGEDMembuat sistem Anda tetap sinkron dengan Zonos saat status pesanan berubah (misalnya, dipenuhi, dibatalkan). Docs →

Sebelum go live dengan integrasi Checkout Anda, penting untuk menguji secara menyeluruh semua aspek integrasi untuk memastikan pengalaman pelanggan yang lancar. Ini termasuk menguji alur checkout, pemrosesan pembayaran, pembuatan pesanan, dan fungsionalitas webhook.

Ikuti panduan pengujian kami untuk memverifikasi bahwa integrasi Anda berfungsi dengan benar dan untuk mengidentifikasi dan memperbaiki masalah apa pun sebelum meluncurkan ke produksi.

Di bawah ini adalah beberapa pertanyaan umum tentang proses integrasi.

Bagaimana Zonos menangani konfirmasi pesanan? 

Konfigurasi pengalaman pasca-pembelian di Dashboard -> Settings -> Checkout settings di bawah Success page type. Tiga opsi tersedia:

  • Show Zonos success page (default, recommended) — Zonos menampilkan halaman terima kasih bawaan setelah pesanan ditempatkan. Halaman selalu ditampilkan, bahkan jika pesanan gagal diimpor ke sistem Anda, sehingga pembeli selalu mendapat konfirmasi.
  • Redirect to a success page — Zonos menunggu di layar "Order complete" singkat sampai pesanan dibuat, kemudian mengalihkan ke URL kesuksesan Anda yang dikonfigurasi dengan zOrderNumber (dan orderId untuk keranjang warisan) ditambahkan sebagai parameter kueri.
  • Close the checkout modal — Zonos menutup modal setelah pembayaran ditangkap. Jika Anda juga mengkonfigurasi URL kesuksesan, Zonos mengalihkan ke URL tersebut segera setelah Stripe mengumpulkan pembayaran — tanpa menunggu pesanan dibuat — dan menambahkan zonosCheckoutSessionId sebagai parameter kueri. Gunakan opsi ini saat Anda menginginkan serah terima tercepat kembali ke halaman kesuksesan Anda sendiri.

Mencari pesanan dari zonosCheckoutSessionId 

Saat Anda menggunakan Close the checkout modal dengan URL pengalihan, pesanan mungkin memerlukan beberapa detik untuk terpasang ke sesi checkout setelah pengalihan. Baca zonosCheckoutSessionId dari URL dan lakukan polling terhadap kueri GraphQL checkoutSession dari server Anda menggunakan token kredensial rahasia Anda sampai pesanan siap. Jangan pernah panggil ini dari browser — token kredensial rahasia harus tetap di sisi server.

1query getCheckoutSession($id: String!) {
2 checkoutSession )
3 order
4 id

Kirimkan kueri ke https://api.zonos.com/graphql dengan token kredensial rahasia Anda dari Dashboard -> Settings -> Integrations dilewatkan sebagai header permintaan credentialToken.

Bisakah saya diberi tahu saat pesanan dibuat? 

Ya. Jika Anda ingin menerima notifikasi saat pesanan dibuat, di Dashboard di bagian Email dari Checkout settings, Anda dapat memasukkan alamat email anggota tim yang harus diberitahu saat pesanan dibuat, dikirim, atau dibatalkan.

Pesan demo

Apakah halaman ini bermanfaat?