vue项目 支付宝 支付
关于支付宝支付,调后端接口之后会返回一个form表单,我们只需要将这个form表单用JS动态创建至页面中调用即可;
- 后端返回的数据:
<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=UTF-8&method=alipay.trade.page.pay&sign=E6bPCDpuDO392x%2BTXH7NrCPc177ruA4OsOHVzvVwhJgrfGp0khrByX18Kn8VztKaAXmXHyyrxTW0Zgwyp7Z9lzPUCIFwXk7JHWrXmJoQcB1yg1kspixRJ0%2BOjZPzyrrV0NGCbi5mTy%2BttYArIBZGAZYvFdrYm6YcEfr1%2FO53VJlfroVnVJw57v7jhsyPYtux209Hl3OBG8PIRvyTlubFACl5GOc10X5T1lWmZ0TtMjUEyIVKiQCjwhHrgnCsnMZGWE4nE334iXe2lkgLCZE0aNhaX%2FCqQVU6BKMFTHRjNzM7Bsc5pEN4LM4HsYO9nG8PPUbZKlzCIbWRFkLHprvxnQ%3D%3D&return_url=http%3A%2F%2Ff1713205z9.iask.in%2F%2Fapi%2FaliPay%2Freturn_url¬ify_url=http%3A%2F%2Ff1713205z9.iask.in%2F%2Fapi%2FaliPay%2Fnotify_url&version=1.0&app_id=2021002112630300&sign_type=RSA2×tamp=2020-12-02+18%3A12%3A50&alipay_sdk=alipay-sdk-java-4.8.10.ALL&format=json">
<input type="hidden" name="biz_content" value="{
"body":"模拟电子技术","out_trade_no":"fa68bf467fd1478d98fb277dc9f81429","passback_params":"passback_params","product_code":"FAST_INSTANT_TRADE_PAY","subject":"模拟电子技术","total_amount":"0.01"}">
<input type="submit" value="立即支付" >
</form>
- 将数据放至页面并调用:
getpay(){
let data={
orderSn:this.orderSn,
totalAmount:this.orderPrice,
body:this.goodsDetail,
orderName:this.goodsName,
}
getPcPay(data).then(res=>{
//res即为后端返回的form表单
//js创建一个div将form表单添加上去
const div = document.createElement('div')
div.innerHTML = res;
document.body.appendChild(div)
//调用form表单
document.forms[0].submit();
})
},
代码完成之后点击支付,即可自动跳转至支付宝支付页面进行支付!