web页面调用支付宝支付

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

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

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

    配置好的沙箱环境如图示

  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页面调用支付宝支付的更多相关文章

  1. python调用支付宝支付接口

    python调用支付宝支付接口详细示例—附带Django demo代码   项目演示: 一.输入金额 二.跳转到支付宝付款 三.支付成功 四.跳转回自己网站 在使用支付宝接口的前期准备: 1.支付宝公 ...

  2. uni-app 调用支付宝支付

    本文讲解  uni-app如何调用支付宝进行支付,服务端为 .net编写. 客户端:uni-app 编写  1.根据服务端生成的订单信息发起支付. 服务端:.net 编写 1.生成订单信息.2.接收支 ...

  3. Vue的H5页面唤起支付宝支付

    目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...

  4. 微信公众号支付（三）：页面调用微信支付JS并完成支付

    一.调用微信的JS文件 1.首先要绑定[JS接口安全域名],“公众号设置”的“功能设置”中 2.引入JS文件 备注:支持使用 AMD/CMD 标准模块加载方法加载 <script type=&q ...

  5. python调用支付宝支付接口详细示例—附带Django demo代码

    项目演示: 一.输入金额 二.跳转到支付宝付款 三.支付成功 四.跳转回自己网站 在使用支付宝接口的前期准备: 1.支付宝公钥 2.应用公钥 3.应用私钥 4.APPID 5.Django 1.11. ...

  6. java调用支付宝 支付api 【沙箱环境】

    由于支付宝支付api需要各种备案,但学校项目需要引入支付功能  先演示  ,所以采用 沙箱环境 一.登录支付宝 开放平台 及配置相关 https://openhome.alipay.com/platf ...

  7. 【问题记录】— web页面调用本地程序

    起因: 最近由于项目需要在web页面中调用本地部署的exe程序:进而对该功能实现做了对应了解:以及存在的问题进行记录. 要实现该功能就不得不说浏览器自定义协议:解决办法:那么它是什么呢? 浏览器自定义 ...

  8. 调用支付宝支付（C#）

    //支付宝支付 public string AliPay(string OrderID, string Total) //OrderID订单号,Total订单总金额 { // 支付宝网关 string ...

  9. 前端如何在h5页面调用微信支付？

    在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...

随机推荐

  1. 【图文+视频新手也友好】Java一维数组详细讲解（内含练习题答案+详解彩蛋喔~）

    目录 视频讲解: 一.数组的概述 二.一维数组的使用 三.Arrays工具类中的sort方法(sort方法用的多,我们具体讲一下) 四.数组中的常见异常 五.一维数组练习题 六.彩蛋(本期视频使用的P ...

  2. win10安装docker 和 splash

    参考链接1:https://www.cnblogs.com/321lxl/p/9536616.html 参考链接2:https://blog.csdn.net/qq_18831501/article/ ...

  3. 探究Spring Boot中的接收参数问题与客户端发送请求传递数据

    结合此篇参考Spring框架学习笔记(9)--API接口设计相关知识及具体编码实现 在使用Spring Boot进行接收参数的时候,发现了许多问题,之前一直都很忙,最近才稍微有空研究一下此问题. 网上 ...

  4. list的常用方法

    注:lst为定义的列表变量,如:lst = [1, 2, 3, 4, 5] 增: 1.  lst.append()  末尾追加 lst = [1, 2, 3, 4, 5, 6] lst.append( ...

  5. 群辉DS418play体验+经验分享

    群辉DS418play体验+经验分享     群辉DS418play体验+经验分享   购买初衷 近期百度网盘到期,我又需要重复下载很多资源(游戏.电影.毛片),下载没速度&下完没空间怎么办? ...

  6. 我用STM32MP1做了个疫情监控平台2—Qt环境搭建

    目录 1.嵌入式Qt简介 2.查看开发板Qt库的版本 3.主机搭建Qt环境 4.第一个Qt程序--Hello World 5.一些问题 @ 1.嵌入式Qt简介 Qt 是一个跨平台的应用程序开发框架.使 ...

  7. EOS基础全家桶（一）开篇

    简介 从今天开始我会在FishoPark上与大家分享EOS的一些技术经验和基础,如果大家在看文章的过程中有任何问题,欢迎在网站下方的评论里留言,我会尽力为大家解答,如果发现我内容中所写有错,欢迎指正, ...

  8. Lua Table pairs输出顺序问题 (版本差异 解决数字索引间断并兼容字符串索引)

    问题标签: Lua Table 迭代器;Lua Table 输出顺序; Lua Table 顺序输出;Lua Table 数字索引 字符串索引;Lua Table pairs; 问题背景: 使用pai ...

  9. 《数据库优化》- MySQL视图

    一.什么是视图 视图,是基于一个表或多个表或视图的逻辑表,本身不包含数据,通过它可以对表里面的数据进行查询和修改,视图基于的表称为基表.视图是存储在数据字典里的一条select语句. 通俗地讲,视图就 ...

  10. React源码解析——ReactAPI

    一.API背景 api的具体转化关系 可以通过到https://babeljs.io/repl/网站去将我们创建的Jsx进行实时的转译 const React = { Children: { map, ...