web页面调用支付宝支付

此文章是前端单独模拟完成支付，若在线上环境则需要后台配合产生签名等参数

1.在蚂蚁金服开放平台申请沙箱环境

将沙箱环境中的**、应用网关、回调地址补全，生成**的方法在此

web页面调用支付宝支付

配置好的沙箱环境如图示

web页面调用支付宝支付

2.利用RSA签名验证工具生成签名，方法在此

3.前端调用，附上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div style="width:200px;height:200px;background:red;" onclick="to()"></div>
</body>
<script src="../js/jquery-1.12.1.js"></script>
<script>
    var prodConfig = {
        "body": "body",
        "subject": "daledou",
        "out_trade_no": "70501111111S001111110",
        "timeout_express": "90m",
        "total_amount": 9.00,
        "product_code": "QUICK_WAP_WAY"
    }
    var alipayConfig = {
        biz_content: JSON.stringify(prodConfig),
        app_id: '自己的appid',
        version: '1.0',
        format: 'json',
        sign_type: 'RSA2',
        method: 'alipay.trade.wap.pay',
        notify_url: 'http://***/alipy/notify_url.php',
        return_url: 'http://***/alipy/return_url.php',
        charset: 'UTF-8',
        sign: 'L3quItR9hqIfsgjZVqDO/L8k5dmdSSn7KCQcHMRsZl0yzFa9im5Ge/ZXZh1sIo+fqr5zJkUUYmZknERw+iPiiNt/w0VLKPzjgzL4afoQ4oS5vnD8SzdccA9C1E5GxjvJCXGseeciQpyNkMmvXwTcL7egS4ukn2dAV0lpcM8KNPJdi+1HlWgAlnFT0Xq6Kqs24GD+Fd4ogpXoWOa3HfSjY1+DY+7FwKyunTvR9isN/kRIckW887GE2Dy2jRSghhANrf47f54SDMu+UcuRsNfxsgwfSTiafTW1q8Eym/2G7PBOWnI0I5llD7bs9Qu3zB/b+IpLlkEa0jUNj1rXgvkjww==',
        timestamp: '2017-11-15 14:55:46'
    }
    function to() {
        httpPost('https://openapi.alipaydev.com/gateway.do', alipayConfig)
    }
    function httpPost(URL, PARAMS) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";

        for (var x in PARAMS) {
            var opt = document.createElement("textarea");
            opt.name = x;
            opt.value = PARAMS[x];
            temp.appendChild(opt);
        }

        document.body.appendChild(temp);
        temp.submit();

        return temp;
    }
</script>
</html>

web页面调用支付宝支付

相关推荐