Sample code for implementing Alipay sandbox payment with Vue+SpringBoot

First, download a series of things from the Alipay sandbox. I won’t go into the specific configurations, as many blogs have covered them, and Ant Financial has also covered them in detail. I will just talk about how to display the backend payment page on the Vue frontend:

After you have configured the AlipayConfig file, you can write the front-end logic. The front-end uses the Alipay page as follows:

Here are some inline code snippets.

/* The following is the payment confirmation html */
      <div style="text=#000000 bgColor=#ffffff leftMargin=0 topMargin=4">
        <header class="am-header">
          <h1>Payment Confirmation</h1>
        </header>
        <div id="main">
          <!-- <form name="alipayment" :model="payObject" target="_blank"> -->
          <div id="body1" class="show" name="divcontent">
            <dl class="content">
              <dt>Merchant order number:</dt>
              <dd>
                <input
                  id="WIDout_trade_no"
                  name="WIDout_trade_no"
                  readonly="true"
                  :value="payObject.WIDout_trade_no"
                />
              </dd>
              <hr class="one_line" />
              <dt>Order Name:</dt>
              <dd>
                <input
                  id="WIDsubject"
                  name="WIDsubject"
                  readonly="true"
                  :value="payObject.WIDsubject"
                />
              </dd>
              <hr class="one_line" />
              <dt>Payment amount:</dt>
              <dd>
                <input
                  id="WIDtotal_amount"
                  name="WIDtotal_amount"
                  readonly="true"
                  :value="payObject.WIDtotal_amount"
                />
              </dd>
              <hr class="one_line" />
              <dt>Product Description:</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()">Pay</button>
                </span>
                <span class="note-help">If you click the "Pay" button, you agree to the execution of the operation. </span>
              </dd>
            </dl>
          </div>
          <!-- </form> -->
        </div>
      </div>

I add the css of this page

/* The following is the payment confirmation sample 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;
}

Of course, the data in the html page is defined as follows:

/*Data used by html*/
      payObject: {
        //Payment data WIDsubject: 0,
        WIDout_trade_no: "",
        WIDtotal_amount: "",
        WIDbody: ""
      },

Of course, when you want to open the payment page, you have to use a function to assign these data, which is the following code, see the comments for details:

//Go to the payment page function payOrder() {
    //this.payObject.WIDsubject I have set as the order number when jumping to the payment interface //Judge whether oid (order number) is a number if (typeof this.payObject.WIDsubject != "string") {
      //Get the user's data from sessionStorage const usertoken = sessionStorage.getItem("usertoken");
        const user = JSON.parse(sessionStorage.getItem("user"));
        // console.log(user)
        //If the user is normal (not empty)
        if (usertoken != null) {
          if (user != null) {
            const uname = user.uname;
            //I am here to get which order needs to be paid dishApi.payConfirm(this.payObject.WIDsubject).then(response => {
              const resp = response.data;
              if (resp.code === 200) {
              //Generate this sNow data 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());
                //Bind the data of the page this.payObject.WIDout_trade_no = sNow; //Bind tradeno
                this.payObject.WIDbody = uname; //This is the bound username this.payObject.WIDsubject = resp.oid; //Return the current order number value this.payObject.WIDtotal_amount = resp.totalValue; //Return the total payment amount } else {
                this.$message({
                  message: resp.message,
                  type: "warning",
                  duration: 500 // pop-up stay time });
              }
            });
          } else {
            this.$message({
              message: "Please log in first",
              type: "warning",
              duration: 1000 // pop-up stay time });
          }
        } else {
          this.$message({
            message: "Please log in first",
            type: "warning",
            duration: 1000 // pop-up stay time });
        }
      } else {
        this.$message({
          message: "Payment error",
          type: "warning",
          duration: 1000 // pop-up stay time });
      }
    },

Then I will explain what to do when you click Pay Now (click Pay to call the paySub() function)

    //Payment starts/prompts the user paySub() {
      this.$message({
        showClose: true,
        message: "Please complete payment within 5 minutes",
        duration: 5000 // pop-up stay time });

      //Go to payment//Here, pass your payment data to the backend, which is the data just defined and bound to dishApi
        .pay(
          this.payObject.WIDout_trade_no,
          this.payObject.WIDtotal_amount,
          this.payObject.WIDsubject,
          this.payObject.WIDbody
        )
        .then(response => {
        //Background response post-processing is as follows const r = response.data;
          if (r.code === 200) {
          //This is the r responded by the backend. I got its formaction. As for what is inside it, we will talk about it later.
          //The acquired data is first stored in sessionStorage for future reading sessionStorage.setItem("payaction", r.formaction);
//Then jump the page to the payment interface window.open("#pay", "_blank");
          } else {
            this.$message({
              message: resp.message,
              type: "warning",
              duration: 500 // pop-up stay time });
          }
        });
    },

Next, we will change the springboot backend: let's write what the backend accessed by the above dishApi.pay() is like

    @ResponseBody
    @PostMapping("/AliPay")
    //Receive the data payInfo from the front end here
    public Object goPay(@RequestBody JSONObject payInfo,HttpServletResponse response,HttpServletRequest request) throws IOException, AlipayApiException {
 //First here JSONObject jsonObject = new JSONObject();
        try {
        //Here is the data parsed from the front end 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);
            //Get the initialized AlipayClient
            AlipayClient alipayClient = new DefaultAlipayClient(AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key, "json", AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type);

            //Set request parameters 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");
// //Payment amount, required // String total_amount = new String(request.getParameter("WIDtotal_amount").getBytes("ISO-8859-1"),"UTF-8");
// //Order name, required// String subject = new String(request.getParameter("WIDsubject").getBytes("ISO-8859-1"),"UTF-8");
// //Product description, optional // String body = new String(request.getParameter("WIDbody").getBytes("ISO-8859-1"),"UTF-8");

            String out_trade_no = WIDout_trade_no;
            //Payment amount, required String total_amount = WIDtotal_amount;
            //Order name, requiredString subject = WIDsubject;
            //Product description, optional String body = WIDbody;

            // The latest payment time allowed for this order. The transaction will be closed if it is overdue. Value range: 1m～15d. m-minute, h-hour, d-day, 1c-same day (in case of 1c-same day, no matter when the transaction is opened, it will be closed at 0 o'clock). This parameter value does not accept decimal points, such as 1.5h, can be converted to 90m.
            String timeout_express = "10m";

            //For example, go to the official API to find 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\"}");


// //Request String result = alipayClient.pageExecute(alipayRequest).getBody();
            //The above are all from Alipay, the next is mine //The next is a series of string operations. In short, the button attribute of the result page returned by Alipay is set to non-hidden, and some nice attributes are added. Then the <script> tag is taken out (because the front-end uses v-html and cannot display <script>). Finally, the entire modified result is sent to the front-end, and the above front-end writes the received content into 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;
        }
    }

Next is the front-end operation. Since the front-end has just redirected the page, what we will write next is the page after the front-end jumps:

//This is the entire code of the page you jump to <template>
<div class="top">
<h1 class="top">Cashier</h1>
 <div v-html="payaction">
</div>
</div>
</template>
<script>
export default {
  data() {
    return {
      payaction: ""
    };
  },
  created() {
    this.showPayPage();
  },
  methods: {
    showPayPage() {
       
      this.$nextTick(function() {
      //We directly display the page just written in sessionStorage on the current page this.payaction = sessionStorage.getItem("payaction");
        //Then delete the data in sessionStorage sessionStorage.removeItem("payaction");
      });
    },
  }
};
</script>
<style scoped>
.top{
margin-top: 50px;
text-align: center;
vertical-align: middle;
margin-bottom: 100px;
}
</style>

At this point, all the codes are finished. If you click the payment button directly on this page, you will be redirected to the Alipay sandbox payment interface.

This is the end of this article about the sample code for Vue+SpringBoot to implement Alipay sandbox payment. For more related Vue+SpringBoot Alipay sandbox payment content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

springboot+vue+docking Alipay interface+QR code scanning payment function (sandbox environment)
Complete steps of implementing JSAPI WeChat payment with spring boot+vue

<<: After restarting the Baota panel, it prompts -ModuleNotFoundError: No module named 'geventwebsocket'

>>: MySQL 5.7.21 decompression version installation and configuration graphic tutorial