支付宝网页支付交互流程 nest 版

自己整理了一份支付宝网页支付的交互流程 , 完全按交互流程响应步骤介绍的代码，效果图。因为平时主要用node开发，所以服务端用的node，框架是 nest。 用最精简的代码实现支付功能
1，流程图
为了让下面的交互流程更清楚点，做了一张，简单粗暴，通俗易懂的流程图

步骤说明：

流程1：商品下单

说明：这是交互流程最开始的发起点，由用户在浏览器界面最先发起,类似添加到购物车功能，点击添加到购物车后，此时商家系统后台根据商品id,生成一个唯一的交易单号比如：out_trande_no 需要注意的是：此时订单状态，还不是待支付状态

后端代码：

@Post("add")
  async add(@Body() body) {
   
    if(!body.goodId){
   
      throw new BadRequestException('goodId 不能为空');
    }
    
    try {
   
     const result =  await this.goodService.findById(parseInt(body.goodId));
     if(result && result.info && result.info.id){
   
       let orderInput = {
   
          createUserId        :body.user.id,
          createUserName      :body.user.loginName,
          goodId              :body.goodId,
          goodName            :result.info.name,
          amount              :result.info.sellPrice,
          outTradeNo          :moment().format("YYYYMMDDHHmmsss")+Math.floor(Math.random()*10)
       }
       let result = await this.getOrderService().add({
   orderInput})
       return {
   code: 1000, out_trade_no:orderInput.outTradeNo}
     }else{
   
      return {
   message:'创建订单出现错误', code:455};
     }
    } catch (error) {
   
      return {
   message:error.details, code:error.code};
    } 
}

流程2: 生成商品订单号并存入数据库

说明：入库的步骤，已经在流程1中的代码里了
let result = await this.getOrderService().add({orderInput});

流程3: 订单号返回给pc端

说明：流程1，代码返回的结果，即：out_trande_no

流程4: 触发订单号支付

效果图：

说明：此时用户界面点击支付宝结算按钮触发结算付款操作, 结算对象为上面流程的 out_trande_no 当前页面可以弹出支付提示

前端请求代码：

       //弹框确认，等待更新数据信息
         open() {
   
        this.$confirm('支付完成前，请不要关闭此支付验证窗口。', '支付提示', {
   
          confirmButtonText: '支付完成',
          cancelButtonText: '支付遇到问题',
          type: 'warning',
          center: true