---
title: WeChat Pay Hosted Checkout Integration
permalink: /en/notes/paymentMethods/WeChatPay/hosted/
createTime: '2025/08/08 14:30:00'
description: >-
  Introduction to WeChat
  Pay hosted checkout integration method, applicable to Mainland China region. Obtain payment link through API pre-order to complete payment by redirecting users to WeChat Pay page. Supports re-initiating payment for orders not paid within 48 hours.
---

## WeChat Pay - Hosted 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 Hosted as 🌐 PingPong Checkout
participant WeChat as 💬 WeChat Pay

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

    Note over Merchant, Frontend: 📋 Preparation Phase: • Get checkout link

    Merchant->>+PP: 1. Call hosted checkout pre-order API
    Note right of PP: Generate payment link (paymentUrl)
    PP-->>-Merchant: 2. Return paymentUrl

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

    User->>Frontend: 4. Click pay button
    Frontend->>+Hosted: 5. Directly redirect to PingPong checkout
    Note right of Frontend: Use paymentUrl for direct redirect

    Hosted->>Hosted: 6. Initialize checkout interface
    Note right of Hosted: • Display available payment methods list

    Hosted-->>-Frontend: 7. Checkout loading completed

    User->>Hosted: 8. Select WeChat Pay

    alt PC Payment Process
        Hosted->>+WeChat: 9. a Generate WeChat Pay QR code
        WeChat-->>-Hosted: 10. Return payment QR code
        Hosted-->>User: 11. Display payment QR code
        User->>User: 12. Scan QR code with mobile phone
        User->>WeChat: 13. Confirm payment in mobile WeChat
    else Mobile Payment Process
        Hosted->>+WeChat: 14. b Request to launch WeChat App payment
        WeChat-->>-Hosted: 15. Return launch parameters
        Hosted-->>User: 16. Launch WeChat App
        User->>WeChat: 17. Confirm payment in WeChat App
    end
    
    WeChat->>PP: 18. Payment result notification
    
    PP->>PP: 19. Process payment

    alt ✅ Payment Success
        PP-->>Hosted: 20. 🎉 Payment success
        Hosted->>Hosted: 21. Display success page
        Hosted-->>Frontend: 22. Page callback (payResultUrl)
        Frontend-->>User: 23. Display payment success page
    else ❌ Payment Failed
        PP-->>Hosted: 24. ❌ Payment failed
        Hosted->>Hosted: 25. Display error page
        Hosted-->>Frontend: 26. Error callback
        Frontend-->>User: 27. Display payment failure information
    end

    PP-->>Merchant: 28. Asynchronous payment result notification
    Note right of Merchant: Receive and process<br/>payment result notification

    Note over User, WeChat: 🎯 WeChat Pay hosted 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 get `paymentUrl` for redirecting to checkout

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

### Step2 Render Checkout

Use the `paymentUrl` obtained in Step1 to redirect to checkout, integration documentation: <a href="/en/notes/services/checkout/hosted/hosted/" target="_blank">Redirect Checkout</a> 

## Repayment

If the checkout is not successfully paid, you can manually open the URL again to initiate payment. A checkout URL is valid for 48 hours.