js网页拉起支付宝支付
js网页唤起支付宝进行支付
在做uni-app项目中,打包成 ios App的时候,为了绕过苹果支付的审核,所以用的 webview 加载支付宝的网页支付,进行付款
具体实现流程:
前端通过 url 将商品单价,商品数量,商品总额等后端所需要的参数传到我们写的 html支付 页面中,
支付页面拿到参数后再像后端发起订单的请求,后端将订单返回回来,我们通过后端返回回来的订单数据,拉起支付宝发起支付!
整个过程其实不难,代码也很简单,详情请看代码......
<!DOCTYPE html>
<html lang="zh">
<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></title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function getRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
let parameter = getRequest()
$.ajax({
url: 'http://server.zhongqu.net.cn/api/user/payment/v1',
type: "post",
headers: {
'Content-Type': 'application/json;charset=utf8',
'x-access-token': parameter.token
},
dataType: "json",
data: JSON.stringify({
'goodId': parameter.goodId,
'fee': parameter.fee,
'amount': parameter.amount,
'totalFee': parameter.totalFee
}),
success: function(data) {
let temp = document.createElement("form");
temp.action = 'https://openapi.alipay.com/gateway.do?charset=utf-8'
temp.method = "post";
temp.style.display = "none";
let params = data.data;
let strs = params.split('&');
for (let v of strs) {
let arr = v.split('=');
var opt = document.createElement("input");
opt.name = arr[0];
opt.value = decodeURIComponent(arr[1]);
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
}
});
</script>
</body>
</html>
js网页拉起支付宝支付的更多相关文章
- iOS支付宝支付集成
概述 iOS支付宝支付集成 详细 代码下载:http://www.demodashi.com/demo/10729.html 支付宝和微信都是业界的老大哥,相信大家都有所觉得文档.SDK都是各种坑吧( ...
- iOS不用官方SDK实现微信和支付宝支付XHPayKit
作者:朱晓辉Allen 链接:https://juejin.im/post/5a90dd3a6fb9a0634912b755 前言 前段时间由于项目需求,移除了项目中的微信支付SDK和支付宝支付SDK ...
- C#支付宝支付接口H5版(手机网页支付)
接口官方文档 https://docs.open.alipay.com/203/107090/ 首先在Nuget 安装 Alipay /// <summary> /// 支 ...
- iOS - AliPay 支付宝支付
1.支付宝支付申请 支付宝支付官方签约集成指引 支付宝APP支付官方集成指引 蚂蚁金服开放平台 1.1 支付宝 APP 支付申请步骤 APP 支付:APP 支付是商户通过在移动端应用 APP 中集成开 ...
- $Django 支付宝支付,微信服务号推送消息 (测试需要把应用程序部署到服务器上)
一 支付宝支付 大概 支付宝支付 正式环境:需要用营业执照去申请商户号,appid 测试环境:沙箱环境:https://openhome.alipay.com/platform/appDaily.ht ...
- 微信公众号中的支付宝支付与微信支付 && 支付宝支付问题(微信bug)
一般,在微信公众号中的商城都是需要支持微信支付和支付宝支付的,当然,较大的公司对于鹅厂和阿里的站队就不说了,所以这里简单记录一下支付宝支付和微信支付的主要流程.说是简单介绍,这是因为确实不难,因为前端 ...
- H5中的微信支付、支付宝支付
微信支付的申请: 公众号支付.扫码支付等在微信公众平台.移动端的申请在微信开放平台 公众号支付流程:申请微信公众号(服务号并完成微信认证)——申请微信支付商户号(申请微信支付,资料审核通过以后,请前往 ...
- 基于python-django框架的支付宝支付案例
目录 @ 一. 开发前的准备 1. 必须了解的知识 SDK:软件开发工具包,可以为开发者提供快速开发的工具 沙箱环境:也就是测试环境 支付宝支付金额的精度:小数点后两位(面试) 支付宝用的什么加密方式 ...
- 【React Native】react-native之集成支付宝支付、微信支付
一.在使用支付宝支付.微信支付之前导入桥接好的头文件 github地址:https://github.com/xujianfu/react-native-pay 二.集成支付宝支付流程 RN支付宝需要 ...
随机推荐
- Protobuf协议--java实现
Protobuf协议,全称:Protocol Buffer 它跟JSON,XML一样,是一个规定好的数据传播格式.不过,它的序列化和反序列化的效率太变态了…… 来看看几张图你就知道它有多变态. pr ...
- 九、Appium-python-UI自动化之通过text定位
1.通过xpath定位text xpath路径为://android.widget.EditText[@text='请输入包含街道的完整地址'] 2.通过AndroidUIAutomator # 这个 ...
- Update(Stage5):Kudu入门_项目介绍_ CDH搭建
Kudu 导读 什么是 Kudu 操作 Kudu 如何设计 Kudu 的表 Table of Contents 1. 什么是 Kudu 1.1. Kudu 的应用场景 1.2. Kudu 和其它存储工 ...
- Java 基础--移位运算符
移位运算符就是在二进制的基础上对数字进行平移.按照平移的方向和填充数字的规则分为三种: <<(左移).>>(带符号右移)和>>>(无符号右移). 1.左移 按 ...
- oracle 高级函数2
原 oracle 高级函数 2017年08月17日 16:44:19 阅读数:1731 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013278 ...
- Unity - 求反射向量 (2d)
求反射向量 https://www.cnblogs.com/graphics/archive/2013/02/21/2920627.html 上面是大佬的公式可以去看一下 借的大佬的图 1.求入射向量 ...
- sourceTree的忽略文件
在没有导入项目之前,就要把忽略配置好: *~ .DS_Store xcuserdata
- BUUCTF知识记录
[强网杯 2019]随便注 先尝试普通的注入 发现注入成功了,接下来走流程的时候碰到了问题 发现过滤了select和where这个两个最重要的查询语句,不过其他的过滤很奇怪,为什么要过滤update, ...
- Lesson 14 The Butterfly Effect
Why do small errors make it impossible to predict the weather system with a high degree of accuracy? ...
- SpringMVC笔记三
课程安排: 第一天:springmvc的基础知识 什么是springmvc? springmvc框架原理(掌握) 前端控制器.处理器映射器.处理器适配器.视图解析器 springmvc入门程序 目的: ...