尚品汇-支付宝介绍、跳转支付订单页面实现（四十六）

news2024/11/12 21:30:27

（1）支付宝介绍

（3）显示付款页面信息

（5）创建支付控制器PaymentController

（1）支付宝介绍

支付宝简介

支付宝（中国）网络技术有限公司 [1] 是国内的第三方支付平台，致力于提供“简单、安全、快速”的支付解决方案 [2] 。支付宝公司从2004年建立开始，始终以“信任”作为产品和服务的核心。旗下有“支付宝”与“支付宝钱包”两个独立品牌。自2014年第二季度开始成为当前全球最大的移动支付厂商。

当用户提交订单会跳转到选择支付渠道页面！

http://payment.gmall.com/pay.html?orderId=43

当用户点击立即支付时生成支付的二维码

使用支付宝app 进行扫码支付

过程分析

对接支付宝的准备工作

1、申请条件

1. 企业或个体工商户可申请；

2. 提供真实有效的营业执照，且支付宝账户名称需与营业执照主体一致；

3. 网站能正常访问且页面信息有完整商品内容；

4. 网站必须通过ICP备案，个体户备案需与账户主体一致。

（团购类网站不支持个体工商户签约）

支付手续费

申请步骤

支付宝商家中心中申请 https://www.alipay.com/
https://b.alipay.com/signing/productSetV2.htm?mrchportalwebServer=https%3A%2F%2Fmrchportalweb.alipay.com

一个工作日后登录到蚂蚁金服开发者中心：

可以查看到一个已经签约上线的应用。其中非常重要的是这个APPID，需要记录下来之后的程序中要用到这个参数。

点击查看

到此为止，电商网站可以访问支付宝的最基本的准备已经完成。

接下来搭建支付模块

（1）支付宝介绍

支付宝开发手册：https://docs.open.alipay.com/270/105900/

搭建service-payment

搭建方式如service-order

修改pom.xml

<?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>
   <parent>
      <groupId>com.atguigu.gmall</groupId>
      <artifactId>service</artifactId>
      <version>1.0</version>
   </parent>

   <version>1.0</version>
   <artifactId>service-payment</artifactId>
   <packaging>jar</packaging>
   <name>service-payment</name>
   <description>service-payment</description>

   <dependencies>   
<dependency>
       <groupId>com.atguigu.gmall</groupId>
       <artifactId>service-order-client</artifactId>
       <version>1.0</version>
    </dependency>
 </dependencies>

   <build>
      <finalName>service-payment</finalName>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
      </plugins>
   </build>

</project>

添加配置

bootstrap.properties

spring.application.name=service-payment
spring.profiles.active=dev
spring.cloud.nacos.discovery.server-addr=192.168.200.129:8848
spring.cloud.nacos.config.server-addr=192.168.200.129:8848
spring.cloud.nacos.config.prefix=${spring.application.name}
spring.cloud.nacos.config.file-extension=yaml
spring.cloud.nacos.config.shared-configs[0].data-id=common.yaml

启动类

package com.atguigu.gmall.payment;


@SpringBootApplication
@ComponentScan({"com.atguigu.gmall"})
@EnableDiscoveryClient
@EnableFeignClients(basePackages= {"com.atguigu.gmall"})
public class ServicePaymentApplication {

   public static void main(String[] args) {
      SpringApplication.run(ServicePaymentApplication.class, args);
   }

}

导入sdk包

https://mvnrepository.com/artifact/com.alipay.sdk/alipay-sdk-java

<!--导入支付宝支付sdk-->
<dependency>
   <groupId>com.alipay.sdk</groupId>
   <artifactId>alipay-sdk-java</artifactId>
   <version>4.8.73.ALL</version>
</dependency>

（3）显示付款页面信息

支付页面信息展示流程

在根据订单id获取订单信息接口

在service-order添加接口

OrderService接口


/**
 * 根据订单Id 查询订单信息
  * @param orderId
 * @return
 */
OrderInfo getOrderInfo(Long orderId);

实现类：


@Override
public OrderInfo getOrderInfo(Long orderId) {
    OrderInfo orderInfo = orderInfoMapper.selectById(orderId);
    QueryWrapper<OrderDetail> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("order_id", orderId);
    List<OrderDetail> orderDetailList = orderDetailMapper.selectList(queryWrapper);
    orderInfo.setOrderDetailList(orderDetailList);
    return orderInfo;
}

OrderApiController

/**
 * 内部调用获取订单
  * @param orderId
 * @return
 */
@GetMapping("inner/getOrderInfo/{orderId}")
public OrderInfo getOrderInfo(@PathVariable(value = "orderId") Long orderId){
    return orderService.getOrderInfo(orderId);
}

在service-order-client添加远程调用接口

OrderFeignClient


/**
 * 获取订单
  * @param orderId
 * @return
 */
@GetMapping("/api/order/inner/getOrderInfo/{orderId}")
OrderInfo getOrderInfo(@PathVariable(value = "orderId") Long orderId);

OrderDegradeFeignClient

@Override
public OrderInfo getOrderInfo(Long orderId) {
    return null;
}

- server-gateway模块网关配置

- id: web-payment
  uri: lb://web-all
  predicates:
  - Host=payment.gmall.com
- id: service-payment
  uri: lb://service-payment
  predicates:
  - Path=/*/payment/** # 路径匹配

（5）创建支付控制器PaymentController

Web-all模块

package com.atguigu.gmall.payment.controller;
@Controller
public class PaymentController {

    @Autowired
    private OrderFeignClient orderFeignClient;

    /**
     * 支付页
           * @param request
     * @return
     */
    @GetMapping("pay.html")
    public String success(HttpServletRequest request, Model model) {
        String orderId = request.getParameter("orderId");
        OrderInfo orderInfo = orderFeignClient.getOrderInfo(Long.parseLong(orderId));
        model.addAttribute("orderInfo", orderInfo);
        return "payment/pay";
    }
}

页面渲染


<div class="checkout-tit">
   <h4 class="tit-txt"><span class="success-icon"></span><span  class="success-info">订单提交成功，请您及时付款，以便尽快为您发货~~</span></h4>
   <div class="paymark">
      <span class="fl">请您在提交订单<em class="orange time">4小时</em>之内完成支付，超时订单会自动取消。订单号：<em th:text="${orderInfo.id}">00</em></span>
      <span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money" th:text="'￥'+${orderInfo.totalAmount}">￥1</em></span>
   </div>
</div>