WeChat applet web-view payment development instructions, with payment demo

Wechat applet web-view payment source code download, wechat applet payment development tutorial

Our project has been launched on the official account. At present, the goal of developing applet is to directly use web-view, and there is no need to develop it again, but the web-view of applet Does not support WeChat payment, you can only call the API of the applet payment by jumping back to the applet. I wrote a demo.

Initiate WeChat payment: wx.requestPayment(OBJECT)

sample code:

wx.requestPayment({
   'timeStamp': '',
   'nonceStr': '',
   'package': '',
   'signType': 'MD5',
   'paySign': '',
   'success':function(res){
   },
   'fail':function(res){
   }
})

 

Official developer documentation: https://developers.weixin.qq.com ... equestpaymentobject

The specific project structure is as follows:

 
project structure.png

1. First, introduce jssdk in the vue project (others are similar to jQuery), so that the related interfaces of wx.miniProgram can be called

<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

 

To explain, the http domain name is not referenced in src because our project environment has two methods: http and https. In this way, the
relevant official website documentation can be dynamically changed according to the server domain name.

webview interface.png

2. Add the webview component to the applet, and call the interface to jump to the relevant webview

//event handler
  toWebview:function(){
    wx.navigateTo({
      url: '/pages/webview/webview',
    })
  },

 

3. After the webview has processed the relevant business logic, it needs to jump back to the applet and carry the necessary parameters for the payment returned by the background.

  //The applet and the official account jump to different pages
        navigateToPay: function() {
            if (this.isMiniProgram === true) {
                // alert('Applet')
                //The returned data format is negotiated by the background, this code is for reference only and cannot be used in practice
              const payParam = {
                    appId: "wxd678efh567hg6787",
                    nonceStr: "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
                    package: "prepay_id=wx2017033010242291fcfe0db70013231072",
                    signType: "MD5",
                    timeStamp: "1490840662",
                    paySign:"BB2B9BD3F2F8A1CB270C6ACE3D7BDB9"
                };
                // alert(payParam);
                this.navigateToMiniProgram(JSON.stringify(payParam));
            } else {
                alert('public account');
                //The original payment logic does not need to be modified;
            }
        }

　　

4. Call wx.requestPayment of the applet to evoke the payment. If you don't need to display the page, you can write a blank page

. 5. The payment is completed and the related logic is processed.

 

Demo download: WeChat applet webview payment source code download, WeChat applet payment development tutorial