When the leader asked me to pay h5 Alipay for the first time, I went to the open platform of Alipay. I went up and down, left and right, and took a long breath after reading it. I don’t seem to have any problem with this payment! The small partners to see: opendocs.alipay.com/open/203/10…

As for alipay payment in mobile web pages, the core code is that the back end will return you a form, and then you take the form to call it. This requires you to prepare two web pages. One is the payment page you have written to return to the background, and the other is the successful page to return_URL after the payment is successful. And you can do something about the callback page by getting the page URL parameter. First we request the payment interface from the back end

<template> <div> < button@click ="handlePay" class="pay_money_button" type="info" :loading="load" Loading-text =" payin "> </button> </div> </template> <script> export default {data(){return {load:false}}, HandlePay (){this.load = true; / / request payment parameter data = {orderId: this. PayForm. OrderId} aliPaySignH5 (data). Then ((res) = > {if (res) status = = 1000) {if (res.data ! == null) {// I used the cache to process the return values. If I pass router parameters, one of them will be displayed on the browser. Sessionstorage.setitem (' HTML ',res.data); this.$router.push({path:'/bigdatapay'}) } } }).finally((res)=>{ this.load = false; Toast.fail(res.data.msg); }). The catch ((err) = > {/ / would you like to eat what eat what,})},}} < / script >Copy the code
<template> <div class="container"> <div V-html ="apply"> </div> </template> <script> export default { data(){ return { apply:'', } }, mounted(){ let form = sessionStorage.getItem('html') this.apply = form; this.$nextTick(()=>{ document.forms[0].submit() }) }, methods:{ } } </script>Copy the code

Here is another place, Alipay payment can not be opened in the wechat environment, so you need to add a judgment in the payment page, if it is the wechat environment, give the user an operation prompt, open the upper right corner, to open the page in the browser. Judge the method of wechat environment before we have encapsulated, here do not repeat, friends can go to see (the previous article, wechat sharing and payment have this method). Ok, here, we have finished several interfaces commonly used by Alipay and wechat. Believe that you are getting closer and closer to getting into the front end and giving up. Code text is not easy, if you think it is helpful, click a like! Thank you very much!