---
title: 概览
permalink: /notes/zh/integrate/hosted/
createTime: '2025/03/07 16:01:51'
description: '帮助开发者在 PingPong 收银台和 API Only 间选择方案，概览内嵌、OnePage、Element、Native、跳转和 S2S 接入。'
---

## 先看两大接入方向

| 方向 | 包含方案 | 适合场景 | 关键特点 |
| --- | --- | --- | --- |
| PingPong 收银台 | 内嵌SDK、OnePage Checkout、Element SDK、Native SDK、跳转收银台 | 希望更快接入、减少支付页和支付交互自建成本 | 由 PingPong 提供收银台能力，接入速度更快 |
| API Only | 国际信用卡、本地支付 | 需要自建支付流程、自主管理支付页与交互 | 灵活度更高，但接入复杂度和自管责任也更高 |

## PingPong 收银台

### 方案一览

| 方案 | 适合什么场景 | 说明 | 入口 |
| --- | --- | --- | --- |
| 内嵌SDK | 需要站内收银台，希望买家留在商户页面完成支付 | 商户服务端先预下单，前端再通过 JavaScript-SDK 在页面内拉起收银台 | [内嵌SDK](/notes/zh/integrate/sdk-v4-preview/) |
| OnePage Checkout | 已有一页式结账页，需要让地址、配送、支付在同一页联动 | 先获取 `sdkAccessToken` 初始化组件，支付前再由商户后端创建订单并返回支付 token | [OnePage Checkout](/notes/zh/integrate/sdk-v4-2/) |
| Element SDK | 需要更细粒度的组件化接入能力，按支付方式或业务场景组合页面 | 提供更灵活的支付组件、事件模型与扩展能力，当前仅支持 Apple Pay、Google Pay、PayPal | [Element SDK](/notes/zh/integrate/sdk-elements/) |
| Native SDK | 移动 App 内支付，需要原生半屏收银台体验 | 适用于 iOS / Android 原生应用，前端体验更贴近 App | [Native SDK](/notes/zh/integrate/sdk-v4-preview/?platform=ios) |
| 跳转收银台 | 希望最快上线，接受买家跳转到 PingPong 托管页完成支付 | 商户后端创建支付会话后，前端直接跳转到托管收银台页面 | [跳转收银台](/notes/zh/integrate/link/) |

### 共通接入链路

1. 商户服务端调用支付相关接口创建支付会话或获取初始化凭证。
2. 商户前端按所选方案拉起 PingPong 收银台或组件。
3. 买家完成支付后，商户通过同步返回、异步通知和查询接口确认结果。
4. 如需退款、撤销、Capture 等后置能力，再接入对应的交易管理接口。

### 支持特性

| 特性 | 是否支持 | 说明 |
| --- | --- | --- |
| [下单支付（即时扣款）](/notes/zh/checkout/api/reserve/) | 支持 | 通过收银台预下单创建支付会话，由买家在收银台完成支付。 |
| [预授权（先冻结后确认）](/notes/zh/checkout/api/reserve/) | 支持 | 适用于先授权、后续再请款的卡支付场景。 |
| 部分请款 | 暂不支持 | 收银台预授权后不支持部分请款。 |
| [退款与部分退款](/notes/zh/checkout/api/modifications/refund/) | 支持 | 支付成功后可按交易管理接口发起退款。 |
| [记住卡号](/notes/zh/integrate/tokenization/cardOnFileOverview/) | 支持 | 买家在收银台保存卡后，后续可复用已保存卡信息。 |
| 重新支付 | 支持 | 支付未成功时，可在支付会话有效期内再次拉起同一收银台 URL。 |
| [3DS](/notes/zh/risk/3ds/) | 自动集成 | 无需商户额外对接，收银台会按交易需要引导买家完成认证。 |

::: tip 术语说明
`下单支付（Debit）` 表示发起支付/下单交易能力，这里的 `Debit` 不是“借记卡卡种”含义。
:::

## API Only

### 方案一览

| 方案 | 适合什么场景 | 说明 | 入口 |
| --- | --- | --- | --- |
| 国际信用卡 | 商户有更高自定义需求，并能自行处理国际卡支付表单、风控和认证链路 | 适用于希望自建卡支付体验的团队，通常要求更高的合规与前后端接入能力 | [国际信用卡](/notes/zh/integrate/non-hosted-card/) |
| 本地支付 | 商户希望通过 API 驱动方式接入各类 APM，并在自有流程中控制展示与跳转 | 由商户管理支付发起链路，再根据不同支付方式处理二维码、跳转链接或授权动作 | [本地支付](/notes/zh/integrate/non-hosted-apm/) |

## 怎么选更合适

- 想尽快上线，并尽量少处理支付页交互：优先选 **跳转收银台**。
- 希望保留站内体验，但不想自建整套支付页：优先选 **内嵌SDK** 或 **OnePage Checkout**。
- 希望以组件方式更灵活地控制页面结构和事件：优先选 **Element SDK**。
- 主要在移动 App 中完成支付：优先选 **Native SDK**。
- 已具备较强支付研发能力，需要自建支付体验：再考虑 **API Only**。
- 如果是国际信用卡 API Only，通常还需要额外关注卡信息处理、认证流程与合规责任；如果是本地支付 API Only，则更多关注不同支付方式的 `action` 差异与回调处理。

## 收银台常用增强能力

### 重新支付

收银台若未支付成功，可在支付会话未过期时再次拉起同一收银台 URL 发起支付；一个收银台 URL 有效时长为 7 天。

### 保存卡 / 记住卡号

收银台页面如果用户勾选保存卡号，下次支付时可直接展示已保存的卡信息；如果有多张卡，也可展示卡列表，帮助买家更快完成结账。

如需使用保存卡/记住卡号能力，首笔预下单时需传 `merchantUserId`；如需将首笔交易按 `CardOnFile` 交易模式处理，则再额外传 `bizType=CardOnFile`。更多说明可参考[接入概览与方案选择](/notes/zh/integrate/tokenization/cardOnFileOverview/)。

## 内嵌SDK补充说明

1. 基于 Web Component 技术和 ES2021 标准，由浏览器原生支持的，优势明显
2. 更加轻量，快速响应
3. 对接方式简单，灵活接入，符合现代化收银台 web app 标准
4. 现代主流浏览器中高版本均兼容
5. 支持自定义 SDK 收银台皮肤
6. 支持发起支付请求前设置钩子函数

### 浏览器 / App WebView 最低版本要求

| 运行环境 | 内核 | 最低版本 | 说明 |
| --- | --- | --- | --- |
| Chrome | Chromium | 87+ | 桌面浏览器最低版本要求。 |
| Edge | Chromium | 88+ | 基于 Chromium 内核的 Edge 版本。 |
| Firefox | Gecko | 79+ | 适用于 Firefox 桌面端高版本环境。 |
| Safari | WebKit | 14.1+ | 适用于 Safari 桌面端环境。 |
| Android App WebView | Chromium | 87+ | 建议使用 Android System WebView 或 Chrome WebView。 |
| iOS App WKWebView | WebKit | iOS 14.5+ | 建议使用 WKWebView，版本随 iOS Safari / WebKit 升级。 |

Android App 内建议使用可更新的 Android System WebView / Chrome WebView；iOS App 内建议使用 WKWebView，避免低版本或定制内核导致收银台渲染异常。

## 效果展示

![记住卡号-1](/v4/checkout/rememberCard1.png)

![记住卡号-2](/v4/checkout/rememberCard2.png)