Checkout Repeat Purchase (Stored Card + CVV)
About 838 wordsAbout 3 min
2025-05-15
Use Cases
- The shopper already has a stored card on the merchant platform and only needs to enter CVV for a repeat purchase
- Sub-account or delegate scenarios where the user is not the original cardholder and CVV collection is needed for additional security verification
Prerequisites
- Completed the First Payment and Save Card flow
- Enabled Embedded SDK (Pre-order) integration
- If the same
merchantUserIdhas multiple stored cards and you want to show only one of them in the current payment, obtain the target card token from a stored-card record or the Bind List API
Overall Information Flow
Integration Steps
1. Backend: Call the prePay API
When calling the prePay API, add the following field in bizContent:
| Parameter | Type | Required | Description |
|---|---|---|---|
cardToken | String | No | Optional field. Checkout displays stored cards based on merchantUserId. Pass this field only when the same shopper has multiple stored cards and you want to show just one of them in the current payment. If the shopper has only one stored card, do not pass this field |
prePay Request Example (CVV Collection Scenario)
{
"accId": "2018092714313010016291",
"clientId": "2018092714313010016",
"signType": "SHA256",
"version": "1.0",
"bizContent": {
"cardToken": "<optional in multi-card scenarios: target stored-card token>",
"merchantTransactionId": "ORDER_COF_001",
"amount": "100",
"currency": "USD",
"merchantUserId": "user_12345"
}
}2. Frontend: Configure the checkout SDK
cardToken source
In CVV collection scenarios, whether stored cards are displayed in checkout is determined first by merchantUserId. cardToken is only used in multi-card scenarios to limit the display to one specific card. If the shopper has only one stored card, do not pass it. The value passed in this field is the stored-card record token, which can be obtained through the Bind List API.
When initializing the Embedded SDK, use customizeConfig to control the checkout behavior:
Recommended Configuration for CVV Collection
PingPong.Checkout.customizeConfig = {
hideStoredCards: false, // Show the stored card list
onlyDisplaySavedCard: true, // Only display stored cards (hide new card input)
disableCardRemoval: true // Prevent stored cards from being removed
};Configuration effects
- Only stored card information is displayed; new card input is hidden
- Card information (brand, masked card number, expiry date) is read-only
- Stored cards cannot be removed
- Checkout shows only the CVV input field for the shopper to fill in
Note
customizeConfig must be configured after the SDK has loaded and before setting accessToken.
3. Frontend: Complete integration example
Complete CVV Collection Checkout Example
<!DOCTYPE html>
<html>
<head>
<!-- Import SDK (sandbox URL shown here; replace with the production URL when going 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 for CVV collection mode
PingPong.Checkout.customizeConfig = {
hideStoredCards: false,
onlyDisplaySavedCard: true,
disableCardRemoval: true
};
// 2. Optional payment failure callback
PingPong.Checkout.checkoutFailedHook = (code, message) => {
console.error(`Payment failed [${code}]: ${message}`);
};
// 3. Set accessToken after receiving it from the backend
const ppCheckout = document.getElementById('ppCheckout');
ppCheckout.setAttribute('accessToken', '<accessToken_from_prePay_API>');
</script>
</body>
</html>Checkout Display Rules
When cardToken is passed in a CVV collection scenario:
| Area | Display rule |
|---|---|
| Card Number | Displays only the masked number (for example **** **** **** 1234), read-only |
| Expiry Date | Displayed separately, read-only |
| Selection Button | Hidden; no radio button for choosing another stored card |
| CVV Input | Displayed; this is the only editable payment field |
Related Documentation
- First Payment and Save Card - Save card information during the first payment and obtain a reusable payment credential
- Embedded SDK (Pre-order) - SDK initialization and configuration details
- prePay API - Server-side order API