Vue+SpringBoot实现支付宝沙箱支付的示例代码
首先去下载支付宝沙箱的一系列东西，具体的配置什么的我就不说了，有很多博客都讲了，还有蚂蚁金服官方也说的很详细，我就直接说怎么样把后端的支付页面显示到Vue前端来：
在你配置好AlipayConfig这个文件后，就可以写前端的逻辑了，前端是采用支付宝的页面如下：
下面展示一些 内联代码片。
/* 以下是支付确认html */
<div style="text=#000000 bgColor=#ffffff leftMargin=0 topMargin=4">
<header class="am-header">
<h1>支付确认</h1>
</header>
<div id="main">
<!-- <form name="alipayment" :model="payObject" target="_blank"> -->
<div id="body1" class="show" name="divcontent">
<dl class="content">
<dt>商户订单号 ：</dt>
<dd>
<input
id="WIDout_trade_no"
name="WIDout_trade_no"
readonly="true"
:value="payObject.WIDout_trade_no"
/>
</dd>
<hr class="one_line" />
<dt>订单名称 ：</dt>
<dd>
<input
id="WIDsubject"
name="WIDsubject"
readonly="true"
:value="payObject.WIDsubject"
/>
</dd>
<hr class="one_line" />
<dt>付款金额 ：</dt>
<dd>
<input
id="WIDtotal_amount"
name="WIDtotal_amount"
readonly="true"
:value="payObject.WIDtotal_amount"
/>
</dd>
<hr class="one_line" />
<dt>商品描述：</dt>
<dd>
<input id="WIDbody" name="WIDbody" readonly="true" :value="payObject.WIDbody" />
</dd>
<hr class="one_line" />
<dd id="btn-dd">
<span class="new-btn-login-sp">
<button class="new-btn-login" style="text-align: center;" @click="paySub()">付 款</button>
</span>
<span class="note-help">如果您点击“付款”按钮，即表示您同意该次的执行操作。</span>
</dd>
</dl>
</div>
<!-- </form> -->
</div>
</div>
我再加上这个页面的css
/* 以下是支付确认样css*/
.am-header {
display: -webkit-box;
display: -ms-flexbox;
/* display: flex; */
width: 100%;
position: relative;
padding: 15px 0;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background: #1d222d;
height: 50px;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
box-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
box-align: center;
}
.am-header h1 {
-webkit-box-flex: 1;
-ms-flex: 1;
box-flex: 1;
line-height: 18px;
text-align: center;
font-size: 18px;
font-weight: 300;
color: #fff;
}
#main {
width: 100%;
margin: 0 auto;
font-size: 14px;
}
.show {
clear: left;
display: block;
}
.content {
margin-top: 5px;
}
.content dt {
width: 100px;
display: inline-block;
float: left;
margin-left: 20px;
color: #666;
font-size: 13px;
margin-top: 8px;
}
.content dd {
margin-left: 120px;
margin-bottom: 5px;
}
.content dd input {
width: 85%;
height: 28px;
border: 0;
-webkit-border-radius: 0;
-webkit-appearance: none;
inputoutline: none;
}
.one_line {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #eeeeee;
width: 100%;
margin-left: 20px;
}
#btn-dd {
margin: 20px;
text-align: center;
}
.new-btn-login-sp {
padding: 1px;
display: inline-block;
width: 75%;
}
.new-btn-login {
background-color: #02aaf1;
color: #ffffff;
font-weight: bold;
border: none;
width: 100%;
height: 50px;
border-radius: 5px;
font-size: 16px;
}
.note-help {
color: #999999;
font-size: 12px;
line-height: 100%;
margin-top: 5px;
width: 100%;
display: block;
}
当然，在html页面的数据是以下这样定义的：
/*html用的数据*/
payObject: {
//支付数据
WIDsubject: 0,
WIDout_trade_no: "",
WIDtotal_amount: "",
WIDbody: ""
},
当然，在你要打开支付这个页面时，你得用函数把这些数据进行赋值，就是以下代码，具体看注释：
//去往支付页面函数
payOrder() {
//this.payObject.WIDsubject这个我已经在跳转支付界面时把这个给设为订单号了
//判断oid（订单号）是否是数字
if (typeof this.payObject.WIDsubject != "string") {
//从sessionStorage拿出用户的数据
const usertoken = sessionStorage.getItem("usertoken");
const user = JSON.parse(sessionStorage.getItem("user"));
// console.log(user)
//如果用户正常（不为空）
if (usertoken != null) {
if (user != null) {
const uname = user.uname;
//我在这里去获取哪个订单需要支付
dishApi.payConfirm(this.payObject.WIDsubject).then(response => {
const resp = response.data;
if (resp.code === 200) {
//生成这个sNow数据
var vNow = new Date();
var sNow = "";
sNow += String(vNow.getFullYear());
sNow += String(vNow.getMonth() + 1);
sNow += String(vNow.getDate());
sNow += String(vNow.getHours());
sNow += String(vNow.getMinutes());
sNow += String(vNow.getSeconds());
sNow += String(vNow.getMilliseconds());
//绑定页面的data数据
this.payObject.WIDout_trade_no = sNow; //绑定tradeno
this.payObject.WIDbody = uname;//我这里是绑定的用户名
this.payObject.WIDsubject = resp.oid; //返回现在的订单号值
this.payObject.WIDtotal_amount = resp.totalValue; //返回支付总价
} else {
this.$message({
message: resp.message,
type: "warning",
duration: 500 // 弹出停留时间
});
}
});
} else {
this.$message({
message: "请先登录",
type: "warning",
duration: 1000 // 弹出停留时间
});
}
} else {
this.$message({
message: "请先登录",
type: "warning",
duration: 1000 // 弹出停留时间
});
}
} else {
this.$message({
message: "支付错误",
type: "warning",
duration: 1000 // 弹出停留时间
});
}
},
然后我在来说当你点击立即付款后怎么做（就是点击付款调用paySub()函数）
//支付开始
/给用户提示
paySub() {
this.$message({
showClose: true,
message: "请在5分钟内完成支付",
duration: 5000 // 弹出停留时间
});
//前往支付
//这里向后端传入你的支付数据，就是刚才定义的和绑定的数据
dishApi
.pay(
this.payObject.WIDout_trade_no,
this.payObject.WIDtotal_amount,
this.payObject.WIDsubject,
this.payObject.WIDbody
)
.then(response => {
//后台响应后处理如下
const r = response.data;
if (r.code === 200) {
//这是后端响应的r，我获取了它的formaction，至于这里面是什么，我们后面说，
//获取到的数据先存储在sessionStorage中，为了将来的读取
sessionStorage.setItem("payaction", r.formaction);
//然后就将页面跳转到支付的界面
window.open("#pay", "_blank");
} else {
this.$message({
message: resp.message,
type: "warning",
duration: 500 // 弹出停留时间
});
}
});
},
接下来就改springboot后端了：我们来写上面这个dishApi.pay（）访问的后端是怎么样的
@ResponseBody
@PostMapping("/AliPay")
//在这里接收前端传来的数据payInfo
public Object goPay(@RequestBody JSONObject payInfo,HttpServletResponse response,HttpServletRequest request) throws IOException, AlipayApiException {
//首先在这里
JSONObject jsonObject = new JSONObject();
try {
//这里是解析前端传来的数据
String WIDout_trade_no = payInfo.get("WIDout_trade_no").toString();
String WIDtotal_amount = payInfo.get("WIDtotal_amount").toString();
String WIDsubject = payInfo.get("WIDsubject").toString();
String WIDbody = payInfo.get("WIDbody").toString();
// System.out.println(WIDout_trade_no);System.out.println(WIDtotal_amount);System.out.println(WIDsubject);System.out.println(WIDbody);
//获得初始化的AlipayClient
AlipayClient alipayClient = new DefaultAlipayClient(AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key, "json", AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type);
//设置请求参数
AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
alipayRequest.setReturnUrl(AlipayConfig.return_url);
alipayRequest.setNotifyUrl(AlipayConfig.notify_url);
// String out_trade_no = new String(request.getParameter("WIDout_trade_no").getBytes("ISO-8859-1"),"UTF-8");
// //付款金额，必填
// String total_amount = new String(request.getParameter("WIDtotal_amount").getBytes("ISO-8859-1"),"UTF-8");
// //订单名称，必填
// String subject = new String(request.getParameter("WIDsubject").getBytes("ISO-8859-1"),"UTF-8");
// //商品描述，可空
// String body = new String(request.getParameter("WIDbody").getBytes("ISO-8859-1"),"UTF-8");
String out_trade_no = WIDout_trade_no;
//付款金额，必填
String total_amount = WIDtotal_amount;
//订单名称，必填
String subject = WIDsubject;
//商品描述，可空
String body = WIDbody;
// 该笔订单允许的最晚付款时间，逾期将关闭交易。取值范围：1m～15d。m-分钟，h-小时，d-天，1c-当天（1c-当天的情况下，无论交易何时创建，都在0点关闭）。 该参数数值不接受小数点， 如 1.5h，可转换为 90m。
String timeout_express = "10m";
//例子去官方api找
alipayRequest.setBizContent("{\"out_trade_no\":\"" + out_trade_no + "\","
+ "\"total_amount\":\"" + total_amount + "\","
+ "\"subject\":\"" + subject + "\","
+ "\"body\":\"" + body + "\","
+ "\"timeout_express\":\"" + timeout_express + "\","
+ "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");
// //请求
String result = alipayClient.pageExecute(alipayRequest).getBody() ;
//这里以上都是支付宝的，接下来是我的
//接下来是一系列的字符串操作，总之就是给支付宝返回的result页面的按钮属性设置为非hidden，并且添加了一些好看的属性，然后取出来<script>标签（因为前端用v-html不能显示<script>）最后将整个改造的result发给前端，就有了上面的前端将接收的内容写入sessionStorage的操作
String befAction = result;
StringBuffer aftAction = new StringBuffer(befAction);
aftAction = aftAction.reverse();
String midAction = aftAction.substring(68);
aftAction = new StringBuffer(midAction).reverse();
aftAction=aftAction.append(" width: 200px; padding:8px; background-color: #428bca; border-color: #357ebd; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;text-align: center; vertical-align: middle; border: 1px solid transparent; font-weight: 900; font-size:125% \"> </form>");
jsonObject.put("formaction", aftAction);
jsonObject.put("message", StateCode.SUCCESS.getMessage());
jsonObject.put("code", StateCode.SUCCESS.getCode());
return jsonObject;
}catch (Exception e)
{
jsonObject.put("message", StateCode.SERVER_FAILED.getMessage());
jsonObject.put("code", StateCode.SERVER_FAILED.getCode());
return jsonObject;
}
}
在接下来就又是前端的操作了，由于刚才前端进行了页面跳转，所以我们接下来写的是前端跳转后的那个页面：
//这是跳转到的页面的全部代码
<template>
<div class="top">
<h1 class="top">收银台</h1>
<div v-html="payaction">
</div>
</div>
</template>
<script>
export default {
data() {
return {
payaction: ""
};
},
created() {
this.showPayPage();
},
methods: {
showPayPage() {
this.$nextTick(function() {
//我们直接把刚才写在sessionStorage的页面显示在当前页面
this.payaction = sessionStorage.getItem("payaction");
//然后删除sessionStorage的数据
sessionStorage.removeItem("payaction");
});
},
}
};
</script>
<style scoped>
.top{
margin-top: 50px;
text-align: center;
vertical-align: middle;
margin-bottom: 100px;
}
</style>
至此，所有代码就结束了，你在这个页面直接点击支付按钮就会跳转到支付宝沙箱支付的界面了。
到此这篇关于Vue+SpringBoot实现支付宝沙箱支付的示例代码的文章就介绍到这了,更多相关Vue+SpringBoot 支付宝沙箱支付内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
springboot调用支付宝第三方接口(沙箱环境)
springboot+调用支付宝第三方接口(沙箱环境) 大神勿喷!! 网址:https://developers.alipay.com/platform/developerIndex.htm 沙箱环境中给测试提供了一些必要和非必要的参数,需要自己动手修改的只有RSA密钥,需要通过支付宝提供的开发工具生成RSA密钥,下载链接:https://docs.open.alipay.com/291/105971#LDsXr 下载完成安装之后,可以生成RSA密钥.生成的密钥分为应用公钥,应用私钥.应用私钥自
-
一篇文章带你入门Springboot沙箱环境支付宝支付(附源码)
目录 0.前言 1.效果展示 2.技术栈介绍 3.前期准备 第一步:申请一个沙箱测试账号 第二步:电脑下载一个支付宝提供的客户端用于生成RSA2 第三步:手机下载 [沙箱版支付宝] 4.后端搭建 项目目录结构 pom.xml application.yml application-alipay.proerties Order订单实体类 Service层 Controller层 配置类 跨域拦截器配置以及注册 启动spirngboot项目 支付操作的页面: 支付完成后支付宝回调的页面: 启动前端项
-
SpringBoot集成支付宝沙箱支付（支付、退款）
前言 支付宝推出一个沙箱环境,能够很好的模拟支付宝支付,并且还提供了demo,但demo是一个普通web项目,怎么整合到Spring Boot项目呢,其实很简单 简单配置请参照支付宝沙箱支付开发文档 一.支付部分 AlipayConfig配置:我使用的是页面跳转同步通知,返回路径return_url为公网访问地址,也可以使用localhost,且不能携带参数,APPID.商户私钥.支付宝公钥和支付宝网关换为自己的. public class AlipayConfig{ // 应用ID,您的APP
-
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
1. 什么是支付宝接口(沙箱环境)? 记录时间:2020年10月15日3:55 现如今,手机支付已相当普遍,而作为开发人员应该对手机支付操作有所了解.而支付宝接口是支付宝提供的一个接口,用来对接软件应用程序在进行金钱交易使用.然后对于编程爱好者而言,想学习这一点就有点难,因为要想使用支付宝接口,必须前提是使用软件应用程序,软件应用程序需要向支付宝申请,提交一系列资料,这一点是实现不了的.这就对开发者增加了一定的难度,因为产品没有上线,然后需要对接支付宝接口就是很大的问题,所以出现了沙箱环境,具有
-
Vue+SpringBoot实现支付宝沙箱支付的示例代码
首先去下载支付宝沙箱的一系列东西,具体的配置什么的我就不说了,有很多博客都讲了,还有蚂蚁金服官方也说的很详细,我就直接说怎么样把后端的支付页面显示到Vue前端来: 在你配置好AlipayConfig这个文件后,就可以写前端的逻辑了,前端是采用支付宝的页面如下: 下面展示一些 内联代码片. /* 以下是支付确认html */ <div style="text=#000000 bgColor=#ffffff leftMargin=0 topMargin=4"> <head
-
SpringBoot集成支付宝沙箱支付的实现示例
目录 开发前准备 1.密钥工具 2.沙箱环境 3.内网穿透工具 代码集成 1.Java SDK 2.支付宝配置 3.支付和回调接口 4.前端Vue调用 开发前准备 1.密钥工具 在线工具地址:https://miniu.alipay.com/keytool/create 无需下载,直接在线生成你的应用私钥 点击生成即可生成自己的公钥和私钥 这个公钥后面会用到叫做alipayPublicKey 这个私钥后面会用到叫做appPrivateKey 如果遇到生成失败点击链接选择Web在线加密https:
-
Laravel使用支付宝进行支付的示例代码
本文介绍了Laravel使用支付宝进行支付的示例代码,分享给大家,也给自己留个笔记 /* 支付 */ public function pay() { header("content-type:text/html;charset=utf8"); //echo 1;die; // ******************************************************配置 start********************************************
-
springboot 集成支付宝支付的示例代码
最简单的springboot集成支付宝 1 注册沙箱 沙箱是一个模拟环境登录,百度蚂蚁金服开放平台,支付宝扫码登录如下 然后沙箱需要注册一下,非常之简单,注册好以后进入到如下页面,选沙箱工具,然后下载一个生成密钥的工具.然后解压按照里面的readme生成公私密钥, 选择沙箱应用 上传公钥即可..沙箱到这里就基本完成了,里面还有沙箱版本的的android app可以下载下来. java 程序 1 新建一个springboot项目 因为我们创建的是一个web工程,所以,仅仅演示支付宝的demo,只需
-
C#实现支付宝沙箱支付的项目实践
目录 一,准备沙箱环境 二,认识官方提供的Demo示例 三,编写一个ASP.NET的程序 四,开始测试 一,准备沙箱环境 1,登录支付宝,进入 应用列表界面 https://openhome.alipay.com/dev/workspace 2,如下图选择进入沙箱 进入如下页面: 1,这里的APPID很有用2,在这里只测试网页支付,用系统默认的密钥3,查看公钥有如下界面: 需要用到的是应用私钥(非JAVA)和支付宝公钥 二,认识官方提供的Demo示例 1,下载demo示例进入网页 https:/
-
php实现微信和支付宝支付的示例代码
php实现微信支付 微信支付文档地址:https://pay.weixin.qq.com/wiki/doc/api/index.html 在php下实现微信支付,这里我使用了EasyWeChat 这里我是在Yii框架实现的,安装EasyWeChat插件 composer require jianyan74/yii2-easy-wechat 一:配置EasyWeChat 1:在config/main.php 的 component中添加EasyWeChat的SDK 'components' =>
-
Golang实现支付宝沙箱支付的方法步骤
首先我使用的是 gin 作为我的后端框架,我们先设定好几个接口. func main() { r := gin.Default() r.GET("/pay", tools.WebPageAlipay) r.GET("/return", tools.AliPayNotify) r.Run(":8100") } github.com/smartwalle/alipay 这个第三方库来作为定义了很多支付宝接口,我们直接使用这个库来继续我们的开发. 首先
-
vue组件中使用iframe元素的示例代码
本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g
-
使用Vue调取接口,并渲染数据的示例代码
刚接触vue.js框架的时候,很伤脑筋.今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家! 首先,在HTML页面引入: //引入vue.js文件 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 引入vue-resource.min.js文件,就可以引入接口方法了 <script src="https://cdn.st