---
title: WeChat Pay 内嵌收银台集成
permalink: /notes/zh/paymentMethods/WeChatPay/sdk/
createTime: '2025/08/08 14:45:00'
description: >-
  介绍WeChat
  Pay内嵌收银台集成流程，适用于希望在应用内部直接完成支付的中国地区商户。主要步骤包括请求预下单获取accessToken及集成SDK组件以实现无缝支付体验。
---

## WeChat Pay-内嵌收银台交互流程

```mermaid
%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#E3F2FD',
    'primaryTextColor': '#0D47A1',
    'primaryBorderColor': '#1976D2',
    'lineColor': '#1565C0',
    'secondaryColor': '#BBDEFB',
    'tertiaryColor': '#90CAF9',
    'background': '#F8FBFF',
    'mainBkg': '#E3F2FD',
    'secondBkg': '#BBDEFB',
    'tertiaryBkg': '#90CAF9',
    'actorBkg': '#2196F3',
    'actorBorder': '#1976D2',
    'actorTextColor': '#FFFFFF',
    'actorLineColor': '#1565C0',
    'signalColor': '#0D47A1',
    'signalTextColor': '#0D47A1',
    'c0': '#E8F4FD',
    'c1': '#D1E7DD',
    'c2': '#B3D9FF',
    'c3': '#81C784',
    'noteBkgColor': '#E1F5FE',
    'noteTextColor': '#01579B',
    'noteBorderColor': '#0288D1',
    'loopTextColor': '#0D47A1',
    'activationBkgColor': '#B3E5FC',
    'activationBorderColor': '#0277BD'
  }
}}%%

sequenceDiagram
   participant User as 👤 用户
   participant Frontend as 💻 商户前端
   participant Merchant as 🏪 商户后端
   participant PP as 🔄 PingPong服务端
   participant SDK as 🛠️ PingPong SDK
   participant WeChat as 💬 WeChat Pay

   Note over User, WeChat: 🚀 WeChat Pay内嵌收银台集成流程

   Note over Merchant, Frontend: 📋 准备阶段:• 获取访问令牌• 初始化SDK

   Merchant->>+PP: 1. 获取accessToken
   Note right of PP: 调用收银台预下单接口<br/>生成访问令牌
   PP-->>-Merchant: 2. 返回accessToken

   Merchant->>Frontend: 3. 传递accessToken到前端

   Frontend->>Frontend: 4. 加载PingPong JavaScript SDK
   Note right of Frontend: 引入CDN资源<br/>初始化SDK环境

   Frontend->>+SDK: 5. 初始化收银台组件
   Note right of SDK: 使用accessToken<br/>渲染内嵌收银台UI

   SDK->>+PP: 6. 验证accessToken并获取配置
   PP-->>-SDK: 7. 返回收银台配置信息

   SDK-->>-Frontend: 8. 收银台组件加载完成

   User->>Frontend: 9. 用户选择WeChat Pay支付

   Frontend->>+SDK: 10. 触发支付事件

   alt PC端支付流程
      SDK->>+WeChat: 11. a 请求生成支付二维码
      WeChat-->>-SDK: 12. 返回支付二维码
      SDK-->>Frontend: 13. 展示支付二维码
      Frontend-->>User: 14. 向用户展示二维码
      User->>User: 15. 使用手机扫描二维码
      User->>WeChat: 16. 在手机微信中确认支付
   else 手机端支付流程
      SDK->>+WeChat: 17. b 请求拉起微信App支付
      WeChat-->>-SDK: 18. 返回拉起参数
      SDK-->>Frontend: 19. 传递拉起参数
      Frontend-->>User: 20. 调起微信App
      User->>WeChat: 21. 在微信App中确认支付
   end

   WeChat->>PP: 22. 支付结果通知

   PP->>PP: 23. 处理支付
   Note right of PP: • 验证支付信息<br/>• 风控检查<br/>• 支付路由处理

   alt ✅ 支付成功
      PP-->>SDK: 24. 🎉 支付成功
      SDK->>SDK: 25. 显示成功状态
      SDK-->>Frontend: 26. 支付成功回调
      Frontend-->>User: 27. 展示支付成功信息
      Note over Frontend: 商户自定义逻辑<br/>支付完成处理

      PP->>Merchant: 28. 🔟 异步通知支付结果
      Note right of Merchant: 订单状态更新<br/>业务逻辑处理

   else ❌ 支付失败
      PP-->>SDK: 29. ❌ 支付失败
      SDK->>SDK: 30. 显示错误状态
      SDK-->>Frontend: 31. 支付失败回调
      Frontend-->>User: 32. 展示支付失败信息
      Note right of Frontend: 错误处理<br/>用户提示
   end

   Note over User, WeChat: 🎯 WeChat Pay内嵌收银台流程完成

```

## 集成导航

### Step1 请求<a href="/notes/zh/checkout/api/reserve/" target="_blank">收银台预下单</a>

在API<a href="/notes/zh/checkout/api/reserve/" target="_blank">收银台预下单</a>的响应中，您可以获取`accessToken`

<v4-v2-PaymentMethods-ParamsOptimized paymentMethod="WechatPay" :integrateType="'Hosted'" :scenario="'normal'" />


### Step2 集成SDK组件

接入文档:<a href="/notes/zh/integrate/sdk-v4-preview/" target="_blank">内嵌SDK（预下单）</a>