收银台复购（已保存卡 + CVV）
约 1195 字大约 4 分钟
2025-05-15
适用场景
- 用户在商户平台已有绑定的卡，复购时仅需输入 CVV
- 子账号/代练场景：非持卡人本人使用已绑卡支付，需额外收集 CVV 进行安全校验
前提条件
- 已完成 首次支付并保存卡 流程
- 已开通 内嵌 SDK（预下单） 接入模式
- 如同一
merchantUserId下绑定了多张卡，且仅希望本次展示其中一张，再通过已保存卡记录或 绑卡查询接口 获取目标卡的 token 值
整体信息流
接入步骤
1. 后端：调用 prePay 接口
在调用 prePay（预下单）接口 时，bizContent 中新增以下字段：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
cardToken | String | 否 | 可选字段。收银台已保存卡展示基于 merchantUserId；仅当同一用户下有多张卡，且本次只希望展示其中一张时，才传该卡对应的已保存卡记录 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
cardToken 来源说明
在 CVV 收集场景中，收银台是否展示已保存卡，首先取决于 merchantUserId。cardToken 仅用于多卡场景下限制只展示其中一张卡；若该用户仅绑定一张卡，则无需上传。该字段传入的是已保存卡记录的 token 值，可通过绑卡查询接口获取。
在初始化 内嵌 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 输入框 | 展示，为唯一可编辑的支付要素 |
相关文档
- 首次支付并保存卡 — 首次支付并保存卡信息，获取后续可复用凭证
- 内嵌 SDK（预下单） — SDK 初始化与配置详解
- prePay（预下单）接口 — 服务端下单接口