Learn how to initiate WeChat Pay payments from a desktop browser.
When initiating a WeChat Pay payment from a desktop browser, the shopper is redirected to a QR code. To verify this payment, they need to scan the QR code from the WeChat app on their phone. When the payment is completed they are redirected back to your payment page and presented with the payment result.
This payment flow is supported by our:
Integrate with Checkout Web SDK
Our Checkout SDK for Web supports the WeChat Pay desktop QR payment flow without any additional integration.
Integrate with API
In this section, we show the integration steps for accepting desktop QR payments using our API integration.
Before you begin this section, make sure you read and understand our API Integration guide.
Step 1: Get QR code data
When a shopper chooses to pay with WeChat Pay:
- Make a
/paymentsAPI call, providing:
reference: Your unique reference for this payment.
paymentMethod.type: Set to wechatpayQR
This returns a
/paymentsresponse containing a:
redirect.data.qrCodeData: WeChat Pay QR code data value.
Step 2: Display QR code
To display a QR code, add the WeChat Pay Component to your payments form:
Create a DOM element, placing it where you want the WeChat Pay QR code to be rendered:
Get the details retrieved from the
Create an instance of the WeChat Pay Component, and mount it, specifying:
paymentData: Pass the
paymentDatavalue you received from the
qrCodeData: Pass the
qrCodeDatavalue you received from the
Make sure you add a Components common configuration.
Create a function to listen to and handle the
onCompleteevent triggered by the Component:
onErrorevent will be called when there was an error during the authorization process.
payloadpassed in the
response. You'll use this to present the payment result to the shopper.
Step 3: Present payment result
/payments/detailsendpoint to verify the result of the payment:
The response will contain a
pspReference, which is our unique identifier for this payment, and a
resultCodeyou received from the
/payments/detailsendpoint to present the payment result to the shopper in your website or app.
You can track the status of the payment using notifications.
WeChat Pay result codes
resultCode you will receive for WeChat Pay is:
- Received: The payment was successfully received. You will receive a notification when the status of the payment has been updated. If successful, you will receive the funds in 2 days.
To find out more about result codes and how you can action them, see Result codes.
WeChat Pay notifications
If you're accepting WeChat Pay payments you will need to set up notifications to know whether a payment is successful. Each WeChat Pay notification has a:
pspReference: identifies which payment is being referred to.
eventCode: indicates the status of the payment.
If you haven't already set up notifications, refer to our notifications documentation for instructions.
You'll know a WeChat Pay payment has been successful when you receive a notification with:
Testing desktop QR payments
Before accepting payments from your shoppers, we recommend testing your setup. There is currently no test platform for WeChat Pay. If you have a personal WeChat account you can test your integration by making live WeChat Pay payments with a low value, or you can cancel the transaction when you are asked to verify the payment.
You can check the status of a WeChat Pay payment in your Customer Area > Transactions > Payments.