5-minute tutorial to implement WeChat payment access

In fact, it is not difficult to access payment in a website or app service. As long as you are not afraid to do it and carefully understand the entire payment interaction process, it really only takes half an hour at most to implement. This article is based on using Ping++ to integrate the payment function to implement WeChat payment, which only takes about five minutes.

I received a WeChat notification this morning that the WeChat payment access application applied for yesterday has been approved. Gu just connected WeChat payment in the morning. Since I have used Ping++ to access Alipay's instant payment service before, adding a WeChat payment access on this basis is a matter of minutes.

Configuring Ping++ backend

After the WeChat payment you applied for is approved, you will get four very critical information.

After the configuration is correct, you need to simply modify the code for initiating payment on the back end, because there are subtle differences between Alipay and WeChat payment in the Ping++ system, specifically the difference in the extra parameter: Use Alipay to get instant payment When making an account, success_url needs to be passed in the extra part as a synchronous jump requirement, while WeChat payment needs to pass the product_id in the extra field. This part of the code can be like this:

switch ( $channel ) {    case 'alipay_pc_direct' :      
 $extra['success_url'] = url('/payment/done');       
  break;    case 'wx_pub_qr':       
   $extra['product_id'] = $this->wechatOrder();    
       break;    default:      
         //more extra comes here}

I think this part is It takes just a minute!

Modify the front-end code

At this point, only two minutes are actually left for the front-end, but this is enough. Because I used Vuejs to reconstruct the payment component before, after adding WeChat, I just added some conditions to judge it. However, one thing that needs special attention is that WeChat payment only supports scanning QR codes and there is no jump link. concept, so we need a library to process QR codes. Here we can directly use the vue-qrcode I recommended before.

then((response) => {
    if(this.channel === 'wx_pub_qr') {
      this.status = 'paying';
      this.qrcodeUrl = 
           response.data.credential.wx_pub_qr;
      this.timeId = setInterval(() => {
          if (this.status == 'success') {
              clearInterval(this.timeId);
          }
          this.checkPaymentDone(response.data.id);
       }, 5000)
    }
 }
 
checkPaymentDone(chargeId) {
    axios.post('/payment/check', {
        chargeId: chargeId
    }).catch(error => {
        this.status = 'exception';
    }).then(response => {
        if (response.data.finished) {
            this.status = 'success';
        }
    })
},

In this way, when displaying the QR code, it can be like this:

<div v-show="status == &#39;paying&#39;">
    <p v-show="channel == &#39;wx_pub_qr&#39;">
        <qrcode 
         :value="qrcodeUrl"
         v-if="qrcodeUrl"
        :options="{ size: 170 }">
        </qrcode>
    </p>
    <p>请使用微信扫码支付</p>
</div>

In this way, users can correctly see the QR code for WeChat payment when choosing WeChat payment! Two minutes!

The above content is about the 5-minute tutorial method to implement WeChat payment access. I hope it can help everyone.

Related recommendations:

Steps to implement WeChat payment process using h5

Thinkphp integrated WeChat payment function detailed explanation

Summary of WeChat Mini Program Development Payment Function Error

The above is the detailed content of 5-minute tutorial to implement WeChat payment access. For more information, please follow other related articles on the PHP Chinese website!