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. 基于springcloud搭建项目-Hystrix篇(五)

    1.概述 (1).首先要知道分布式系统面临的问题复杂分布式体系结构中应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免的失败 (2).服务雪崩 多个服务之间相互调用的时候,假设微服务A调用微服 ...

  2. java递归树形菜单显示

    今天写权限整好涉及到一些菜单的显示,最先想到的是递归遍历输出,但是呢在网上找了很多有关的资料没有符合自己需求的所以就自己写了一个,如果觉得靠谱 请点点关注!!!赞一个 首先看一些设计的数据库设计 菜单 ...

  3. Web Scraper 高级用法——利用正则表达式筛选文本信息 | 简易数据分析 17

    这是简易数据分析系列的第 17 篇文章. 学习了这么多课,我想大家已经发现了,web scraper 主要是用来爬取文本信息的. 在爬取的过程中,我们经常会遇到一个问题:网页上的数据比较脏,我们只需要 ...

  4. 【Python】2.16学习笔记 运算符,位运算符,if-else语句

    复合运算符 a *= b # a = a * b a += b # a = a + b a -= b # a = a - b ... 位运算符 对数字进行二进制运算 按位与 &,二进制位都为一 ...

  5. （转）USB的VID和PID，以及分类（Class，SubClass，Protocol）

    USB的VID和PID,以及分类(Class,SubClass,Protocol) 原文地址:http://blog.csdn.net/gaojinshan/article/details/78783 ...

  6. CodeMixer工具,完美替代ChaosTool，iOS添加垃圾代码工具，代码混淆工具，代码生成器，史上最好用的垃圾代码添加工具，自己开发的小工具

    新工具 ProjectTool 已上线 这是一款快速写白包工具,秒级别写H5游戏壳包,可视化操作,极易使用,支持Swift.Objecive-C双语言 扣扣交流群:811715780 进入 Proje ...

  7. jquery 获取url携带的参数

    url= "/page/employee/employeeUpdate.html?id="+data.id 获取 url携带的参数 -> $.getUrlParam = fu ...

  8. 渗透神器cobalt strike在数字杀软环境下的使用

    当我们拿到cobalt strike的beacon权限时,使用它如何渗透目标内网.因为我看网上的文章都是在无杀软下写的,这难免有点脱离实战环境,本文主要测试CS的beacon在数字杀软环境下进行常规渗 ...

  9. 单片机的 HexToStr HexToBcd BcdToStr 几个转换函数

    今天写单片机一个程序 要检查一些数据,想发到串口调试的软件上在电脑上查看 有些转换函数 想网上找一个 看看都是很多的垃圾文章 很多的程序都不能用,那些发文章的人也不用心 所以我还是自己动手写一下吧 写 ...

  10. MySQL学习(3)

    一 SQL语句 1. 数据库级别(*) 显示全部数据库:show databases; 创建数据库:create database '数据库名字’; 使用数据库:use '数据库名字'; 删除数据库: ...