---
title: WeChat Pay Embedded Checkout Integration
permalink: /en/notes/paymentMethods/WeChatPay/sdk/
createTime: '2025/08/08 14:45:00'
description: >-
  Introduces the integration process for WeChat
  Pay embedded checkout, suitable for merchants in China who wish to complete payments directly within their application. Main steps include requesting pre-order to obtain accessToken and integrating SDK components to achieve seamless payment experience.
---

## WeChat Pay - Embedded Checkout Interaction Flow

```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 👤 User
   participant Frontend as 💻 Merchant Frontend
   participant Merchant as 🏪 Merchant Backend
   participant PP as 🔄 PingPong Server
   participant SDK as 🛠️ PingPong SDK
   participant WeChat as 💬 WeChat Pay

   Note over User, WeChat: 🚀 WeChat Pay Embedded Checkout Integration Process

   Note over Merchant, Frontend: 📋 Preparation Phase:• Obtain access token• Initialize SDK

   Merchant->>+PP: 1. Obtain accessToken
   Note right of PP: Call checkout pre-order interface<br/>Generate access token
   PP-->>-Merchant: 2. Return accessToken

   Merchant->>Frontend: 3. Pass accessToken to frontend

   Frontend->>Frontend: 4. Load PingPong JavaScript SDK
   Note right of Frontend: Import CDN resources<br/>Initialize SDK environment

   Frontend->>+SDK: 5. Initialize checkout component
   Note right of SDK: Use accessToken<br/>Render embedded checkout UI

   SDK->>+PP: 6. Verify accessToken and get configuration
   PP-->>-SDK: 7. Return checkout configuration information

   SDK-->>-Frontend: 8. Checkout component loaded successfully

   User->>Frontend: 9. User selects WeChat Pay payment

   Frontend->>+SDK: 10. Trigger payment event

   alt PC Payment Process
      SDK->>+WeChat: 11. a Request to generate payment QR code
      WeChat-->>-SDK: 12. Return payment QR code
      SDK-->>Frontend: 13. Display payment QR code
      Frontend-->>User: 14. Show QR code to user
      User->>User: 15. Scan QR code with mobile phone
      User->>WeChat: 16. Confirm payment in mobile WeChat
   else Mobile Payment Process
      SDK->>+WeChat: 17. b Request to launch WeChat App payment
      WeChat-->>-SDK: 18. Return launch parameters
      SDK-->>Frontend: 19. Pass launch parameters
      Frontend-->>User: 20. Launch WeChat App
      User->>WeChat: 21. Confirm payment in WeChat App
   end

   WeChat->>PP: 22. Payment result notification

   PP->>PP: 23. Process payment
   Note right of PP: • Verify payment information<br/>• Risk control check<br/>• Payment routing processing

   alt ✅ Payment Success
      PP-->>SDK: 24. 🎉 Payment successful
      SDK->>SDK: 25. Display success status
      SDK-->>Frontend: 26. Payment success callback
      Frontend-->>User: 27. Display payment success information
      Note over Frontend: Merchant custom logic<br/>Payment completion processing

      PP->>Merchant: 28. 🔟 Asynchronous notification of payment result
      Note right of Merchant: Order status update<br/>Business logic processing

   else ❌ Payment Failed
      PP-->>SDK: 29. ❌ Payment failed
      SDK->>SDK: 30. Display error status
      SDK-->>Frontend: 31. Payment failure callback
      Frontend-->>User: 32. Display payment failure information
      Note right of Frontend: Error handling<br/>User notification
   end

   Note over User, WeChat: 🎯 WeChat Pay Embedded Checkout Process Completed

```

## Integration Navigation

### Step1 Request <a href="/en/notes/checkout/api/reserve/" target="_blank">Checkout Pre-order</a>

In the response of API <a href="/en/notes/checkout/api/reserve/" target="_blank">Checkout Pre-order</a>, you can obtain `accessToken`

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


### Step2 Integrate SDK Component

Integration documentation: <a href="/en/notes/integrate/sdk-v4/" target="_blank">Embedded SDK (Pre-order)</a>