Vue实现移动端H5支付宝支付篇

前言

移动端支付宝支付，Vue中如何用H5支付，满足了业务需求？

前端的准备工作

支付宝中的H5支付和移动端的支付本质上是一样的，最繁琐的订单生成环节都是后端来配合完成。当后端完成订单的生成之后返给前端的是form表单，前端在获得到数据后，完成后续业务流程即可。

不要在前端尝试生成订单的操作，前端攻破的难度远低于后端。一旦公钥和私钥被截获，那么带来的损失无法估量。

后端返回的数据内容是啥？

支付宝H5支付返回的内容，确实与移动支付大有不同。示例如下：

{
    "code": 200,
    "message": "success",
    "data": {
        "pay_info":"<form id='alipay_submit' name='alipay_submit' action='https://openapi.alipay.com/gateway.do?charset=utf-8' method='POST'><input type='hidden' name='app_id' value='xxxxxxxxxxxx'/><input type='hidden' name='format' value='JSON'/><input type='hidden' name='charset' value='utf-8'/><input type='hidden' name='sign_type' value='RSA2'/><input type='hidden' name='version' value='1.0'/><input type='hidden' name='notify_url' value='http://xxxx.xxxxxx.com/xxxxxx/v1/aliPayCallBack'/><input type='hidden' name='timestamp' value='2023-06-04 20:59:26'/><input type='hidden' name='biz_content' value='{\"out_trade_no\":\"XXX306xxxxxx40153\",\"total_amount\":\"0.xx\",\"subject\":\"xxxxx",\"product_code\":\"QUICK_xxx_WAY\"}'/><input type='hidden' name='method' value='alipay.trade.wap.pay'/><input type='hidden' name='sign' value='W46auJ0VOfcafoIPxvcr5ETFq4IfNLg7yFLySI9lFp4TjYQe0RvmZpFVQqQnFHdLclkl1jZ1VYXbkvdnAeQ+25Ch85aTZwAoy5IaeY1NyED+RWihxhKBxTGnRU2x56fpd8UDf56W7ScDv15qWS3mp3gj6yg4DKo6bzTyl7MD37boSzNW7HjWz3oeGwW0VxE+m9uWCpDEGxa23org79AlmYzJwclNTFTgAo4np2LcOIum+gnhxasdasdKJSHDKJHDDS+SDKJLKJLKWOIUOIxxxxx//opHMQ6g=='/><input type='submit' value='ok' style='display:none;'></form><script>document.forms['alipay_submit'].submit();</script>",
    }
}

前端怎么玩？

方案一：选择支付宝方式之后进入支付宝承载页面

<template>
  <div v-html="html"></div>
</template>
<script>
    export default {
      data(){
        return{
          html:''
        }
      },
      methods:{
        fetchVideoPay(){
          let param={
            orderId: this.$route.query.orderId
          };
          this.$api.orderpage.videoAliPay(param).then( res => {
            this.html = res.data;
            this.$nextTick(() => {
              document.forms[0].submit()   //渲染支付宝支付页面
            })
          })
        }
      },
      mounted(){
        this.fetchVideoPay()
      }
    }
</script>

方案二：在当前页面直接唤起支付宝支付

const div = document.createElement('div');
div.innerHTML = (res.data);  //res.data是返回的表单
document.body.appendChild(div);
document.forms.alipaysubmit.submit();

效果图如下