H5支付两种成熟方案

news2024/9/27 13:11:28

H5支付，对前端来讲并不算难。主要工作量都在后端，需要对接支付宝API文档配置大量参数与商户信息。

前端需要做的是正常调取支付接口，拿到配置好的支付信息，触发后续流程，再利用本地存储拿支付订单号判断支付结果即可【如果跳转支付宝的H5支付中间页，不同于IOS的机制，在嵌套安卓APP-webview的情况下会被销毁，无法保持页面状态，其中一个解决方案就是localStorage需要保存支付订单号】。

方式1：

官方相关文档

通过接口返回的支付宝表单


          <div class="prize-formHtml" v-html="formHtml"></div>


          const result = await AlipayAapApi({
            orderSn:orderSn,//订单号
            totalAmount:count,//金额
            payType:1,//支付类型 1：支付宝 2：微信
            redirect:encodeURIComponent('https://xxx.xxxx.com/'),//支付完成后的回调页面地址 
          }, {
            headers: { token: `${token.value}`, authdm: authdm.value },
          });
          console.log(result);
          
          if(!result.code){
            formHtml.value = result
            nextTick(() => {
              document.forms[0].submit()// 手动执行支付
            })
          }

接口会返回一个支付宝处理好的表单
手动提交表单后跳转支付宝H5中间页
点击打开支付宝，自动调起支付宝APP自动校验后完成支付，并返回配置好的回调地址，等待回调查询支付状态进行后续操作即可。

方式2：

官方相关文档

通过接口返回的支付宝表单

		const result2 = await AlipayAapApi({
            orderSn:orderSn,//订单号
            totalAmount:count,//金额
            payType:1,//支付类型 1：支付宝 2：微信
            redirect:encodeURIComponent('https://xxx.xxxx.com/'),//支付完成后的回调页面地址 
          }, {
            headers: { token: `${token.value}`, authdm: authdm.value },
          });
          if(!result2.code){
            let a = document.createElement("a");
            a.style.display = "none";
            a.target = "_blank";
            document.body.appendChild(a);
            //a.href = result2.data
            a.href = 'alipays://platformApi/startApp?appId=60000157&orderStr=app_id=2017060101317939&biz_content=%7B%22time_expire%22%3A%222016-12-31+10%3A05%3A00%22%2C%22extend_params%22%3A%22%22%2C%22query_options%22%3A%22%5B%5C%22hyb_amount%5C%22%2C%5C%22enterprise_pay_info%5C%22%5D%22%2C%22subject%22%3A%22%E5%A4%A7%E4%B9%90%E9%80%8F%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22body%22%3A%22Iphone6+16G%22%2C%22passback_params%22%3A%22merchantBizType%253d3C%2526merchantBizNo%253d2016010101111%22%2C%22specified_channel%22%3A%22pcredit%22%2C%22goods_detail%22%3A%22%22%2C%22merchant_order_no%22%3A%2220161008001%22%2C%22enable_pay_channels%22%3A%22pcredit%2CmoneyFund%2CdebitCardExpress%22%2C%22out_trade_no%22%3A%2270501111111S001111119%22%2C%22ext_user_info%22%3A%22%22%2C%22total_amount%22%3A%229.00%22%2C%22timeout_express%22%3A%2290m%22%2C%22disable_pay_channels%22%3A%22pcredit%2CmoneyFund%2CdebitCardExpress%22%2C%22agreement_sign_params%22%3A%22%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&sign=ERITJKEIJKJHKKKKKKKHJEREEEEEEEEEEE&sign_type=RSA2&timestamp=2014-07-24+03%3A07%3A50&version=1.0'
            a.setAttribute("download", "link"); 
            a.click();
            document.body.removeChild(a);
          }else{
            showToast(result.msg);
            return
          }