Java利用沙箱支付實現電腦掃碼支付教程
一、準備工作
1、註冊支付寶開放平臺賬號,成為開發者。
地址:https://open.alipay.com/platform/home.htm
2、進入沙箱,進行配置。
3.我們可以看到這個界面
4.後面需要使用的參數
- APPID
- 商戶私鑰(使用系統默認密鑰的公鑰模式,點擊查看獲取)
- 支付寶公鑰
- 支付寶網關
5、手機上下載沙箱支付寶 (到時候支付用這個支付寶支付)
6、下載好支付寶沙箱版後,登錄支付寶提供的賬號
二、效果展示
1、隨手寫的一個前臺vue界面
2、進入確定訂單界面,可以添加商品描述
3、跳轉支付界面,利用沙箱支付寶完成支付
4、完成支付
5、跳回自己設置的界面
三、實現代碼
3.1 後臺代碼
(我這裡利用的是SpringBoot集成的SSM,當然不使用SpringBoot也可以)
3.1.1 pom.xml文件
不用全部的,重點是 :支付寶sdk包、fastjson
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zking</groupId> <artifactId>springboot02</artifactId> <version>0.0.1-SNAPSHOT</version> <name>springboot02</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <spring-boot.version>2.1.18.RELEASE</spring-boot.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.4</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.44</version> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.junit.jupiter</groupId> <artifactId>junit-jupiter</artifactId> <version>RELEASE</version> <scope>test</scope> </dependency> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.4.1</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId> <version>2.6.2</version> </dependency> <!-- 支付寶sdk包 --> <dependency> <groupId>com.alipay.sdk</groupId> <artifactId>alipay-sdk-java</artifactId> <version>3.1.0</version> </dependency> <!-- fastjson --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.48</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <!-- https://mvnrepository.com/artifact/com.alibaba/druid --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.2.6</version> </dependency> <!-- https://mvnrepository.com/artifact/log4j/log4j --> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>1.2.17</version> </dependency> </dependencies> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>${spring-boot.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.1</version> <configuration> <source>1.8</source> <target>1.8</target> <encoding>UTF-8</encoding> </configuration> </plugin> <!-- mvn mybatis-generator:generate --> <plugin> <groupId>org.mybatis.generator</groupId> <artifactId>mybatis-generator-maven-plugin</artifactId> <version>1.3.2</version> <configuration> <verbose>true</verbose> <overwrite>true</overwrite> <!--配置文件的位置--> <configurationFile>src/main/resources/generatorConfig.xml</configurationFile> </configuration> </plugin> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>2.1.18.RELEASE</version> <configuration> <mainClass>com.zking.springboot02.Springboot02Application</mainClass> </configuration> <executions> <execution> <id>repackage</id> <goals> <goal>repackage</goal> </goals> </execution> </executions> </plugin> </plugins> </build> </project>
3.1.2 model包
package com.zking.springboot02.model; import lombok.Data; /** * 支付實體對象 * 根據支付寶接口協議,其中的屬性名,必須使用下劃線,不能修改 * * @author 借我丹青妙筆 */ @Data public class AlipayBean { private static final long serialVersionUID = 1L; /** * 商戶訂單號,必填 * */ private String out_trade_no; /** * 訂單名稱,必填 */ private String subject; /** * 付款金額,必填 * 根據支付寶接口協議,必須使用下劃線 */ private String total_amount; /** * 商品描述,可空 */ private String body; /** * 超時時間參數 */ private String timeout_express= "10m"; /** * 產品編號 */ private String product_code= "FAST_INSTANT_TRADE_PAY"; public String getOut_trade_no() { return out_trade_no; } public void setOut_trade_no(String out_trade_no) { this.out_trade_no = out_trade_no; } public String getSubject() { return subject; } public void setSubject(String subject) { this.subject = subject; } public String getTotal_amount() { return total_amount; } public void setTotal_amount(String total_amount) { this.total_amount = total_amount; } public String getBody() { return body; } public void setBody(String body) { this.body = body; } }
3.1.3 utils包AlipayConfig類
(請配置好該類,防止報錯)
- appId:APPID,沙箱應用提供的
- privateKey: 商戶私鑰,點擊公鑰證書查看
- returnUrl : 支付完成後跳轉的頁面,例如我填的是:http://localhost:8088/
package com.zking.springboot02.utils; import lombok.Data; import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.PropertySource; import org.springframework.stereotype.Component; /** * 配置文件讀取 * */ @Configuration @Data @Component public class AlipayConfig { /** * 應用ID,您的APPID,收款賬號既是您的APPID對應支付寶賬號 */ private String appId = ""; /** * 商戶私鑰,您的PKCS8格式RSA2私鑰 */ private String privateKey = ""; /** * 支付寶公鑰, */ private String publicKey = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAyqAN9WzWigim0/3fBK97RFZ7Juu31+DfXMVHTHSTP+4WPvr80zTiIQmT9xTFVGBgD8BBX0XELxqLQxsYQm/MgEgccHTnCKPP7Ci979YuwZyjOysdTc6BNO/6RqPZruih6wSYDJNuJUgY/hwuWi+owUDbHL7NvZ8r/TaIJvEzzhJVrTMsIBQBe66LRE7gE2avwEV8Qck9e4yexsDUD7ja1+2T1ltfHAP2u/SBOD+7PkkPgVkINPDHt4bXZ9DIhPhosiw8IidEEniXj/Ku1wtgETll/btJljhhXq98JHBlw94+yx+BQ+9s2S2CjXkxfdZDB9s+jFy80e6UIV76xxfB0QIDAQAB"; /** * 服務器異步通知頁面路徑需http://格式的完整路徑,不能加?id=123這類自定義參數 */ private String notifyUrl = "https://www.duan33f.top"; /** * 頁面跳轉同步通知頁面路徑 需http://格式的完整路徑. * 支付完成後返回的地址 */ private String returnUrl = ""; /** * 簽名方式 */ private String signType = "RSA2"; /** * 字符編碼格式 */ private String charset = "utf-8"; /** * 支付寶網關 */ private String gatewayUrl = "https://openapi.alipaydev.com/gateway.do"; /** * 支付寶網關 */ private String logPath = "C:\\"; }
Alipay類
package com.zking.springboot02.utils; import com.alibaba.fastjson.JSON; import com.alipay.api.AlipayApiException; import com.alipay.api.AlipayClient; import com.alipay.api.DefaultAlipayClient; import com.alipay.api.request.AlipayTradePagePayRequest; import com.zking.springboot02.model.AlipayBean; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import javax.annotation.Resource; /** * 支付寶支付接口 * @author 借我丹青妙筆 */ @Component public class Alipay { @Autowired private AlipayConfig alipayConfig; /** * 支付接口 * @param alipayBean * @return * @throws AlipayApiException */ public String pay(AlipayBean alipayBean) throws AlipayApiException { // 1、獲得初始化的AlipayClient String serverUrl = alipayConfig.getGatewayUrl(); String appId = alipayConfig.getAppId(); String privateKey = alipayConfig.getPrivateKey(); String format = "json"; String charset = alipayConfig.getCharset(); String alipayPublicKey = alipayConfig.getPublicKey(); String signType = alipayConfig.getSignType(); String returnUrl = alipayConfig.getReturnUrl(); String notifyUrl = alipayConfig.getNotifyUrl(); //System.out.println(appId); AlipayClient alipayClient = new DefaultAlipayClient(serverUrl, appId, privateKey, format, charset, alipayPublicKey, signType); // 2、設置請求參數 AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest(); // 頁面跳轉同步通知頁面路徑 alipayRequest.setReturnUrl(returnUrl); // 服務器異步通知頁面路徑 alipayRequest.setNotifyUrl(notifyUrl); // 封裝參數 alipayRequest.setBizContent(JSON.toJSONString(alipayBean)); // 3、請求支付寶進行付款,並獲取支付結果 String result = alipayClient.pageExecute(alipayRequest).getBody(); // 返回付款信息 return result; } }
3.1.4 Service包
PayService接口
package com.zking.springboot02.service; import com.alipay.api.AlipayApiException; import com.zking.springboot02.model.AlipayBean; /** * 支付服務 * @author 借我丹青妙筆 * @date Dec 12, 2018 */ public interface PayService { /** * 支付寶支付接口 * @param alipayBean * @return * @throws AlipayApiException */ String aliPay(AlipayBean alipayBean) throws AlipayApiException; }
PayServiceImpl類
package com.zking.springboot02.service.impl; import com.alipay.api.AlipayApiException; import com.zking.springboot02.model.AlipayBean; import com.zking.springboot02.service.PayService; import com.zking.springboot02.utils.Alipay; import org.springframework.stereotype.Service; import javax.annotation.Resource; @Service public class PayServiceImpl implements PayService { @Resource private Alipay alipay; @Override public String aliPay(AlipayBean alipayBean) throws AlipayApiException { return alipay.pay(alipayBean); } }
3.1.5 contorller包
payController類
package com.zking.springboot02.contorller; import com.alipay.api.AlipayApiException; import com.zking.springboot02.model.AlipayBean; import com.zking.springboot02.service.PayService; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.HashMap; import java.util.Map; @RestController @RequestMapping("/pay") @CrossOrigin public class PayController { @Resource private PayService payService; /** * 阿裡支付 * @param alipayBean * @return * @throws AlipayApiException */ @PostMapping("/alipay") public Map alipay(AlipayBean alipayBean) throws AlipayApiException { System.out.println(alipayBean); Map<String,Object> map = new HashMap<String,Object>(); String str = payService.aliPay(alipayBean); System.out.println(str); map.put("msg",str); map.put("code",0); // return map; } }
3.1.6 application.yml文件
server: port: 8080 #端口號 servlet: context-path: /s02 #項目名
3.2 前臺代碼
(前臺是利用腳手架搭建的Vue項目)
3.2.1 src下api包下action.js文件
/** * 對後臺請求的地址的封裝,URL格式如下: * 模塊名_實體名_操作 */ export default { //服務器 'SERVER': 'http://localhost:8080/s02', 'alipay' : 'http://localhost:8080/s02/pay/alipay', //獲得請求的完整地址,用於mockjs測試時使用 'getFullPath': k => { return this.SERVER + this[k]; } }
3.2.2 src下api包下http.js文件
/** * vue項目對axios的全局配置 */ import axios from 'axios' import qs from 'qs' //引入action模塊,並添加至axios的類屬性urls上 import action from '@/api/action' axios.urls = action // axios默認配置 axios.defaults.timeout = 10000; // 超時時間 // axios.defaults.baseURL = 'http://localhost:8080/crm'; // 默認地址 axios.defaults.baseURL = action.SERVER; //整理數據 // 隻適用於 POST,PUT,PATCH,transformRequest` 允許在向服務器發送前,修改請求數據 axios.defaults.transformRequest = function(data) { data = qs.stringify(data); return data; }; // 請求攔截器 axios.interceptors.request.use(function(config) { // let jwt = sessionStorage.getItem('jwt'); // if (jwt) { // config.headers['jwt'] = jwt; // } return config; }, function(error) { return Promise.reject(error); }); // 響應攔截器 axios.interceptors.response.use(function(response) { return response; }, function(error) { return Promise.reject(error); }); export default axios;
3.2.3 src下router下index.js文件
import Vue from 'vue' import Router from 'vue-router' import Shop from '@/views/Shop' import buy from '@/views/buy' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Shop', component: Shop }, { path: '/buy', name: 'buy', component: buy } ] })
3.2.4 src下views下Shop.vue文件
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="out_trade_no" label="編號"> </el-table-column> <el-table-column prop="subject" label="訂單名稱" > </el-table-column> <el-table-column prop="total_amount" label="付款金額"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="toBuy(scope.row)" type="text" size="small">去支付</el-button> </template> </el-table-column> </el-table> </template> <script> export default { name: "Shop", data: function() { return { tableData: [{ out_trade_no: '101', subject: 'Java從入門到入土', total_amount: 33 }, { out_trade_no: '202', subject: 'Mysql刪庫跑路指南', total_amount: 44 }, { out_trade_no: '303', subject: 'Java編程思想', total_amount: 89 }, { out_trade_no: '404', subject: 'Java設計模式', total_amount: 56 }] }; }, methods: { toBuy(row){ console.log(row); //利用$router.push進行跳轉 this.$router.push({ //path後面跟跳轉的路由地址 path: '/buy', //name後面跟跳轉的路由名字(必須有親測,不使用命名路由會傳參失敗) name: 'buy', params: { //imgsListsUrl2是自己定義的名字,this.imgsListsUrl是要被傳遞的值 payInfo: row } }) } }, created: function() { } } </script> <style> </style>
3.2.5 src下views下buy.vue文件
<template> <div class="main"> <center> <div class="box"> <h2>確定訂單</h2> <el-form :model="payInfo" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="訂單號" prop="out_trade_no"> <el-input v-model="payInfo.out_trade_no" readonly="true"></el-input> </el-form-item> <el-form-item label="商品名稱" prop="subject"> <el-input v-model="payInfo.subject" readonly="true"></el-input> </el-form-item> <el-form-item label="商品價格" prop="total_amount"> <el-input v-model="payInfo.total_amount" readonly="true"></el-input> </el-form-item> <el-form-item label="商品描述" prop="body"> <el-input v-model="payInfo.body"></el-input> </el-form-item> <el-button type="primary" plain @click="submit" style="width: 100%;" round>付款</el-button> </el-form> </div> </center> </div> </template> <script> //import axios from 'axios' export default { name: "buy", data() { return { payInfo: { out_trade_no: '', subject: '', total_amount: null, body: '' } } }, mounted() { //this.$route.params.imgsListsUrl2是傳過來的參數 var time = new Date(); this.payInfo = this.$route.params.payInfo this.payInfo.out_trade_no = time.getTime(); }, methods: { submit() { var url = this.axios.urls.alipay;//得到api下action.js中的alipay this.axios.post(url, this.payInfo).then(resp => {//調用後臺方法 console.log(resp); const divForm = document.getElementsByTagName('div') if (divForm.length) { document.body.removeChild(divForm[0]) } const div = document.createElement('div') div.innerHTML = resp.data.msg // data就是接口返回的form 表單字符串 document.body.appendChild(div) document.forms[0].setAttribute('target', '_blank') // 新開窗口跳轉 document.forms[0].submit() }).catch(resp => { console.log(resp); }); } } } </script> <style scoped> .box { width: 800px; } .left { width: 85px; padding-top: 5px; font-size: 15px; } .right { width: 400px; } </style>
3.2.6 src下main.js文件
import Vue from 'vue' import ElementUI from 'element-ui' //新添加1 import 'element-ui/lib/theme-chalk/index.css' //新添加2,避免後期打包樣式不同,要放在import App from './App';之前 import axios from '@/api/http' //vue項目對axios的全局配置 import App from './App' import router from './router' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios) Vue.use(ElementUI) //新添加3 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
OK,重要的代碼已經完全提供瞭。
聲明:實現沙箱支付可以讓我們瞭解如何調用如支付寶的接口,讓我們理解接口的調用。
以上就是Java利用沙箱支付實現電腦掃碼支付教程的詳細內容,更多關於Java電腦掃碼支付的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- java對接支付寶支付項目的實戰記錄
- SpringBoot實現簡易支付寶網頁支付功能
- 三分鐘python搭建支付寶三方支付
- UniApp + SpringBoot 實現支付寶支付和退款功能
- SpringBoot整合Redis將對象寫入redis的實現