H5使用支付宝支付

news2024/9/22 23:34:25

详情可参考支付宝开发文档：支付宝开发文档

前端把购买信息通过请求接口告诉后端，接口返回含有支付相关信息字符串string，前端插入html中调用

例：form

< form name = "punchout_form"
method = "post"
action = "https://openapi.alipay.com/gateway.do?app_cert_sn=111111111111111&charset=utf-8&alipay_root_cert_sn=22222222222&method=3333333&sign=4444&return_url=5555&notify_url=6666&version=1.0&app_id=7777&sign_type=888&timestamp=2022-02-01+10%3A17%3A41&alipay_sdk=9999&format=json" >
    <
    input type = "hidden"
name = "biz_content"
value = "{&quot;time_expire&quot;:&quot;2024-07-08 10:20:41&quot;,&quot;out_trade_no&quot;:&quot;111111&quot;,&quot;total_amount&quot;:&quot;100&quot;,&quot;subject&quot;:&quot;323商品名称自测&quot;,&quot;product_code&quot;:&quot;QUICK_WAP_WAY&quot;,&quot;body&quot;:&quot;323商品名称&quot;}" >
    <
    input type = "submit"
value = "立即支付"
style = "display:none" >
    <
    /form> <
    script > document.forms[0].submit(); < /script>

接口相关信息解析

url：支付宝 - 网上支付安全快速！
app_cert_sn：应用公钥证书
charset：编码格式，如 utf-8、gbk、gb2312
alipay_root_cert_sn：公钥证书签名
return_url：支付成功后点击完成会自动跳转回商家页面地址，同时在 URL 地址上附带支付结果参数，回跳参数可查看本文
notify_url：异步通知地址，用于接收支付宝推送给商户的支付/退款成功的消息
app_id：支付宝分配给开发者的应用 ID。
method：接口名称，示例值：alipay.trade.wap.pay.return
version：调用的接口版本，固定为：1.0
sign：支付宝对本次支付结果的签名，开发者必须使用支付宝公钥验证签名
sign_type：商家生成签名字符串所使用的签名算法类型，目前支持 RSA2

生成签名：https://opendocs.alipay.com/open/02khjm

后端接入开发文档

技术接入：https://opendocs.alipay.com/support/01rauz?pathHash=e1329208

获取支付宝根证书

如何获取支付宝根证书 SN（alipay_root_cert_sn）

链接：https://opendocs.alipay.com/support/01rauy?pathHash=590aaa91

前端渲染

插入dom

  let el = document.getElementById(id)
  if (el) {
    el.innerHTML = mwebUrl
  } else {
    el = document.createElement('div')
    el.id = id
    el.innerHTML = mwebUrl
    document.body.appendChild(el)
  }
  el.querySelector('form')?.submit()

或者

  // 取回来的是支付宝提供的一段自执行的form表单代码
  // 这里我把这段代码插入页面中，并手动触发
  const div = document.createElement('div');
  div.innerHTML = resAlipay.data.form;
  document.body.appendChild(div);
  document.forms[0].submit();