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. 对两个有序数组重新去重合并排序js实现

    这里主要是要利用两个数组有序这个条件,所以只需两个指针分别指向两个数组,当其中一个小于另外一个就移动该指针,反之则移动另外一个指针,如果相等则均向后移动. 结束条件是,当任意一个数组的指针移到末尾则跳 ...

  2. 阿里云Tomcat配置

    阿里云Tomcat配置并开放 本文可对以下问题提供参考 服务器 如何配置 Tomcat 配置 端口在监听,但是外网无法访问怎么办 注意事项: 对于阿里云服务器相对较为特殊,因为阿里云服务器除了需要在系 ...

  3. Java反射之成员变量的反射

    上一篇介绍了Java反射之构造方法反射.这次我们在说一说如何反射类中的成员变量并用作一个简单案例. [一]Field类 Filed类代表字段,包含字段拥有的所有属性,比如修饰符,变量类型,值等等,Fi ...

  4. ffmpeg 使用

    ffmpeg 使用 一.介绍 FFmpeg 是视频处理最常用的开源软件,大量用于视频网站和商业软件(比如 Youtube 和 iTunes),视频本身是一个容器,里面包含了视频.音频和字幕等.FFmp ...

  5. XMind ZEN 2020 (10.0.2) 全平台 完美破解版(ubuntu)

    XMind ZEN 2020 (10.0.2) 全平台 完美破解版(ubuntu) https://www.ghpym.com/xmindzen.html/comment-page-8?replyto ...

  6. 项目中 关于localstorage、cookie的坑？明明设置了本地存储为什么没生效

    1.简单的介绍一下localStorage,sessionStorage,cookie localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏 ...

  7. 解决不管其他元素z-index设置多高，都在视频下面的方法

    <div style="z-index:-1"> <embed name="Movie1" src="http://ecards.s ...

  8. java-随机点名2（新手）

    //创建的一个包名. package qige; //导入一个包.import java.util.*; //定义一个类.public class SJdm { //公共静态的主方法. public ...

  9. 12. Java 获取指定字符第N次出现的位置

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class Demo { //判断"Ab2Ad3 ...

  10. mpy开发物联网系列：1.mpy与服务器数据库方案

    ini配置文件与非关系型数据库 在使用micropython开发esp32过程中,经常涉及到一些数据的配置读取,而esp32本身micropython难以安装很多数据库客户端的库,只能基于本地文件使用 ...