Weixin Payment Method in PHP

Question

I am developing Chinese eCommerce website by PHP. And I have completed QR code generation of weixin pay url. And it is working correctly on PC.

Now in case of tablet or mobile website version how can i open wechat application from a webpage and send QR code data to wechat application.

Answer 1

Each time you're generating the URL you put inside the QRCode you're creating a Wechat Order calling the unifiedorder Url provided by WechatPay, right? Using trade_type = NATIVE.

What you need is make the same call to that URL but with trade_type = JSAPI, also adding the parameter openid = wechatUserOpenId.

Then, using the returned data $orderResult you need to generate an string in json format, with the following data, like in this code:

    $timeStamp = time();
    $jsOrder['appid']     = $orderResult['appid'];
    $jsOrder['timeStamp'] = "$timeStamp";
    $jsOrder['nonce_str'] = $this->randomGenerator->getRandomString(32);
    $jsOrder['package']   = "prepay_id=" . $orderResult['prepay_id'];
    $jsOrder['signType']  = "MD5";
    $jsOrder['paySign']   = $this->makeSignature($jsOrder);

    $parameters = json_encode($jsOrder);

Once you have that string, inside the page you're showing in the Wechat WebBrowser you need to make an ajax call to get it and use it in a code like this:

Execute callpay() in an onClick event:

function callpay()
{
    if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
        }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', jsApiCall); 
            document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
        }
    }else{
        jsApiCall();
    }
}


function jsApiCall()
{
       var parameters = result[2];//fill it with the previous $parameters, with your preferred ajax call
       WeixinJSBridge.invoke(
       'getBrandWCPayRequest',
       parameters,
       function(res){
           console.log(res);
           switch(res.err_msg)
           {
               case "ok":
                     console.log('payment made'); 
                     paymentWasMade = true;                         
                     break;
               case "cancel":
                     break;
               case "fail":
                     break;
            }
     });
}

The parameters is the formatted result of the unifiedorder WechatPay API call. The function(res) is called after the user get out the WechatPay Gateway with those possibles results.

I hope this is helpful for you.

UPDATE:

I realized you don't need the file jweixin-1.0.0.js, the Wechat Web Browser it's gonna recognize the JS call.

Another comment, only Wechat version 5.0 and greater supports the payment feature, so users with versions prior to 5.0 can't access Wechat Payment. But you can check the version in the user agent, it should say something like this: Mozilla/5.0(iphone;CPU iphone OS 5_1_1 like Mac OS X) AppleWebKit/534.46(KHTML,like Gecko) Mobile/9B206 MicroMessenger/5.0

Answer 2

There are 4 types of trade in Wechat Pay:

1. JSAPI - used in Wechat App embeded browser
2. NATIVE - generate QR code, user have to scan the QR with Wechat App embeded browser
3. MWEB - NOTE: used in the mobile or tablet system browser, however, it will invoke the Wechat App to complete the payment process.
4. APP - used in the APP, not your case

So, I think the MWEB is what you need and best for your scenario.

However, if your tablet or mobile phone has not Wechat APP installed, you have to revert to the NATIVE(QR code) way, so the user have to take out the mobile phone which has the Wechat APP installed to scan the QR code and finish the payment.

Answer 3

This is a major pain point with WeChat. If the user is already inside the WeChat browser you can instruct them to long-press the QR code and they will get a pop-up with an option to scan the QR code in the image.

If they are in another mobile browser, you are pretty much stuck with telling them to take a screen-shot and then scan the image from within WeChat.