Tokenisasi

Tutorial ini menjelaskan cara menggunakan HTML dan Xendit.js, library Javascript mendasar kami, untuk mengumpulkan detail kartu dan melakukan tokenisasi. Ada tiga langkah untuk mengumpulkan detail kartu:

Mengumpulkan informasi kartu kredit dengan xendit.js
Mengubah detail pembayaran tersebut menjadi token tunggal guna
Mengirimkan token beserta form ke server Anda

Langkah-langkah diatas dapat dilakukan jika Anda memiliki form pembayaran HTML yang tipikal, yang dapat menampilkan pesan error yang dikembalikan dari Xendit.js. Sebagai contoh, contoh form yang telah memiliki pemeriksaan eror untuk memastikan respon yang diterima user valid, dan dapat mengembalikan eror untuk kemudian diolah oleh user.

Langkah 1: Mengumpulkan Informasi Kartu Kredit

Untuk mengumpulkan informasi kartu kredit dengan aman, termasuk Xendit.js pada halam Anda dengan menempatkan kode ini pada bagian<head> dari website Anda. Perhatikan bahwa xendit.js harus dimuat dari CDN dan bukan dari lokal:

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

Publishable Key Anda akan mengidentifikasi website Anda kepada Xendit selama dilakukan komunikasi. Tukar nilai tersebut dengan publishable API key Anda yang sesungguhnya untuk menguji coba dengan akun Xendit Anda.

Ketika Anda akan menggunakan environment production , pastikan untuk mengganti publishable key development ke production

Langkah 2: Validasi informasi kartu kredit

Sebelum memanggil methodcreateToken , pastikan detail kartu kredit telah divalidasi. Xendit.js menyediakan method yang dapat digunakan untuk melakukan validasi nomor kartu kredit, masa berlaku, dan cvn. Silakan lihat contoh penggunaan metode tersebut sebagai berikut:

Xendit.card.validateCardNumber('4000000000001091'); // true
Xendit.card.validateCardNumber('abc'); // false

Xendit.card.validateExpiry('09', '2017'); // true
Xendit.card.validateExpiry('13', '2017'); // false

Xendit.card.validateCvn('123'); // true
Xendit.card.validateCvn('aaa'); // false

Langkah 3: Membuat token tunggal guna (single use token)

Demi keamanan, informasi kartu kredit pelanggan tidak akan pernah dikirimkan melalui server Anda, melainkan informasi kartu kredit telah di-tokenisasi (‘tokenized’) pada browser, dan token tersebut yang digunakan untuk menagih pembayaran kartu kredit. Kemudian langkah berikutnya dilakukan pengubahan detail pembayaran menjadi token tunggal guna. Proses ini dilakukan ketika terdapat jeda saat melakukan submit form, pada saat ini detail pembayaran dikirimkan langsung ke Xendit (dari browser pengguna).

Setelah pemanggilan fungsi setPublishableKey di kode javascript, buatlah sebuah event handler yang menangani submit event pada form. Handler harus mengirimkan detail from ke Xendit untuk tokenisasi dan mencegah terjadinya submit form (form akan di-submit javascript kemudian). Berikut contoh kode yang menampilkan kode yang dapat digunakan. Meskipun pada contoh ini digunakan jQuerry, Xendit.js tidak memiliki dependency , Anda dapat saja menggunakan vanilla Javascript.

$(function() {
    var $form = $('#payment-form');
    $form.submit(function(event) {
        // Disable the submit button to prevent repeated clicks:
        $form.find('.submit').prop('disabled', true);
        // Request a token from Xendit:
        Xendit.card.createToken({
            amount: $form.find('#amount').val(),
            card_number: $form.find('#card-number').val(),
            card_exp_month: $form.find('#card-exp-month').val(),
            card_exp_year: $form.find('#card-exp-year').val(),
            card_cvn: $form.find('#card-cvn').val()
            is_multiple_use: false,
            external_id: $form.find('#external-id').val(),
            should_authenticate: true,
            card_holder_email: $form.find('#card-holder-email').val(),
            card_holder_first_name: $form.find('#card-holder-first-name').val(),
            card_holder_last_name: $form.find('#card-holder-last-name').val(),
            card_holder_phone_number: $form.find('#card-holder-phone-number').val()        
    }, xenditResponseHandler);
        // Prevent the form from being submitted:
        return false;
    });
});

Yang paling penting adalah pemanggilanXendit.card.createToken . Parameter input pertama adalah detail pembayaran. Detail ini harus harus disediakan dalam bentuk generic object . Selain dari detail pembayaran, kami juga menyarankan merchant untuk mengirimkan external_id yang berfungsi sebagai ID unik untuk mengidentifikasi token yang telah dibuat.

Parameter input kedua,xenditResponseHandler , adalah callback yang dapat Anda gunakan untuk menangani respon dari form Xendit. Callback ini menerima dua parameter input:

err adalah objek error yang menyimpan informasi kegagalan
response berisi data yang kemudian digunakan untuk melakukan penagihan (charge )

Response memiliki format sebagai berikut

{
    "id": "583733d0320b64b636258a99", // Token identifier
    "status": "IN_REVIEW", // Token identifier status
    "failure_reason": "", // Token identifier failure reason
    "payer_authentication_url": "https://api.xendit.co/credit_c...", // URL where your customer can perform 3DS verification
}

Ketika script Anda menerima respon dari server Xendit, maka fungsixendiResponseHandlert akan dipanggil:

Jika informasi kartu yang dimasukkan oleh pengguna mengembalikan error, error akan ditampilkan pada halaman
Jika tidak ada error, maka token sekali pakai ( single-use token ) telah berhasil dibuat, dan akan mengembalikan identifier token ke form yang kemudian akan di- submit ke server Anda.

Untuk memperoleh token pada server Anda, token tersimpan pada hidden input yang baru. Nilai token tersebut adalah token ID yang diterima sebelumnya.

Beberapa kartu kredit membutuhkan proses autentikasi tambahan yang dikenal dengan OTP (one-time password) atau 3D Secure (3DS). Agar kartu-kartu tersebut dapat digunakan pada website Anda, Anda harus memiliki tempat untuk dilakukan render halaman verifikasi 3DS yang akan digunakan pengguna untuk memasukkan kode OTP mereka. Pada umumnya hal ini dapat dilakukan dengan menempatkan iframe , namun Anda juga dapat menerapkannya dengan cara lain. Hal penting yang harus Anda perhatikan adalah:

Jika pengguna melakukan refresh pada halaman 3DS (atau menutup halaman pop-up 3DS), maka tampilan akan kembali ke halaman pengguna mengisi informasi kartu kredit.
Ketika proses 3DS selelai, iframe atau halaman akan tertutup dan pengguna akan diarahkan ke halaman berhasil atau error, tergantung dengan hasilnya.

Untuk kartu-kartu kredit yang mengharuskan penggunaan 3DS,status dari respon akan bernilaiIN_REVIEW dan akan ada field bernamapayer_authentication_url . Anda harus mengirimkan URL autentikasi ini agar pemilik kartu dapat memasukkan informasi 3DS mereka. Selain itu, setelah proses 3DS selesai atau gagal, fungsi callback yang sama,xenditResponseHandler , akan dipanggil dan mengembalikan informasi token ID yang telah diperbarui.

Berikut contoh lengkap darixenditResponseHandler , termasuk membuka iframe untuk verivikasi 3DS:

function xenditResponseHandler (err, creditCardToken) {
    if (err) {
        // Show the errors on the form
        $('#error pre').text(err.message);
        $('#error').show();
        $form.find('.submit').prop('disabled', false); // Re-enable submission
        return;
    }
    if (creditCardToken.status === 'VERIFIED') {
        // Get the token ID:
        var token = creditCardToken.id;
        // Insert the token into the form so it gets submitted to the server:
        $form.append($('<input type="hidden" name="xenditToken" />').val(token));
        // Submit the form to your server:
        $form.get(0).submit();
    } else if (creditCardToken.status === 'IN_REVIEW') {
        window.open(creditCardToken.payer_authentication_url, 'sample-inline-frame');
        $('#three-ds-container').show();
    } else if (creditCardToken.status === 'FAILED') {
        $('#error pre').text(creditCardToken.failure_reason);
        $('#error').show();
        $form.find('.submit').prop('disabled', false); // Re-enable submission
    }
}

Mengumpulkan detail kartu dengan mobile SDK

Langkah-langkah untuk menggunakan mobile SDK dapat dilihat di:

Mohon untuk melakukan integrasi menggunakan versi SDK terbaru:

iOS versi 3.9.2
Android versi 4.2.0

Referensi Tokenisasi

Untuk referensi API selengkapnya dapat dilihat di apireference Xendit .

Langkah Selanjutnya

Setelah kita mengumpulkan detail kartu, kita dapat mulai membuat tagihan
Ingin menghemat waktu pelanggan Anda? Anda dapat menggunakan fitur *multiple charge kami

Pertanyaan?

Masih memiliki pertanyaan? Dengan senang hati kami akan membantu Anda. Kirimkan email atau pesan melalui live chat .

Last Updated on 2024-11-20

Mengumpulkan detail kartu dengan
Referensi Tokenisasi
Langkah Selanjutnya
Pertanyaan?