Beispielcode zur Implementierung der Alipay-Sandbox-Zahlung mit Vue+SpringBoot

/* Nachfolgend sehen Sie die HTML-Datei zur Zahlungsbestätigung */
      <div style="text=#000000 bgColor=#ffffff leftMargin=0 topMargin=4">
        <header class="am-header">
          <h1>Zahlungsbestätigung</h1>
        </header>
        <div id="Haupt">
          <!-- <form name="alipayment" :model="payObject" target="_blank"> -->
          <div id="body1" class="anzeigen" name="divinhalt">
            <dl Klasse="Inhalt">
              <dt>Händlerbestellnummer:</dt>
              <dd>
                <Eingabe
                  id="WIDout_trade_no"
                  Name="WIDout_trade_no"
                  schreibgeschützt="true"
                  :Wert="Zahlobjekt.WIDout_trade_no"
                />
              </dd>
              <hr Klasse="eine_Zeile" />
              <dt>Bestellname:</dt>
              <dd>
                <Eingabe
                  id="WID-Betreff"
                  Name="WID-Betreff"
                  schreibgeschützt="true"
                  :Wert="Zahlobjekt.WIDsubject"
                />
              </dd>
              <hr Klasse="eine_Zeile" />
              <dt>Zahlungsbetrag:</dt>
              <dd>
                <Eingabe
                  id="Gesamtbetrag"
                  Name="Gesamtbetrag der WID"
                  schreibgeschützt="true"
                  :Wert="Zahlobjekt.WIDGesamtbetrag"
                />
              </dd>
              <hr Klasse="eine_Zeile" />
              <dt>Produktbeschreibung:</dt>
              <dd>
                <input id="WIDbody" name="WIDbody" readonly="true" :value="payObject.WIDbody" />
              </dd>
              <hr Klasse="eine_Zeile" />
              <dd id="btn-dd">
                <span class="new-btn-login-sp">
                  <button class="new-btn-login" style="text-align: center;" @click="paySub()">Bezahlen</button>
                </span>
                <span class="note-help">Wenn Sie auf die Schaltfläche „Bezahlen“ klicken, stimmen Sie der Durchführung des Vorgangs zu. </span>
              </dd>
            </dl>
          </div>
          <!-- </form> -->
        </div>
      </div>

/* Nachfolgend sehen Sie das CSS-Beispiel für die Zahlungsbestätigung*/
.am-header {
  Anzeige: -webkit-box;
  Anzeige: -ms-flexbox;
  /* Anzeige: flex; */
  Breite: 100 %;
  Position: relativ;
  Polsterung: 15px 0;
  -webkit-box-sizing: Rahmenbox;
  -ms-box-sizing:Rahmenbox;
  Box-Größe: Rahmenbox;
  Hintergrund: #1d222d;
  Höhe: 50px;
  Textausrichtung: zentriert;
  -WebKit-Box-Pack: Mitte;
  -ms-flex-pack: Mitte;
  Box-Pack: Mitte;
  -webkit-box-align: zentriert;
  -ms-flex-align: zentriert;
  Box-Ausrichtung: zentriert;
}

.am-header h1 {
  -WebKit-Box-Flex: 1;
  -ms-flex: 1;
  Kastenflex: 1;
  Zeilenhöhe: 18px;
  Textausrichtung: zentriert;
  Schriftgröße: 18px;
  Schriftstärke: 300;
  Farbe: #fff;
}
#hauptsächlich {
  Breite: 100 %;
  Rand: 0 automatisch;
  Schriftgröße: 14px;
}
.zeigen {
  klar: links;
  Anzeige: Block;
}
.Inhalt {
  Rand oben: 5px;
}

.content dt {
  Breite: 100px;
  Anzeige: Inline-Block;
  schweben: links;
  Rand links: 20px;
  Farbe: #666;
  Schriftgröße: 13px;
  Rand oben: 8px;
}

.Inhalt dd {
  Rand links: 120px;
  Rand unten: 5px;
}

.content dd Eingabe {
  Breite: 85 %;
  Höhe: 28px;
  Rand: 0;
  -webkit-border-radius: 0;
  -webkit-auftritt: keines;
  Eingabegliederung: keine;
}
.eine_zeile {
  Anzeige: Block;
  Höhe: 1px;
  Rand: 0;
  Rahmen oben: 1px durchgezogen #eeeeee;
  Breite: 100 %;
  Rand links: 20px;
}
#btn-dd {
  Rand: 20px;
  Textausrichtung: zentriert;
}
.neu-btn-login-sp {
  Polsterung: 1px;
  Anzeige: Inline-Block;
  Breite: 75 %;
}
.neues-btn-login {
  Hintergrundfarbe: #02aaf1;
  Farbe: #ffffff;
  Schriftstärke: fett;
  Rand: keiner;
  Breite: 100 %;
  Höhe: 50px;
  Rahmenradius: 5px;
  Schriftgröße: 16px;
}
.note-hilfe {
  Farbe: #999999;
  Schriftgröße: 12px;
  Zeilenhöhe: 100 %;
  Rand oben: 5px;
  Breite: 100 %;
  Anzeige: Block;
}

/*Von html verwendete Daten*/
      Zahlobjekt: {
        //Zahlungsdaten WIDsubject: 0,
        WIDout_trade_no: "",
        WIDtotal_amount: "",
        WIDbody: ""
      },

//Zur Zahlungsseite gehen Funktion payOrder() {
    //this.payObject.WIDsubject habe ich als Bestellnummer festgelegt, wenn ich zur Zahlungsschnittstelle springe //Beurteilen Sie, ob oid (Bestellnummer) eine Nummer ist, wenn (typeof this.payObject.WIDsubject != "string") {
      //Benutzerdaten aus SessionStorage abrufen const usertoken = sessionStorage.getItem("usertoken");
        const Benutzer = JSON.parse(sessionStorage.getItem("Benutzer"));
        // console.log(Benutzer)
        //Wenn der Benutzer normal ist (nicht leer)
        if (Benutzertoken != null) {
          if (Benutzer != null) {
            const uname = Benutzer.uname;
            //Ich bin hier, um herauszufinden, welche Bestellung bezahlt werden muss dishApi.payConfirm(this.payObject.WIDsubject).then(response => {
              const resp = Antwort.Daten;
              wenn (bzw.Code === 200) {
              //Diese sNow-Daten generieren 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());
                //Binde die Daten der Seite this.payObject.WIDout_trade_no = sNow; //Bind tradeno
                this.payObject.WIDbody = uname; //Dies ist der gebundene Benutzername this.payObject.WIDsubject = resp.oid; //Gibt den aktuellen Bestellnummernwert zurück this.payObject.WIDtotal_amount = resp.totalValue; //Gibt den Gesamtzahlungsbetrag zurück } else {
                diese.$nachricht({
                  Nachricht: bzw.Nachricht,
                  Typ: "Warnung",
                  Dauer: 500 // Verweildauer des Popups });
              }
            });
          } anders {
            diese.$nachricht({
              Meldung: "Bitte melden Sie sich zuerst an",
              Typ: "Warnung",
              Dauer: 1000 // Verweildauer des Popups });
          }
        } anders {
          diese.$nachricht({
            Meldung: "Bitte melden Sie sich zuerst an",
            Typ: "Warnung",
            Dauer: 1000 // Verweildauer des Popups });
        }
      } anders {
        diese.$nachricht({
          Meldung: "Zahlungsfehler",
          Typ: "Warnung",
          Dauer: 1000 // Verweildauer des Popups });
      }
    },

    //Zahlung startet/fordert den Benutzer auf paySub() {
      diese.$nachricht({
        showClose: wahr,
        Meldung: „Bitte schließen Sie die Zahlung innerhalb von 5 Minuten ab“,
        Dauer: 5000 // Verweildauer des Popups });

      //Zur Zahlung gehen//Hier übergibst du deine Zahlungsdaten an das Backend, also die soeben definierten und an dishApi gebundenen Daten
        .zahlen(
          dieses.payObject.WIDout_trade_no,
          this.payObject.WIDtotal_amount,
          dieses.Zahlobjekt.WIDsubject,
          dieses.payObject.WIDbody
        )
        .dann(Antwort => {
        //Die Nachbearbeitung der Hintergrundantwort erfolgt wie folgt: const r = response.data;
          wenn (r.code === 200) {
          //Dies ist die vom Backend geantwortete r. Ich habe ihre Formaktion erhalten. Was darin enthalten ist, besprechen wir später.
          //Die erfassten Daten werden zunächst im SessionStorage gespeichert, um sie später lesen zu können sessionStorage.setItem("payaction", r.formaction);
//Springen Sie dann zur Seite mit der Zahlungsoberfläche window.open("#pay", "_blank");
          } anders {
            diese.$nachricht({
              Nachricht: bzw.Nachricht,
              Typ: "Warnung",
              Dauer: 500 // Verweildauer des Popups });
          }
        });
    },

    @AntwortBody
    @PostMapping("/AliPay")
    //Hier die PayInfo-Daten vom Frontend erhalten
    öffentliches Objekt goPay(@RequestBody JSONObject payInfo,HttpServletResponse Antwort,HttpServletRequest Anfrage) löst IOException, AlipayApiException { aus.
 //Hier zuerst JSONObject jsonObject = new JSONObject();
        versuchen {
        //Hier sind die vom Front-End analysierten Daten String WIDout_trade_no = payInfo.get("WIDout_trade_no").toString();
            Zeichenfolge WIDtotal_amount = payInfo.get("WIDtotal_amount").toString();
            Zeichenfolge 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);
            //Holen Sie sich den initialisierten AlipayClient
            AlipayClient alipayClient = neuer Standard-AlipayClient (AlipayConfig.gatewayUrl, AlipayConfig.app_id, AlipayConfig.merchant_private_key, „json“, AlipayConfig.charset, AlipayConfig.alipay_public_key, AlipayConfig.sign_type);

            //Anforderungsparameter festlegen AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
            alipayRequest.setReturnUrl(AlipayConfig.return_url);
            alipayRequest.setNotifyUrl(AlipayConfig.notify_url);

// Zeichenfolge out_trade_no = neue Zeichenfolge (request.getParameter("WIDout_trade_no").getBytes("ISO-8859-1"),"UTF-8");
// //Zahlungsbetrag, erforderlich // String total_amount = new String(request.getParameter("WIDtotal_amount").getBytes("ISO-8859-1"),"UTF-8");
// //Bestellname, erforderlich// String Subject = neuer String(request.getParameter("WIDsubject").getBytes("ISO-8859-1"),"UTF-8");
// //Produktbeschreibung, optional // String body = new String(request.getParameter("WIDbody").getBytes("ISO-8859-1"),"UTF-8");

            Zeichenfolge out_trade_no = WIDout_trade_no;
            //Zahlungsbetrag, erforderlich String total_amount = WIDtotal_amount;
            //Bestellname, erforderlicher String Betreff = WIDsubject;
            //Produktbeschreibung, optional String body = WIDbody;

            // Der späteste Zahlungszeitpunkt für diese Bestellung. Die Transaktion wird geschlossen, wenn sie überfällig ist. Wertebereich: 1 m – 15 d. m-Minute, h-Stunde, d-Tag, 1c-gleicher Tag (im Fall von 1c-gleicher Tag wird die Transaktion, unabhängig davon, wann sie eröffnet wird, um 0 Uhr geschlossen). Dieser Parameterwert akzeptiert keine Dezimalstellen; beispielsweise kann 1,5 h in 90 m umgewandelt werden.
            Zeichenfolge timeout_express = "10 m";

            //Gehen Sie beispielsweise zur offiziellen API und suchen Sie nach alipayRequest.setBizContent("{\"out_trade_no\":\"" + out_trade_no + "\","
                    + "\"Gesamtbetrag\":\"" + Gesamtbetrag + "\","
                    + "\"Betreff\":\"" + Betreff + "\","
                    + "\"Körper\":\"" + Körper + "\","
                    + "\"timeout_express\":\"" + timeout_express + "\","
                    + "\"Produktcode\":\"FAST_INSTANT_TRADE_PAY\"}");


// //Anforderungsstring-Ergebnis = alipayClient.pageExecute(alipayRequest).getBody();
            //Die oben genannten sind alle von Alipay, das nächste ist von mir //Das nächste ist eine Reihe von String-Operationen. Kurz gesagt, das Button-Attribut der von Alipay zurückgegebenen Ergebnisseite wird auf nicht ausgeblendet gesetzt und einige nette Attribute werden hinzugefügt. Dann wird das Tag <script> entfernt (weil das Front-End v-html verwendet und <script> nicht anzeigen kann). Schließlich wird das gesamte geänderte Ergebnis an das Front-End gesendet und das obige Front-End schreibt den empfangenen Inhalt in sessionStorage. String befAction = result;
            StringBuffer aftAction = neuer StringBuffer(befAction);
            aftAction = aftAction.reverse();
            : String midAction = aftAction.substring(68);
            aftAction = neuer StringBuffer(midAction).reverse();
            aftAction=aftAction.append("Breite: 200px; Polsterung: 8px; Hintergrundfarbe: #428bca; Rahmenfarbe: #357ebd; Farbe: #fff; -moz-Randradius: 10px; -webkit-Randradius: 10px; Randradius: 10px; -khtml-Randradius: 10px;Textausrichtung: Mitte; Vertikalausrichtung: Mitte; Rahmen: 1px durchgehend transparent; Schriftstärke: 900; Schriftgröße: 125 % \"> </form>");
            jsonObject.put("formaction", aftAction);
            jsonObject.put("Nachricht", StateCode.SUCCESS.getMessage());
            jsonObject.put("code", StateCode.SUCCESS.getCode());
            gibt jsonObject zurück;
        }catch (Ausnahme e)
        {
            jsonObject.put("Nachricht", StateCode.SERVER_FAILED.getMessage());
            jsonObject.put("code", StateCode.SERVER_FAILED.getCode());
            gibt jsonObject zurück;
        }
    }

//Dies ist der gesamte Code der Seite, zu der Sie springen <template>
<div Klasse="oben">
<h1 class="top">Kassierer</h1>
 <div v-html="Zahlungsaktion">
</div>
</div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Zahlungsaktion: ""
    };
  },
  erstellt() {
    diese.showPayPage();
  },
  Methoden: {
    zeigeBezahlseite() {
       
      dies.$nextTick(Funktion() {
      //Wir zeigen die gerade im SessionStorage geschriebene Seite direkt auf der aktuellen Seite an. this.payaction = sessionStorage.getItem("payaction");
        //Dann löschen Sie die Daten im SessionStorage sessionStorage.removeItem("payaction");
      });
    },
  }
};
</Skript>
<Stilbereich>
.Spitze{
Rand oben: 50px;
Textausrichtung: zentriert;
vertikale Ausrichtung: Mitte;
Rand unten: 100px;
}
</Stil>