One-click payment dengan CVN

Untuk meningkatkan keberhasilan transaksi, penting untuk menyertakan Card Verification Number (CVN). Meskipun seringkali opsional, memberikan CVN secara signifikan meningkatkan tingkat keberhasilan, terutama untuk kartu-kartu Eropa yang umumnya akan ditolak jika tidak disertakan. Untuk memfasilitasi pembayaran satu-klik yang aman, Anda dapat memungkinkan pengguna akhir untuk menggunakan kembali detail kartu mereka yang tersimpan sambil tetap meminta CVN dan otentikasi untuk setiap transaksi.

Alur one-click payment

Setelah kartu disimpan, Anda dapat menggunakan payment_token_id untuk pembayaran di masa mendatang. Untuk keamanan tambahan, pelanggan Anda mungkin diminta untuk memasukkan kembali CVN mereka selama pembayaran sekali klik, memastikan kepatuhan dan mengurangi risiko penipuan.

Cara Menerapkan

Buat payment session
Bsesi payment session dengan mengirim request POST ke endpoint /sessions. Request ini harus menyertakan card_payment_token_id dari kartu yang disimpan.

Request - POST /session

{
    "reference_id": "YOUR_PAYMENT_REFERENCE_ID",
    "session_type": "PAY",
    "mode": "CARDS_SESSION_JS",
    "amount": 100000,
    "currency": "IDR",
    "country": "ID",
    "customer": {
        "reference_id": "YOUR_CUSTOMER_REFERENCE",
        "type": "INDIVIDUAL",
        "email": "test@yourdomain.com",
        "mobile_number": "+6212345678",
        "individual_detail": {
            "given_names": "Jaap",
            "surname": "Stam"
        }
    },
    "cards_session_js": {
        "card_payment_token_id":"pt-a15a6c28-c65a-4ede-a6cc-10ff3b1d093e",
        "success_return_url": "https://yourcompany.com/success",
        "failure_return_url": "https://yourcompany.com/failure"
    }
}

Tanggapan - POST /sesi

{
    "payment_session_id": "ps-6746c1006b7752b4d91725af",
    "created": "2024-11-27T06:49:36.535Z",
    "updated": "2024-11-27T06:49:36.535Z",
    "status": "ACTIVE",
    "reference_id": "YOUR_PAYMENT_REFERENCE_ID",
    "currency": "IDR",
    "amount": 10000,
    "country": "ID",
    "customer_id": "XENDIT_GENERATED_CUSTOMER_ID",
    "expires_at": "2024-11-27T07:19:36.434Z",
    "session_type": "PAY",
    "mode": "CARDS_SESSION_JS",
    "locale": "en",
    "business_id": "YOUR_BUSINESS_ID", 
    "cards_session_js": {
        "card_payment_token_id":"pt-a15a6c28-c65a-4ede-a6cc-10ff3b1d093e",
        "success_return_url": "https://yourcompany.com/success",
        "failure_return_url": "https://yourcompany.com/failure"
    }
}

Kumpulkan CVN

Terapkan card_session.js di elemen header halaman pembayaran Anda

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

Kemudian, kumpulkan informasi CVN

<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="cvn">CVN</label>
                <input type="text" id="cvn" name="cvn" placeholder="123" />
            </div>
        </form>
    </div>
    <script type="text/javascript">

    </script>
</body>

Request - untuk card_session_js

{
    "cvn": "123",
    "payment_session_id": "YOUR_PAYMENT_SESSION_ID"
}

Response - dari card_session_js

{ 
    "message": "Status updated. Wait for a callback or get the status using the Get API.", 
    "payment_request_id": "PAYMENT_REQUEST_ID", 
    "action_url": "AUTHENTICATION_PAGE_URL" 
}

Penting: Simpan payment_request_id . Anda akan memerlukannya untuk mengambil status transaksi dan akan disertakan dalam webhook pembayaran untuk pembaruan status.

3. Alihkan ke halaman autentikasi

Alihkan pembeli ke halaman autentikasi yang disediakan oleh action_url objek respons dari pembeli. Di sinilah pemegang kartu menyelesaikan otentikasi 3D Secure.

4. Pembeli menyelesaikan autentikasi

Setelah berhasil mengautentikasi, pembeli akan diarahkan ke success_return_url . Jika otentikasi gagal, autentikasi akan dialihkan ke cancel_return_url.

5. Terima webhook

Xendit akan mengirimkan webhook pembayaran ke titik akhir webhook Anda yang dikonfigurasi, menunjukkan status akhir transaksi. Anda dapat mencocokkan webhook ini dengan yang payment_request_id Anda simpan sebelumnya.

Contoh webhook payment.capture

{
    "created": "2024-12-18T05:46:35.109Z",
    "business_id": "62440e322008e87fb29c1fd0",
    "event": "payment.capture",
    "data": {
        "type": "PAY",
        "status": "SUCCEEDED",
        "country": "ID",
        "created": "2024-12-18T05:46:08.192Z",
        "updated": "2024-12-18T05:46:30.627Z",
        "captures": [
            {
                "capture_id": "cptr-08f17fa3-e80c-4d8e-8c34-17aa3400bc1c",
                "capture_amount": 10000,
                "capture_timestamp": "2024-12-18T05:46:34.234Z"
            }
        ],
        "currency": "IDR",
        "payment_id": "py-3f57d678-2448-4c9f-a433-8468d366fb5c",
        "business_id": "62440e322008e87fb29c1fd0",
        "customer_id": "cust-7de9a9b4-37e8-40ad-b665-d97f42e538c5",
        "channel_code": "CARDS",
        "reference_id": "97ba0a32-b996-4abf-8a7b-6184a6644676_b8d18f2f-3",
        "capture_method": "AUTOMATIC",
        "request_amount": 10000,
        "payment_details": {
            "authorization_data": {
                "reconciliation_id": "7345007929096981703954",
                "authorization_code": "831000",
                "acquirer_merchant_id": "xendit_ctv_agg",
                "network_response_code": "00",
                "network_transaction_id": "016153570198200",
                "cvn_verification_result": "M",
                "retrieval_reference_number": "435205253972",
                "address_verification_result": "M",
                "network_response_code_descriptor": "Approved and completed sucessfully"
            },
            "authentication_data": {
                "flow": "CHALLENGE",
                "a_res": {
                    "eci": "05",
                    "message_version": "2.1.0",
                    "authentication_value": "AAIBBYNoEwAAACcKhAJkdQAAAAA=","directory_server_trans_id": "e537f539-d59f-4ebe-8d56-7fdc31a8e9b4"
                }
            }
        },
        "payment_request_id": "pr-5593127f-8c7b-4d2f-b487-c785ffc21e2f"
    },
    "api_version": "v3"
}

Kami sarankan untuk menyimpan payment_id dan payment_details dari webhook, yang berkorelasi dengan payment_request_id, sebagai bukti pembayaran.

Contoh implementasi

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

🔗 card_session.js example to collect CVN