如何在h5中调用支付宝支付功能

站长手记作者： 2024-08-28 05:40:01

如何在自己的H5页面如何集成支付宝支付呢？目前采用前后端分离的开发模式，数据都是通过服务器那边获取的，现在需要集成支付宝支付，下面就简单介绍下。

res => {
  const div = document.createElement('div');
  div.innerHTML = res.html;
  document.body.appendChild(div);
  document.forms[0].submit();
}

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
   <form id="alipaysubmit" name="alipaysubmit" action="https://mapi.alipay.com/gateway.do?_input_charset=utf-8" method="get">
   <input type="hidden" name="service" value="alipay.wap.create.direct.pay.by.user" />
   <input type="hidden" name="partner" value="合作商户ID，需要跟支付宝申请" />
   <input type="hidden" name="_input_charset" value="utf-8" />
   <input type="hidden" name="sign_type" value="MD5" />
   <input type="hidden" name="sign" value="78ff1f0d498b6bc1302b9fcb96e25edf" />
   <input type="hidden" name="notify_url" value="http://127.0.0.1:8080/pay-front/aliPayResultNotify" />
   <input type="hidden" name="return_url" value="http://127.0.0.1:8080/Service/toReturn.action" />
   <input type="hidden" name="out_trade_no" value="00652016012716580911842412986916" />
   <input type="hidden" name="subject" value="1" />
   <input type="hidden" name="total_fee" value="0.01" />
   <input type="hidden" name="seller_id" value="合作商户ID，需要跟支付宝申请" />
   <input type="hidden" name="payment_type" value="1" />
   <input type="hidden" name="body" value="20160127|10201601271658060548484552912431|ALIPAY-WAP|1" />
   <input type="hidden" name="exter_invoke_ip" value="112.97.57.54" />
   </form>
   <script>document.forms['alipaysubmit'].submit();</script>
 </body>
</html>