Tokenisasi dengan Payments API

Mengumpulkan Detail Kartu Menggunakan Xendit.js

Tutorial ini akan menjelaskan tentang cara menggunakan HTML dan Xendit.js v3, library JavaScript dasar kami, untuk mengumpulkan detail kartu dan melakukan tokenisasi. Token yang Anda dapat kemudian bisa digunakan untuk membuat Payment Request guna menyelesaikan proses pembayaran dengan kartu. Terdapat tiga (3) langkah untuk mengumpulkan detail kartu:

Mengumpulkan informasi kartu dengan Xendit.js
Mengonversi detail kartu tersebut menjadi token sekali pakai
Mengirimkan token tersebut, bersama dengan isian form yang lainnya, ke server Anda

Langkah-langkah di atas berlaku jika Anda menggunakan form pembayaran berbasis HTML yang umum, dan memiliki span untuk menampilkan error message yang dikembalikan oleh Xendit.js.

Berikut adalah contoh form yang telah mencakup pemeriksaan basic error untuk memastikan response yang valid dari pengguna, dan juga mencakup span untuk menampilkan error kepada pengguna agar mereka dapat mengambil tindakan selanjutnya.

INFO

Fitur Payments API kami hanya dapat digunakan dengan Xendit.js v3. Untuk informasi lebih lanjut, silakan kunjungi library kami di sini: GitHub repository.

Langkah 1: Memuat XenditJS Library

Untuk mengumpulkan informasi kartu dengan aman, sertakan Xendit.js di website Anda dengan memasukkan kode berikut ke dalam bagian <head> website Anda. Mohon diingat, bahwa Xendit.js harus dimuat dari CDN dan tidak secara lokal:

<script type="text/javascript" src="https://js.xendit.co/v3/xendit.min.js"></script>
<script type="text/javascript">
     Xendit.setPublishableKey('YOUR_PUBLISHABLE_API_KEY');
</script>

YOUR_PUBLISHABLE_API_KEY akan mengidentifikasi website Anda kepada Xendit selama komunikasi. Gantilah kolom tersebut dengan Public API Key milik Anda untuk menguji kode ini melalui akun Xendit Anda.

Ketika Anda siap untuk lanjut ke production, pastikan untuk mengganti Test Public API Key ke Live Public API Key.

Langkah 2: Membuat Payment Method

Untuk keamanan, informasi kartu pengguna tidak akan melewati server Anda. Informasi kartu akan dikonversi menjadi token pada browser selama proses pembuatan Payment Method. Anda dapat membuat dan mengonversi informasi kartu dengan menggunakan fungsi createPaymentMethod, yang merupakan bagian dari fitur Payments API kami.

Xendit.payment.createPaymentMethod(
 {
   type: 'CARD',
   card: {
     currency: 'PHP',
     channel_properties: {
       success_return_url: 'https://redirect.me/goodstuff',
       failure_return_url: 'https://redirect.me/badstuff',
     },
     card_information: {
       card_number: cardNumber, // '4000000000001091'
       expiry_month: expiryMonth, // 03
       expiry_year: expiryYear, // 2030
       cvv: cvvNumber, // 111
       cardholder_name: "John Doe",
       cardholder_email: "johndoe@gmail.com",
       cardholder_phone_number: "+628212223242526"     
   },
   reusability: 'MULTIPLE_USE',
 }, (err, resp) => console.log(resp, "Here is the response sent by the server")
)

cardNumber, expiryMonth, expiryYear dan cvvNumber adalah variabel yang akan menangkap detail kartu pengguna saat dimasukkan pada halaman checkout Anda. Untuk keamanan dan kepatuhan terhadap PCI DSS, pastikan untuk tidak mencatat atau menyimpan field-field variabel ini di server Anda.

Anda dapat menggunakan argumen kedua dalam fungsi ini untuk menentukan fungsi yang akan menangani respons dari server. Fungsi ini penting untuk menyimpan Payment Method ID yang dikembalikan oleh Xendit kepada Anda untuk pembayaran kartu yang sebenarnya.

Langkah 3: Menangani 3DS atau alur OTP

Jika Anda memilih MULTIPLE_USE pada parameter reusability, beberapa kartu mungkin memerlukan level otentikasi tambahan yang dikenal sebagai 3D Secure (3DS) atau OTP (one-time password).

Jika pembuatan Payment Method mengharuskan adanya proses 3DS, status respon yang Anda dapatkan adalah REQUIRES_ACTION dan akan terdapat objek AUTH pada actions array. Anda harus mengirimkan URL kepada pelanggan Anda agar mereka dapat memasukkan OTP. Saat proses 3DS telah selesai, baik itu berhasil maupun gagal, Anda akan menerima callback untuk hasil akhir pembuatan Payment Method. Pelanggan selanjutnya akan diarahkan menuju success_redirect_url yang telah Anda tetapkan pada langkah sebelumnya

Berikut ini adalah contoh respons yang telah kami jelaskan sebelumnya. Field lain dalam respons Payment Method tidak kami tampilkan untuk kenyamanan.

...
"status": "REQUIRES_ACTION",
 "actions": [
   {
     "action": "AUTH",
     "url": "https://redirect.xendit.co/callbacks/v2/authentications/63201d86ea3d99001aad0724/authentication_redirect?api_key=xnd_public_development_k3WxkSkv0DXkb1WqWKIJ3ZpMCZZC6hNtQFL7lrRdpvICxdFecoTyZAycTed572mU",
     "url_type": "WEB",
     "method": "GET"
   }
 ],
...

URL berikut merupakan contoh yang harus Anda tampilkan pada halaman modal atau iframe: https://redirect.xendit.co/callbacks/v2/authentications/63201d86ea3d99001aad0724/authentication_redirect?api_key=xnd_public_development_k3WxkSkv0DXkb1WqWKIJ3ZpMCZZC6hNtQFL7lrRdpvICxdFecoTyZAycTed572mU

Langkah 4: Menyimpan Payment Method untuk pembayaran yang akan datang

Setelah berhasil membuat dan mengotentikasi Payment Method, Anda bebas untuk menyimpan seluruh objek untuk pembayaran. Semua field yang dikembalikan dalam respons Payment Method aman untuk disimpan di server Anda.

Untuk menyelesaikan pembayaran dengan kartu, Anda diharuskan untuk menyertakan Payment Method ID dalam Payment Request yang selanjutnya dapat dibuat di server.

Langkah Selanjutnya

Anda telah berhasil membuat Payment Method dari frontend aplikasi/website Anda. Sekarang Anda dapat membuat Payment Request dengan Payment Method yang telah dibuat sebelumnya. Silakan temukan informasi lebih lanjut pada API Reference kami.

Last Updated on 2024-09-30

Mengumpulkan Detail Kartu Menggunakan Xendit.js
Langkah Selanjutnya