Collecting card information

To securely collect and tokenize card details, you must first create a payment session. Here’s how you can implement cards-session.js on your checkout page for safe card information collection.

Implement card_session.js
Include the cards-session.min.js script in the <head> section of your payment page. This library facilitates the secure collection of card details.

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

Add card detail input fields
Create a form on your frontend application with the necessary input fields for collecting card details. These fields are crucial for creating the card token.

<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>

Input Field Reference

The following table details the required input fields for creating your frontend form when using card_session.js:

Input Field	Type	Description
`card_number`	Text	Input field for the end user’s card number.
`cardholder_first-name`	Text	Input field for the cardholder’s first name.
`cardholder_last-name`	Text	Input field for the cardholder’s last name.
`cardholder_email`	Text	Input field for the cardholder’s email address.
`cardholder_phone-number`	Text	Input field for the cardholder’s phone number.
`expiry_month`	Number (2)	Input field for the cards expiration month
`expiry_year`	Number (4)	Input field for the card’s expiration year.
`cvn`	Text	Input field for the card’s CVN security code.
`save_card_payment_token`	Boolean	Allow end users to save their card details for future payments. Set the value to `true` if the user opts in. If this value is `true`, a `payment_token.activation` webhook will be sent when the payment is successfully processed. Commonly used for Pay and Save flow

Gather and tokenize card data

After the user has entered their card details, gather the input values and prepare them for tokenization. These fields will be used when charging the card, and will be required for one of the transaction flows.

 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
};

When all the data fields are gathered, the card can now be tokenized.

Xendit.payment.collectCardData(cardData, responseHandler);

Example implementation

You can view an example implementation of using card_session.js on your frontend to collect card details here:

🔗 card_session.js example

Collecting card information

Implement card_session.js

Add card detail input fields

Input Field Reference

Gather and tokenize card data

Example implementation