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. 最全Redis基础知识

    NoSQL概述 什么是NoSQL NoSQL不仅仅是SQL,它是Not Only SQL 的缩写,也是众多非关系型数据库的统称NoSQL和关系型数据库一样,也是用来存储数据的仓库. 为什么需要NoSQ ...

  2. 如何理解SiamRPN++？

    如何理解SiamRPN++? 目标跟踪: 使用视频序列第一帧的图像(包括bounding box的位置),来找出目标出现在后序帧位置的一种方法. 孪生网络结构: 在进入到正式理解SiamRPN++之前 ...

  3. 将config从内部移动到外部 3部曲

    1 创建 public/config.js /* eslint-disable no-shadow-restricted-names */ // eslint-disable-next-line no ...

  4. Asp.net 的输入框的 Enabled属性 与 ReadOnly属性

    控件不管是设置 Enabled="false" 还是ReadOnly="true",后台都取不到前台的值,值为“空”: 在界面视觉上,Enabled=" ...

  5. 面向对象第三单元博客（JML）

    // demo/Graph.java package demo; ​ import java.util.ArrayList; ​ public class Demo { /*@ public norm ...

  6. Leetcode_1048. 最长字符串链

    字符串的最长严格递增子序列,前后只能相差一个字符. 直接O(N^2)暴力建图,然后记忆化跑个最长路. 直接按字符串长度排序,然后求LIS. code1 class Solution { public: ...

  7. MyBatis框架——延迟加载

    延迟加载也叫惰性加载或者懒加载,使⽤延迟是为了提⾼程序的运⾏效率,具体是通过尽量少执⾏ SQL 语句来提升效率.Java 程序与数据库的交互频率越低越好,MyBatis 提供的延迟加载功能就可以做到这 ...

  8. zookeeper基础学习-简介

    1.zookeeper的使命 zookeeper可以在分布式系统的协作多个任务(一个任务是指一个包含多个进程的任务),这个任务可以是为了协作或者是为了管理竞争. 协作:多个进程需要一同处理某些事情,一 ...

  9. 《吐血整理》Redis 性能优化的 13 条军规！史上最全

    Redis 是基于单线程模型实现的,也就是 Redis 是使用一个线程来处理所有的客户端请求的,尽管 Redis 使用了非阻塞式 IO,并且对各种命令都做了优化(大部分命令操作时间复杂度都是 O(1) ...

  10. vue 3

    目录 复习 Vue项目需要自建服务器:node npm:包管理器 - 为node拓展功能的 vue cli环境:脚手架 - 命令行快速创建项目 创建Vue项目 启动项目 项目目录 组件 在根组件中渲染 ...