Vue+SpringBoot 가 알 리 페 이 샌 드 박스 결 제 를 실현 하 는 예제 코드

15734 단어 VueSpringBoot지급 보물 상자 지급
먼저 알 리 페 이 샌 드 박스 의 일련의 물건 을 다운로드 하고 구체 적 인 배치 등 은 말 하지 않 겠 습 니 다.많은 블 로그 에서 말씀 드 렸 습 니 다.그리고 개미 금 복 공식 도 상세 하 게 말씀 드 렸 습 니 다.저 는 백 엔 드 결제 페이지 를 Vue 전단 에 어떻게 표시 하 는 지 직접 말씀 드 리 겠 습 니 다.
AlipayConfig 라 는 파일 을 설정 하면 전단 의 논 리 를 쓸 수 있 습 니 다.전단 은 알 리 페 이 페이지 를 사용 합 니 다.다음 과 같 습 니 다.
다음은 내 연 코드 필름 을 보 여 드 리 겠 습 니 다.

/*        html */
      <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 를 더 했다.

/*         css*/
.am-header {
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: flex; */
  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 페이지 의 데 이 터 는 다음 과 같이 정 의 됩 니 다.

/*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() {
      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 //       
            });
          }
        });
    },
다음은 spring boot 백 엔 드 를 바 꾸 겠 습 니 다.dish api.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 알 리 페 이 샌 드 박스 결제 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 응원 부탁드립니다!
위 챗 애플 릿 은 노트 의 페이지 설정 과 경로 방식 을 배 웁 니 다.
react 의 DOM 작업 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage