Mengumpulkan informasi kartu

Untuk mengumpulkan dan mentokenisasi detail kartu dengan aman, Anda harus membuat Payment Session terlebih dahulu. Berikut cara Anda dapat menerapkan cards-session.js di halaman checkout untuk pengumpulan informasi kartu yang aman.

Terapkan card_session.js
Sertakan script cards-session.min.js di bagian <head> halaman pembayaran Anda. Library ini memfasilitasi pengumpulan detail kartu yang aman.

<head>
     <script type="text/javascript" src="https://js.xendit.co/cards-session.min.js">
</head>

Tambah kolom input detail kartu
Buat formulir di aplikasi frontend Anda dengan kolom input yang diperlukan untuk mengumpulkan detail kartu. Kolom ini sangat penting untuk membuat token kartu.

<head>
    <script type="text/javascript" src="https://js.xendit.co/cards-session.min.js">
</head>

<body>
    <div class="credit-card-form">
        <form id="credit-card-form">
            <div class="form-group">
                <label for="card_number">Card Number</label>
                <input type="text" id="card_number" name="card-number" placeholder="1234 5678 9012 3456" required />
            </div>

            <div class="form-group">
                <label for="cardholder_first-name">Cardholder First Name</label>
                <input type="text" id="cardholder_first-name" name="cardholder-first-name" placeholder="John" required />
            </div>

            <div class="form-group">
                <label for="cardholder_last-name">Cardholder Last Name</label>
                <input type="text" id="cardholder_last-name" name="cardholder-last-name" placeholder="Doe" required />
            </div>

            <div class="form-group">
                <label for="cardholder_email">Cardholder Email</label>
                <input type="text" id="cardholder_email" name="cardholder-email" placeholder="john@mail.co" />
            </div>

            <div class="form-group">
                <label for="cardholder_phone-number">Cardholder Phone Number</label>
                <input type="text" id="cardholder_phone-number" name="cardholder-phone-number" placeholder="+62123123123" />
            </div>

            <div class="form-group">
                <label for="expiration-date">Expiration Date</label>
                <input type="month" id="expiration_date" name="expiration-date" required />
            </div>

            <div class="form-group">
                <label for="cvn">CVN</label>
                <input type="text" id="cvn" name="cvn" placeholder="123" />
            </div>

            <div class="form-group">
                <label for="save-card-payment-token">Save Card Payment Token</label>
                <input type="checkbox" id="save-card-payment-token" name="save-card-payment-token" />
            </div>

            <div class="form-group">
                <button type="submit" id="submit-button">Submit</button>
            </div>
        </form>
    </div>
    <script type="text/javascript">

    </script>
</body>

Referensi kolom kartu

Tabel berikut menjelaskan detail kolom input yang diperlukan untuk membuat formulir frontend Anda saat menggunakan card_session.js:

Kolom input	Jenis	Deskripsi
`card_number`	Teks	Bidang input untuk nomor kartu pengguna akhir.
`cardholder_first-name`	Teks	Kolom input untuk nama depan pemegang kartu.
`cardholder_last-name`	Teks	Kolom input untuk nama belakang pemegang kartu.
`cardholder_email`	Teks	Kolom input untuk alamat email pemegang kartu.
`cardholder_phone-number`	Teks	Kolom input untuk nomor telepon pemegang kartu.
`expiry_month`	Nomor (2)	Kolom input untuk bulan kedaluwarsa kartu
`expiry_year`	Nomor (4)	Kolom input untuk tahun kedaluwarsa kartu.
`cvn`	Teks	Bidang input untuk kode keamanan CVN kartu.
`save_card_payment_token`	Boolean	Izinkan pengguna akhir menyimpan detail kartu mereka untuk pembayaran di masa mendatang. Atur nilai ke `true` jika pengguna ikut serta. Jika nilai ini adalah `true`, `payment_token.activation` webhook akan dikirim ketika pembayaran berhasil diproses. Biasa digunakan untuk Pay and Save flow

Kumpul dan tokenisasi data kartu

Setelah pengguna memasukkan detail kartu mereka, kumpulkan nilai input dan siapkan untuk tokenisasi. Kolom ini akan digunakan saat menagih kartu, dan akan diperlukan untuk salah satu alur transaksi.

 const cardData = {
      card_number: document.getElementById('card_number').value.replace(/\s/g, ''),
      expiry_month: document.getElementById('expiry_month').value,
      expiry_year: document.getElementById('expiry_year').value,
      cvn: document.getElementById('cvn').value,
      cardholder_first_name: document.getElementById('cardholder_first-name').value,
      cardholder_last_name: document.getElementById('cardholder_last-name').value,
      cardholder_email: document.getElementById('cardholder_email').value,
      cardholder_phone_number: document.getElementById('cardholder_phone-number').value,
      payment_session_id: // The ID gathered in the first step of the process
};

Setelah semua kolom data dikumpulkan, kartu dapat ditokenisasi.

Xendit.payment.collectCardData(cardData, responseHandler);

Contoh implementasi

Anda dapat melihat contoh penerapan penggunaan card_session.js di frontend Anda untuk mengumpulkan detail kartu di sini:

🔗 card_session.js example