web页面调用支付宝支付

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

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

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

配置好的沙箱环境如图示
利用RSA签名验证工具生成签名，方法在此

前端调用，附上代码

<!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页面调用支付宝支付

web页面调用支付宝支付

相关文章