Android payment

First of all, Android H5 payment as we all know H5 payment is the need to jump browser to adjust wechat payment, so the background brother has put the necessary parameters and callback address has been processed. So we just need to jump to the corresponding webView address is good note: jump URL must be configured with the payment configuration of the domain name in the background and have a whitelist to say no more programmers use code communication!!

1. Jump webView

At this point, set our jump address as' https://baidu.com 'Copy the code
let webUrl = `https://baidu.com`
this.$Router.push({
	name:'webView'.params:{
            webUrl
        }
 })
 
 // I'm using the encapsulated routing component, so I'm going to skip to the WebView page, which defines a separate page and receives the parameters from options
Copy the code

2. Jump to the key page of WebView to access wechat Pay

First, let's talk about our requirements. Click wechat Pay, jump to the browser page of WebView for wechat Pay, and hop back to Uni-App after successful payment. // At this time, I wanted to stab our product with a knife. // After thinking about it carefully, I found it feasible by looking at the document of UNI, so I started to build a scaffold for H5 project using VUE language. // Let's take a look at the answers from UNI officialsCopy the code
<! DOCTYPE html><html lang="zh-CN">
  <head>.</head>
  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <! -- built files will be auto injected -->
  </body>
  <! Uni SDK -->
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  <script>
    document.addEventListener('UniAppJSBridgeReady'.function() {
      uni.webView.getEnv(function(res) {
        console.log('Current Environment:' + JSON.stringify(res));
      });
      // uni.webView.navigateTo(...)
    });
  </script>
</html>

'The official solution is like this, introducing THE SDK of UNI to interact with the pages in the application, so I put it into my VUE project and tried it, but it didn't work, no matter how hard I tried it, at that time, I was almost obsessed with it'

Later, I read the document of UNI carefully and downloaded the sample project of UNIAfter careful research, uni SDK does not work in vue scaffolding project. It has to be a single page, so it is easy to find the problem and start writing code.Copy the code

My code

<! DOCTYPE html><html lang="zh-CN">
  <head>.</head>
  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <! -- built files will be auto injected -->
  </body>
  <! Uni SDK -->
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  <script>
  	if('I'm going to take a parameter here to determine whether the current user paid and entered or clicked in for the first time.') {
            document.addEventListener('UniAppJSBridgeReady'.function() {
             document.querySelector('.container').addEventListener('click'.function (evt) {
                // listen for click events
                var target = evt.target;
                if(target.tagName === 'WEIXIN') {
                    // The operation when clicking wechat, here I will call the interface of payment verification to verify whether the user has paid successfully
                    axios.post('Interface address').then(res= > {
                        if('Payment successful') {
                            uni.switchTab({
                        url: '/pages/my/my'})}else {
                            alert('Not yet paid, please go and pay')}})}}else {
     	// No payment
        let urls = url.split('&redirect_url=')
        let redirect_url = 'Here's where you can jump to.'
        window.location.href = urls[0] + '&redirect_url=' + encodeURIComponent(redirect_url)
     }
    }
    
    });
  </script>
</html>
	// The specific core code is here, note that app project payment is not like h5 project payment after successful callback to a page of the project, so we need to do an intermediate operation
Copy the code

I added it on the page by default. If success is true, it will enter the payment process for the first time. If it is false, you can directly adjust wechat Payment, and the callback address of successful payment will join success as true. If successful, it will directly jump back to the app’s personal center page

Alipay payment process

Alipay payment is relatively simple, directly on the code:

axios.post('Interface address', {}).then(function (res) {
        if (res.data.response) {
             alert('Already in order')}else {
          // Pay without checking the order
          axios.post('https://yzyapi.yrtsedu.cn/api/front/HFivePay/AliH5Pay',).then(function (res) {
                 const div = document.createElement('div')
                 div.innerHTML = res.data.response.Body // Return the form
                 document.body.appendChild(div)
                 document.forms[0[.submit()})}) The form returned by the background is directly, so you can put the code directly into it. The callback after successful payment is similar to wechat's idea, but the callback page for successful payment is AlipayCopy the code

Android on IOS and Apple Pay will have no response when you enter it for the first time, so you have to find various reasons. The general reason is that the jump of WebView has a different kernel of built-in browser from IOS, so it will cause ifkame error. In this case, you can directly open the browser on IOS.

Plus.runtime. openURL(webUrl) check whether the current environment is ios when uni payment page, if yes, do not jump to the webView page, just open the browser, the general information is here, if you do not understand the friends can leave me a message, feel free to reply. I stepped on a lot of pits at that time, but LUCKILY I have my dragon brother to guide me.