Vue+SpringBoot实现支付宝沙箱支付的示例代码

2024-04-02 19:04:59 622人浏览泡泡鱼

摘要

首先去下载支付宝沙箱的一系列东西，具体的配置什么的我就不说了，有很多博客都讲了，还有蚂蚁金服官方也说的很详细，我就直接说怎么样把后端的支付页面显示到Vue前端来：在你配置好Ali

首先去下载支付宝沙箱的一系列东西，具体的配置什么的我就不说了，有很多博客都讲了，还有蚂蚁金服官方也说的很详细，我就直接说怎么样把后端的支付页面显示到Vue前端来：

在你配置好AlipayConfig这个文件后，就可以写前端的逻辑了，前端是采用支付宝的页面如下：

下面展示一些内联代码片。



      <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



.am-header {
  display: -WEBkit-box;
  display: -ms-flexbox;
  
  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页面的数据是以下这样定义的：



      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 支付宝沙箱支付内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue+SpringBoot实现支付宝沙箱支付的示例代码

本文链接: https://www.lsjlt.com/news/129516.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue+SpringBoot实现支付宝沙箱支付的示例代码

首先去下载支付宝沙箱的一系列东西，具体的配置什么的我就不说了，有很多博客都讲了，还有蚂蚁金服官方也说的很详细，我就直接说怎么样把后端的支付页面显示到Vue前端来：在你配置好Ali...

99+

2024-04-02
SpringBoot集成支付宝沙箱支付的实现示例

目录开发前准备1、密钥工具2、沙箱环境3、内网穿透工具代码集成1、Java SDK2、支付宝配置3、支付和回调接口4、前端Vue调用开发前准备 1、密钥工具在线工具地址：https...

99+

2024-04-02
C#实现支付宝沙箱支付的项目实践

目录一，准备沙箱环境二，认识官方提供的Demo示例三，编写一个ASP.NET的程序四，开始测试一，准备沙箱环境 1，登录支付宝，进入应用列表界面 https://openhome....

99+

2024-04-02
Golang实现支付宝沙箱支付的方法步骤

首先我使用的是 gin 作为我的后端框架，我们先设定好几个接口。 func main() { r := gin.Default() r.GET("/pay", too...

99+

2023-05-16

Golang 支付宝沙箱支付 Golang 支付宝支付
Android支付宝支付的示例代码

上一篇，我们已经详细讲解了Android微信支付,今天接着为大家带来支付宝支付，支付宝支付相对微信支付要简单一些，吐槽一下，而且支付宝文档确实比微信的文档好了不少，下面开始讲解支付流程。1、首先给出官方文档的地址Android集成支付宝流程...

99+

2023-05-30

android 支付宝支付
一篇文章带你入门Springboot沙箱环境支付宝支付(附源码)

目录0.前言1.效果展示2.技术栈介绍3.前期准备第一步：申请一个沙箱测试账号第二步：电脑下载一个支付宝提供的客户端用于生成RSA2第三步：手机下载【沙箱版支付宝】4.后端搭建项目...

99+

2024-04-02
Java利用沙箱支付实现电脑扫码支付教程

目录一、准备工作二、效果展示三、实现代码3.1 后台代码3.2 前台代码一、准备工作 1、注册支付宝开放平台账号，成为开发者。地址：https://open.alipay.com/...

99+

2024-04-02
Java如何利用沙箱支付实现电脑扫码支付

这篇文章将为大家详细讲解有关Java如何利用沙箱支付实现电脑扫码支付，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、准备工作注册支付宝开放平台账号，成为开发者。地址：https://open.alipa...

99+

2023-06-29
Vue如何实现支付宝支付功能

这篇文章主要介绍了Vue如何实现支付宝支付功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。先给大家上个效果图： <div&...

99+

2024-04-02
vue项目中的支付功能实现(微信支付和支付宝支付)

目录项目中常见的支付方式支付宝支付微信支付项目中常见的支付方式支付宝支付 &nbs...

99+

2024-04-02
SpringBoot实现简易支付宝网页支付功能

该文章描述了一个基于SpringBoot程序的支付宝支付demo，由于是个人开发者而非企业，因此设...

99+

2024-04-02
UniApp + SpringBoot 实现支付宝支付和退款功能

目录开发准备支付宝支付开发后端部分前端部分支付宝退款开发后端部分上篇介绍了UniApp + SpringBoot 实现微信支付和退款功能，喜欢的朋友可以点击查看。开发准备一台用于...

99+

2024-04-02
如何进行vue项目中的支付功能实现(微信支付和支付宝支付)

如何进行vue项目中的支付功能实现(微信支付和支付宝支付)，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。项目中常见的支付方式支付宝支付...

99+

2023-06-22
Android实现支付宝支付密码输入界面

本文实例为大家分享了Android实现支付宝支付密码输入界面的具体代码，供大家参考，具体内容如下效果图：主要代码： import java.util.ArrayList; ...

99+

2024-04-02
java实现支付宝支付接口的调用

目录1.准备工作2.获取Demo （JAVA版）3.导入本地运行测试1.准备工作第一步就是先要注册一个支付宝的账号(注册这里不说，不是重点)，然后登入官方首页，去到应用列表里面找到...

99+

2024-04-02
Android实现人脸支付的示例代码

目录效果展示功能实现人脸支付密码框输入支付尾言效果展示人脸支付效果视频密码框输入支付效果视频因为密码支付时会调起系统安全键盘，开启自动保护功能，防止泄露，会导致输入密码时录屏...

99+

2024-04-02
uniapp如何实现支付宝支付的功能

随着移动互联网的飞速发展，人们越来越依赖于手机支付。而支付宝是其中使用最广泛的支付方式之一。在移动应用中，如果要进行支付宝支付的功能开发，那么使用uniapp框架就是一个非常好的选择。本文将介绍uniapp如何实现支付宝支付的功能。一、准备...

99+

2023-05-14
Java微信支付之服务号支付代码示例

Java微信支付之服务号支付实现，网上的java微信支付sdk和Demo基本上是水的，看着头疼所以我决心自己开始写Java微信支付之公众号支付，多的不说见下面源码，为了方便使用我分别用了两个Servlet，一个是统一下单Unifiedord...

99+

2023-05-30

java 微信开发 ava
React Native集成支付宝支付的实现方法

在RN应用开发过程中，集成支付宝和微信支付除了直接使用第三方的插件之，比如：react-native-yunpeng-alipay，我们还可以借助RN提供的NativeModules...

99+

2024-04-02
PHP支付宝支付函数全攻略：curl、xml、md5等函数的支付宝支付接口调用实例分析

PHP支付宝支付函数全攻略：curl、xml、md5等函数的支付宝支付接口调用实例分析支付宝是广泛使用的在线支付平台，许多网站和应用都需要集成支付宝支付功能。在PHP中，我们可以使用一些函数来调用支付宝的支付接口，实现支付功能的集成。本文将...

99+

2023-11-18

xml MD PHP支付宝支付函数全攻略：curl 接口调用实例分析