---
url: >-
https://acquirer-api-docs-v4-en.pingpongx.com/notes/zh/integrate/tokenization/cardOnFileCVV/index.md
description: 说明如何在收银台展示已保存卡并收集 CVV 完成复购，适用于需要持卡人再次确认的场景。
---
## 适用场景
- 用户在商户平台已有绑定的卡，复购时仅需输入 CVV
- 子账号/代练场景：非持卡人本人使用已绑卡支付，需额外收集 CVV 进行安全校验
## 前提条件
- 已完成 [首次支付并保存卡](/notes/zh/integrate/tokenization/cardOnFile/) 流程
- 已开通 [内嵌 SDK（预下单）](/notes/zh/integrate/sdk-v4-preview/) 接入模式
- 如同一 `merchantUserId` 下绑定了多张卡，且仅希望本次展示其中一张，再通过已保存卡记录或 [绑卡查询接口](/notes/zh/tokenization/cof/bindList/) 获取目标卡的 token 值
## 整体信息流
```mermaid
sequenceDiagram
actor User as 👤 用户
participant Frontend as 💻 商户前端
participant Backend as 🏪 商户后端
participant PP as 🔄 PingPongCheckout
Note over User, PP: 🚀 首笔：首次支付并保存卡
Frontend->>+Backend: 1. 提交首笔订单（merchantUserId，若按 CardOnFile 交易模式处理则额外传 bizType=CardOnFile）
Backend->>+PP: 2. 请求下单接口
PP-->>-Backend: 3. 返回支付结果并保存卡信息
Backend-->>-Frontend: 4. 返回支付结果
Note over User, PP: 🔄 复购：CVV 收集收银台
User->>Frontend: 5. 发起复购
Frontend->>+Backend: 6. 提交复购订单（merchantUserId；如需指定单张卡再额外传 cardToken）
Backend->>+PP: 7. 调用 prePay 接口（基于 merchantUserId 获取已保存卡；如传 cardToken 则仅展示对应卡）
PP-->>-Backend: 8. 返回 accessToken
Backend-->>-Frontend: 9. 返回 accessToken
Frontend->>Frontend: 10. 渲染收银台（仅展示卡信息 + CVV 输入框）
User->>Frontend: 11. 输入 CVV 并确认支付
Frontend->>+PP: 12. 提交支付（含 CVV）
PP-->>-Frontend: 13. 返回支付结果
PP->>Backend: 14. 📡 异步通知最终结果
Backend-->>PP: 15. 🟢 HTTP 200
```
## 接入步骤
### 1. 后端：调用 prePay 接口
在调用 [prePay（预下单）接口](/notes/zh/checkout/api/reserve/) 时，`bizContent` 中新增以下字段：
| 参数 | 类型 | 必填 | 说明 |
|:-----|:-----|:-----|:-----|
| `cardToken` | String | 否 | 可选字段。收银台已保存卡展示基于 `merchantUserId`；仅当同一用户下有多张卡，且本次只希望展示其中一张时，才传该卡对应的已保存卡记录 token 值。若该用户仅绑定一张卡，则无需传此字段 |
```json title="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
::: note cardToken 来源说明
在 CVV 收集场景中，收银台是否展示已保存卡，首先取决于 `merchantUserId`。`cardToken` 仅用于多卡场景下限制只展示其中一张卡；若该用户仅绑定一张卡，则无需上传。该字段传入的是已保存卡记录的 token 值，可通过[绑卡查询接口](/notes/zh/tokenization/cof/bindList/)获取。
:::
在初始化 [内嵌 SDK](/notes/zh/integrate/sdk-v4-preview/) 时，通过 `customizeConfig` 控制收银台行为：
```js title="CVV 收集场景推荐配置"
PingPong.Checkout.customizeConfig = {
hideStoredCards: false, // 显示已保存的卡列表
onlyDisplaySavedCard: true, // 仅展示已绑定的卡（隐藏新卡输入）
disableCardRemoval: true // 禁止删除已绑定的卡
};
```
::: note 配置效果
- 仅展示已绑定的卡信息，不可输入新卡
- 卡信息（品牌、脱敏卡号、有效期）只读不可编辑
- 不允许删除已绑定的卡
- 收银台仅显示 CVV 输入框供用户填写
:::
::: warning 注意
`customizeConfig` 需在 SDK 加载完成后、设置 `accessToken` 之前配置。
:::
### 3. 前端：完整接入示例
```html title="CVV 收集收银台完整示例"
```
## 收银台展示规则
在传入 `cardToken` 且收集 CVV 的场景下：
| 区域 | 展示规则 |
|:-----|:---------|
| 卡号 | 仅展示脱敏卡号（如 `**** **** **** 1234`），只读 |
| 有效期 | 单独展示，只读不可编辑 |
| 选择按钮 | 隐藏选择已绑定卡的圆圈按钮 |
| CVV 输入框 | 展示，为唯一可编辑的支付要素 |
## 相关文档
- [首次支付并保存卡](/notes/zh/integrate/tokenization/cardOnFile/) — 首次支付并保存卡信息，获取后续可复用凭证
- [内嵌 SDK（预下单）](/notes/zh/integrate/sdk-v4-preview/) — SDK 初始化与配置详解
- [prePay（预下单）接口](/notes/zh/checkout/api/reserve/) — 服务端下单接口