WeChat Pay desktop QR payments

Learn how to initiate WeChat Pay payments from a desktop browser.

Payment Type
Payment flow
Recurring
Refunds
Partial Refunds
Captures
Partial Captures
Chargebacks
Wallet

Redirect

No Yes Yes No No No

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 /payments API call, providing:
    • reference: Your unique reference for this payment.

    • amount
    • paymentMethod.type: Set to wechatpayQR
    {
      "merchantAccount":"YourMerchantAccount",
      "reference":"wechat pay desktop test",
      "amount":{
        "currency":"CNY",
        "value":"1000"
      },
      "paymentMethod":{
        "type":"wechatpayQR"
      }
    }

    This returns a /payments response containing a:

    • resultCode of PresentToShopper
    • redirect.data.qrCodeData: WeChat Pay QR code data value.

    {
      "resultCode":"PresentToShopper",
      "details":[
        {
          "key":"payload",
          "type":"text"
        }
      ],
      "paymentData":"Ab02b4c0...",
      "redirect":{
        "data":{
          "qrCodeData":"weixin://wxpay/bizpayurl?pr=marc..."
        }
      }
    }

Step 2: Display QR code

To display a QR code, add the WeChat Pay Component to your payments form:

  1. Create a DOM element, placing it where you want the WeChat Pay QR code to be rendered:

    <div id=”wechat”></div>
  2. Get the details retrieved from the /payments endpoint.

  3. Create an instance of the WeChat Pay Component, and mount it, specifying:

    • paymentData: Pass the paymentData value you received from the /payments response.
    • amount
    • qrCodeData: Pass the qrCodeData value you received from the /payments response.
    const wechat = checkout.create("wechatpay", {
        paymentData: "abcxyz...",
        amount: { currency: "CNY", value: 50 },
        qrCodeData: "weixin://wxpay/bizpayurl?pr=marc...",
        onComplete: handleOnComplete
    }).mount("#wechat");

    Make sure you add a Components common configuration.

  4. Create a function to listen to and handle the onComplete event triggered by the Component: 

    function handleOnComplete(response) {
        response
        // {payload: "Ab02b4c0!BQABAgB5..."}
    }

    An onError event will be called when there was an error during the authorization process.

  5. Collect the payload passed in the response. You'll use this to present the payment result to the shopper.

Step 3: Present payment result

  1. Submit the payload to the /payments/details endpoint to verify the result of the payment:

    {
      "details":{
        "payload": "Ab02b4c0!BQABAgB5..."
      }
    }

    The response will contain a pspReference, which is our unique identifier for this payment, and a resultCode

  2. Use the resultCode you received from the /payments/details endpoint 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

The 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.

Successful payments

You'll know a WeChat Pay payment has been successful when you receive a notification with:

  • eventCodeAUTHORISATION.
  • successtrue.

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.

See also