复购 CVV 收集收银台
约 931 字大约 3 分钟
2025-05-15
适用场景
- 用户在商户平台已有绑定的卡，复购时仅需输入 CVV
- 子账号/代练场景：非持卡人本人使用已绑卡支付，需额外收集 CVV 进行安全校验
前提条件
- 已完成 CardOnFile 首笔绑卡 流程，获取到 card token
- 已开通 内嵌 SDK（预下单） 接入模式
整体信息流
接入步骤
1. 后端：调用 prePay 接口
在调用 prePay（预下单）接口 时，bizContent 中新增以下字段：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
cardToken | String | 否 | 已绑定的卡 token。上传后收银台将展示该 token 对应的卡信息（品牌、脱敏卡号、有效期），且不可编辑 |
prePay 请求示例（CVV 收集场景）
{
"accId": "2018092714313010016291",
"clientId": "2018092714313010016",
"signType": "SHA256",
"version": "1.0",
"bizContent": {
"cardToken": "<已绑定的卡token>",
"merchantTransactionId": "ORDER_COF_001",
"amount": "100",
"currency": "USD",
"merchantUserId": "user_12345"
}
}2. 前端：配置收银台 SDK
在初始化 内嵌 SDK 时，通过 customizeConfig 控制收银台行为：
CVV 收集场景推荐配置
PingPong.Checkout.customizeConfig = {
hideStoredCards: false, // 显示已保存的卡列表
onlyDisplaySavedCard: true, // 仅展示已绑定的卡（隐藏新卡输入）
disableCardRemoval: true // 禁止删除已绑定的卡
};配置效果
- 仅展示已绑定的卡信息，不可输入新卡
- 卡信息（品牌、脱敏卡号、有效期）只读不可编辑
- 不允许删除已绑定的卡
- 收银台仅显示 CVV 输入框供用户填写
注意
customizeConfig 需在 SDK 加载完成后、设置 accessToken 之前配置。
3. 前端：完整接入示例
CVV 收集收银台完整示例
<!DOCTYPE html>
<html>
<head>
<!-- 引入 SDK（此处为沙箱环境，生产环境请替换为对应地址） -->
<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. 配置收银台：CVV 收集模式
PingPong.Checkout.customizeConfig = {
hideStoredCards: false,
onlyDisplaySavedCard: true,
disableCardRemoval: true
};
// 2. 支付失败回调（可选）
PingPong.Checkout.checkoutFailedHook = (code, message) => {
console.error(`支付失败 [${code}]: ${message}`);
};
// 3. 从后端获取 accessToken 后设置
const ppCheckout = document.getElementById('ppCheckout');
ppCheckout.setAttribute('accessToken', '<从预下单接口获取的accessToken>');
</script>
</body>
</html>收银台展示规则
在传入 cardToken 且收集 CVV 的场景下：
| 区域 | 展示规则 |
|---|---|
| 卡号 | 仅展示脱敏卡号（如 **** **** **** 1234），只读 |
| 有效期 | 单独展示，只读不可编辑 |
| 选择按钮 | 隐藏选择已绑定卡的圆圈按钮 |
| CVV 输入框 | 展示，为唯一可编辑的支付要素 |
相关文档
- CardOnFile 首笔绑卡 — 创建 card token 及基础绑卡流程
- 内嵌 SDK（预下单） — SDK 初始化与配置详解
- prePay（预下单）接口 — 服务端下单接口