How to embed WeChat applet into web page to realize payment?

Embedded web pages can use the interface provided by JSSDK 1.3.0, but the pit is coming, but it does not support the call of payment interface. After some research, the interaction between the two sides finally started.

Approximate process

1, first explain the files involved, which will be used below.

1.1app. js: the app.js file of the applet, and a global variable paySuccessUrl: ""is defined in the globalData, which is used to save the payment success jump Url.

1.2 wxminiwebview.js: web-view interface in applet 1.3 wxminipay.js: native payment interface of applet.

1.4 web_pay.vue: The embedded webpage will bring up the interface of the payment routing component. Since I wrote it in vue+vue-router, you'd better know about vue and vue-router, and remember to introduce the WeChat jssdk 1.3.0. Only the latest version contains the corresponding methods of applet. It's a pity that WeChat didn't provide npm package. The version of commonjs's WeChat jssdk introduced by someone in github is only 1.2.0, which can only be introduced in this way.

& lt script src= ". /static/jweixin-1.3.0.js "> Script & gt

2. First of all, we embed an embedded webpage normally like official website, and the url is the variable defined by data in wxmini_webview.js, and the webpage loaded by webview is this url.

& ltweb-view src = " { { URL } } " & gt； web-view & gt；

3. Determine whether the embedded webpage web_pay.vue is a WeChat environment.

window.wx.ready(function () {

isWxMini = window。 _ _ wxjs _ environment = = = ' mini program '

})

4. When calling payment on the embedded webpage web_pay.vue, send the payment amount, payment description, payment success jump url ... (remember the encodeURIComponent for any parameters you want) to the local page of the applet.

if (isWxMini) {

let jump URL = encodeURIComponent(window . location)

let path = `/page/pay/pay？ Amount = $ {amount} & Title = $ {desc} & jump URL = $ { jump URL } ` 0

window . wx . mini program . navigate to({

Url: path

})

}

5. Get the value from the embedded webpage in the applet payment interface wxmini_pay.js, which is convenient for demonstration. In fact, it is better to store these values to be displayed in the interface in the data of the page.

OnLoad: function (option) {

Console.log (option)

//Get the value passed by the webpage.

// TODO uses es6 deconstruction to get the TODO value.

jumpUrl = options.jumpUrl

Amount = Option. Amount

Title = option

...

},

6. After the payment is successful, save the payment result and current time attached to the jump url into the global variable.

paySuccess () {

Let currentTime = new date (). getTime()

//This is to prevent the call to setData in the wxmini_webview.js file from causing the route not to trigger refresh because the two URLs are consistent.

jump URL = options . jump URL+encodeURIComponent(`？ Payment result =1&; time=${currentTime} `)

//payResult= 1 indicates successful payment. I'm lazy here, just make up after the website? The actual situation is more complicated.

//In order to realize the loading without refreshing after the payment is successfully returned, the parameter here should belong to the routing web_pay.vue, not window.location.search

//Therefore, it is necessary to determine whether the location of the routing anchor # already has routing parameters (if the historical mode of vue-router is not used, it should be the same as window.location).

Getapp()。 Globaldata. paysuccessurl = jumpurl//Save the jump URL in the applet global variable.

Wx.navigateBack() // Returns the last page of the meeting, which is the container page wxmini_pay.js that hosts web pages.

}

7. Returning to applet wxmini_webview.js will trigger onshow and load the interface without refreshing.

onShow: function () {

console.log('on show ')

let paySuccessUrl = getApp()。

Getapp()。 Global data. paysuccessurl = ""// Clear the payment success url to prevent some operations from triggering the onShow event.

if (paySuccessUrl) {

let URL = decodeURIComponent(paySuccessUrl)

this.setData({

//Here, in step 6, we will explain &; Time=${currentTime}, just because you came back here successfully for the first time, you don't add this.

//This url is the same as when you successfully come back here for the second payment, which will cause the second payment to start. The setData method here is invalid.

Global resource locator (Uniform Resource Locator)

})

}

},

8. setData in step 7 will trigger the loading of web pages in webview. Because I use vue-router, and the two URLs are only different in the query of routing parameters, it will not trigger the interface refresh, nor will it trigger the overload of the route, but only the method of beforeRouteUpdate. For example, the interface before payment is https://host/#/pay now, and after payment is successful, jump to https:/. Payment result =1&; Time = 123456 #/ Payment. At this time, the interface will not be refreshed and the payment route will not be reloaded. It will trigger beforeRouteUpdate (to, from, next). All you have to do is parse the data in to.query in the interface here, and then do what you want.

BeforeRouteUpdate (recipient, sender, next) {

Console.log ('the route has changed, and it is likely that the payment of the applet was successfully recalled')

let pay result = to . query . pay result

If (payResult) {// applet paid successfully.

if (payResult === ' 1') {

Console.log ('Payment succeeded, punch in after work')

}

}

Next ()

},