Repeat Purchase CVV Collection Checkout
About 610 wordsAbout 2 min
2025-05-15
Use Cases
- Users with stored cards making repeat purchases, only needing to enter CVV
- Sub-account / delegate scenarios: non-cardholder using a stored card, requiring CVV for security verification
Prerequisites
- Completed the CardOnFile first-time binding flow and obtained a card token
- Enabled Embedded SDK (Pre-order) integration mode
Information Flow
Integration Steps
1. Backend: Call prePay API
When calling the prePay API, add the following field to bizContent:
| Parameter | Type | Required | Description |
|---|---|---|---|
cardToken | String | No | The stored card token. When provided, the checkout will display the card information (brand, masked card number, expiry date) associated with this token, and the fields will be read-only |
prePay Request Example (CVV Collection Scenario)
{
"accId": "2018092714313010016291",
"clientId": "2018092714313010016",
"signType": "SHA256",
"version": "1.0",
"bizContent": {
"cardToken": "<stored_card_token>",
"merchantTransactionId": "ORDER_COF_001",
"amount": "100",
"currency": "USD",
"merchantUserId": "user_12345"
}
}2. Frontend: Configure Checkout SDK
When initializing the Embedded SDK, use customizeConfig to control checkout behavior:
Recommended Configuration for CVV Collection
PingPong.Checkout.customizeConfig = {
hideStoredCards: false, // Show stored card list
onlyDisplaySavedCard: true, // Only show stored card (hide new card input)
disableCardRemoval: true // Prevent removal of stored card
};Configuration Effects
- Only displays stored card information, no new card input
- Card information (brand, masked card number, expiry date) is read-only
- Stored card cannot be removed
- Checkout only shows CVV input field for user to fill in
Note
customizeConfig must be configured after the SDK has loaded and before setting accessToken.
3. Frontend: Complete Integration Example
CVV Collection Checkout Complete Example
<!DOCTYPE html>
<html>
<head>
<!-- Import SDK (sandbox environment shown, replace with production URL for live) -->
<script type="module" src="https://payssr-cdn.pingpongx.com/production-fra/acquirer-checkout-web/sandbox/pp-checkout.js"></script>
</head>
<body>
<pp-checkout id="ppCheckout" locale="en"></pp-checkout>
<script>
// 1. Configure checkout: CVV collection mode
PingPong.Checkout.customizeConfig = {
hideStoredCards: false,
onlyDisplaySavedCard: true,
disableCardRemoval: true
};
// 2. Payment failure callback (optional)
PingPong.Checkout.checkoutFailedHook = (code, message) => {
console.error(`Payment failed [${code}]: ${message}`);
};
// 3. Set accessToken after retrieving from backend
const ppCheckout = document.getElementById('ppCheckout');
ppCheckout.setAttribute('accessToken', '<accessToken_from_prePay_API>');
</script>
</body>
</html>Checkout Display Rules
When cardToken is provided for CVV collection:
| Area | Display Rule |
|---|---|
| Card Number | Only displays masked number (e.g. **** **** **** 1234), read-only |
| Expiry Date | Displayed separately, read-only |
| Selection Button | Hidden — no card selection radio button |
| CVV Input | Displayed — the only editable payment field |
Related Documentation
- CardOnFile First-time Binding — Create card token and basic binding flow
- Embedded SDK (Pre-order) — SDK initialization and configuration details
- prePay API — Server-side order API