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搭建项目-Zuul篇(六)

    本文主要介绍zuul的基本原理和在sprngcloud服务下如何使用 一.简单介绍 Zuul 是 Netflix OSS 中的一员,是一个基于 JVM 路由和服务端的负载均衡器.提供路由.监控.弹性. ...

  2. 致远·面向人工智能-逐浪CMS v8.1.2全面发布[全球首个基于dotNET core3.0的中文CMS]

    原文:https://www.z01.com/down/3484.shtml 再远, 我都不会停息, 因为技术而生, 因为技术而强, 这是逐浪软件的命与根! 全新打造, 三百多项超级功能, 助你十分钟 ...

  3. 在Linux上查询物理机信息-不用去拆机器了

    目录 一.查看系统信息(包含机器型号) 1.1 查看机型和品牌 二.查看CPU 信息 2.1 查看CPU 型号 2.2 查看CPU的物理数量 2.3 查看 CPU核心数量(非逻辑CPU) 2.4 查看 ...

  4. JVM系列八（虚拟机性能监控命令）.

    jps JVM Process Status Tool,显示指定系统内所有的 HotSpot 虚拟机进程.显示信息包括虚拟机执行主类名称以及这些进程的本地虚拟机唯一ID(Local Virtual M ...

  5. DataFrame简介（一）

    1. DataFrame 本片将介绍Spark RDD的限制以及DataFrame(DF)如何克服这些限制,从如何创建DataFrame,到DF的各种特性,以及如何优化执行计划.最后还会介绍DF有哪些 ...

  6. 仿flash实现图片轮换播放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 从火箭发场景来学习Java多线程并发闭锁对象

    从火箭发场景来学习Java多线程并发闭锁对象 倒计时器场景 在我们开发过程中,有时候会使用到倒计时计数器.最简单的是:int size = 5; 执行后,size—这种方式来实现.但是在多线程并发的情 ...

  8. go例子(一) 使用go语言实现linux内核中的list_head

    package list 代码 package list import ( "fmt" ) // 数据接口 type ElemType interface{} // 节点 type ...

  9. Mybatis总结一之SQL标签方法

    ---恢复内容开始--- 定义:mapper.xml映射文件中定义了操作数据库的sql,并且提供了各种标签方法实现动态拼接sql.每个sql是一个statement,映射文件是mybatis的核心. ...

  10. Python-操作XML文件

    一.python对XML文件的操作 目录 1.xml 创建 2.xml 数据查询 3.xml 数据修改 4.xml 数据删除 二. 1.xml 创建 import xml.etree.ElementT ...