Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】

在我们的项目中实现 支付宝 支付功能,其实很简单。话不多说,开门见山!

准备工作

  • 百度进入支付宝官网

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第1张图片

  • 选择我是开发者

  • 点击控制台并登录 

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第2张图片

  • 选择沙箱

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第3张图片

| 关键配置类

  • 进入沙箱之后,我们需要先将该配置类准备好
package com.alipay.config;

import java.io.FileWriter;
import java.io.IOException;

/* *
 *类名:AlipayConfig
 *功能:基础配置类
 *详细:设置帐户有关信息及返回路径
 *修改日期:2017-04-05
 *说明:
 *以下代码只是为了方便商户测试而提供的样例代码,商户可以根据自己网站的需要,按照技术文档编写,并非一定要使用该代码。
 *该代码仅供学习和研究支付宝接口使用,只是提供一个参考。
 */

public class AlipayConfig {
	
//↓↓↓↓↓↓↓↓↓↓请在这里配置您的基本信息↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

	// 应用ID,您的APPID,收款账号既是您的APPID对应支付宝账号
	public static String app_id = "";
	
	// 商户私钥,您的PKCS8格式RSA2私钥
    public static String merchant_private_key = "";
	
	// 支付宝公钥,查看地址:https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的支付宝公钥。
    public static String alipay_public_key = "";

	// 服务器异步通知页面路径  需http://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问
	public static String notify_url = "http://工程公网访问地址/alipay.trade.page.pay-JAVA-UTF-8/notify_url.jsp";

	// 页面跳转同步通知页面路径 需http://格式的完整路径,不能加?id=123这类自定义参数,必须外网可以正常访问
	public static String return_url = "http://工程公网访问地址/alipay.trade.page.pay-JAVA-UTF-8/return_url.jsp";

	// 签名方式
	public static String sign_type = "RSA2";
	
	// 字符编码格式
	public static String charset = "utf-8";
	
	// 支付宝网关
	public static String gatewayUrl = "https://openapi.alipay.com/gateway.do";
	
	// 支付宝网关
	public static String log_path = "C:\\";


//↑↑↑↑↑↑↑↑↑↑请在这里配置您的基本信息↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

    /** 
     * 写日志,方便测试(看网站需求,也可以改成把记录存入数据库)
     * @param sWord 要写入日志里的文本内容
     */
    public static void logResult(String sWord) {
        FileWriter writer = null;
        try {
            writer = new FileWriter(log_path + "alipay_log_" + System.currentTimeMillis()+".txt");
            writer.write(sWord);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (writer != null) {
                try {
                    writer.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

  • 将配置类中的各参数替换为如下图所示的沙箱应用中的信息

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第4张图片

  • 点击公钥模式的查看(对应匹配配置类字段如图所示)

 

|| 完整配置效果如图所示: 

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第5张图片

项目结合

        准备工作做好啦,接下来进入我们的项目结合环节;

| 导入支付宝依赖

        首先导入 支付宝支付 依赖;



    com.alipay.sdk
    alipay-sdk-java
    4.22.49.ALL

|| 编写测试类测试

        测试配置是否正确

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第6张图片

  • 测试成功。封装工具类

| 工具类

package com.yangdaxian.payment.utils;

import com.alibaba.fastjson.JSONObject;
import com.alipay.api.AlipayApiException;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.request.AlipayTradePagePayRequest;
import com.alipay.api.response.AlipayTradePagePayResponse;
import com.carrey.common_utils.SnowflakeIdWorker;
import com.yangdaxian.payment.config.AlipayConfig;

/**
 * @ClassName MyAlipayUtil
 * @Description TODO
 * @Author yangdaxian
 * @DATE 2022/3/5 07:33:37
 * @Version 1.0
 */
public class MyAlipayUtil {
    /**
     * @description
     * @author Benjamin Yang @date 2022/3/6 19:29:01
     * @param out_trade_no: 订单编号 唯一
     * @param total_amount: 商品/支付 价格
     * @param subject: 主题
     * @return {@link :java.lang.String}
     * @Throws
     */
    public static String createOrderForm(String out_trade_no, String total_amount, String subject) throws AlipayApiException {
        DefaultAlipayClient alipayClient = new DefaultAlipayClient(
                AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key,
                "json", AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type);
        AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();
        request.setNotifyUrl(AlipayConfig.notify_url);
        request.setReturnUrl(AlipayConfig.return_url);
        JSONObject bizContent = new JSONObject();
        bizContent.put("out_trade_no", out_trade_no);
        bizContent.put("total_amount", total_amount);
        bizContent.put("subject", subject);
        bizContent.put("product_code", "FAST_INSTANT_TRADE_PAY");
        request.setBizContent(bizContent.toJSONString());
        AlipayTradePagePayResponse response = alipayClient.pageExecute(request);
        String body = response.getBody();
        return body;
    }

    public static void main(String[] args) throws AlipayApiException {
        DefaultAlipayClient alipayClient = new DefaultAlipayClient(
                AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key,
                "json", AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type);
        AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();
        request.setNotifyUrl(AlipayConfig.notify_url);
        request.setReturnUrl(AlipayConfig.return_url);
        JSONObject bizContent = new JSONObject();
        bizContent.put("out_trade_no", SnowflakeIdWorker.generateId());
        bizContent.put("total_amount", 0.01);
        bizContent.put("subject", "测试商品");
        bizContent.put("product_code", "FAST_INSTANT_TRADE_PAY");
        request.setBizContent(bizContent.toJSONString());
        AlipayTradePagePayResponse response = alipayClient.pageExecute(request);
        String body = response.getBody();
        System.out.println(body);
        if (response.isSuccess()) {
            System.out.println("调用成功");
        } else {
            System.out.println("调用失败");
        }
    }

}

| 后端支付方法接口调用

  •  控制层的使用

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第7张图片

| 前端关键代码

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第8张图片

效果实现

  • 代码编写完成,当我们点击前端支付按钮后,便自动跳转至如下界面,代表接口调用成功,后面基本上就全自动化完成了

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第9张图片

| 账户信息在此获取

        随便充钱儿~咱也体验一下把钱当数字的感觉

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第10张图片

  • 输入密码后确认付款即可

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第11张图片

  • 交易完成,等待自动跳转

Java前后端 Vue+SpringCloud 整合 支付宝 完成支付(沙箱) 操作流程【详解】_第12张图片

        交易完成后就会自动跳转回你配置文件中指定的地址return_url,到这里我们的支付宝支付就完成啦。

--

更多功能的实现及微信支付后续文章会陆续发出..敬请关注...

祝 玩的开心~


Thanks 

你可能感兴趣的:(SpringCloud,JAVA,Vue,java,vue.js,spring-boot,spring,cloud,vue)