Write the H5 payment in these two days and record that almost all the configuration on my side is done by the back end. After the order is submitted

WeChat pay

  • Wechat Pay will return an MWeb_URL address, and the payment will jump to the middle page of wechat Pay for H5 permission verification and security check
  • The user completes the payment or cancels the payment at the cashier desk of wechat Pay and returns to the merchant page (the default is to return to the payment initiation page)
  • After the payment is complete, the user is returned to the page that initiates the payment. If the user needs to return to the specified page, add redirect_URL =+ after mweb_URL to specify the callback page

Note on pit

  • Redirect_url addresses need to be processed by urlencode
  • Cancellation of payment or successful payment will jump to this address, and then the order query, according to personal needs
  • Note: Redirect_URL will be redirected regardless of payment cancellation or payment success, and the redirect_URL will be automatically redirected even if you stay on the payment page for more than five seconds, so there is no way to automatically query the order status, you need to write a button to guide the user to click and so on

payApi.wxPrepare({ orderSn: This.order.ordersn}).then((res) => {// call up the middle page address res.data.mweburl const url = escape(`${process.env.VUE_APP_WEB_URL}/#/applyText? OrderSn =${this.order.ordersn}&totalPrice=${this.order.totalPrice} ') //url equivalent to The https://www.baidu.com/#/applyText?orderSn=123456 //escape() function encodes the string so that it can be read on all computers. Href = res.data.mwebUrl+ '&redirect_url=${url}'})Copy the code

Note: return to the previous page or return to the middle page, this depends on your specific style, can be intercepted in the route or redirect and so on

Alipay Payment

  • The back end returns a hidden form, and then we insert the front end and pull up alipay payment by submitting the form

payApi.Alipay({ orderSn: This.order.ordersn}). Then ((res) => {const div = document.createElement('div') div. Id = 'formData' div.innerHTML = res document.body.appendChild(div) const form=document.getElementById('formdata'); document.forms[0].submit() document.body.removeChild(form) })Copy the code

Note: I don’t know if this is my problem, but EVERY time I return to the current page, I pull the payment again, and all forms are deleted after submission

  • A successful payment callback needs to be configured to the backend
  • Java Alipay H5 and callback blog.csdn.net/zcl_666/art… Related articles