Detaillierte Erläuterung des Zahlungsfunktionscodes des Vue-Projekts

1. Alipay-Methode:

Alipay-Methode: Klicken Sie zum Bezahlen auf Alipay, rufen Sie die Backend-Schnittstelle (mit der Bestellnummer) auf und das Backend gibt ein Formular (HTML-Zeichenfolgenstruktur) zurück.

Senden Sie das Formular, um die Alipay-Zahlung aufzurufen

Code:

// alipayWap: Formularfragment, das von der Hintergrundschnittstelle zurückgegeben wird <div v-html="alipayWap" ref="alipayWap"></div>
Methoden: {
	zuAlipay() {
		dies.$axios.get('xxx').then(res = > {
			dies.alipayWap = res;
             // Warten Sie, bis DOM aktualisiert ist. Anschließend wird das Formular auf der Seite this.$nextTick(() => { angezeigt.
            	dies.$refs.alipayWap.children[0].submit()
          	})
		})
	}
}

2. WeChat Pay

Der Großteil der Arbeit wird vom Backend erledigt. Die Auftragsgenerierung wird vom Backend durchgeführt und mit Tencent verbunden. Das Frontend ist nur dafür verantwortlich, den vom Backend zurückgegebenen Zahlungs-QR-Code (vom Backend generiert) auf dem Terminal anzuzeigen, damit Benutzer ihn scannen können. In einigen Fällen kann sich das Frontend auch mit der Auftragsgenerierung verbinden und dann selbst den QR-Code generieren, aber diese Situation ist relativ selten.

Sie müssen eine QR-Codeseite basierend auf der vom Hintergrund zurückgegebenen URL generieren, wie in der Abbildung gezeigt

QR-Code-Anzeigecode:

Fordern Sie die Zahlungs-QR-Code-Schnittstelle des Backends an

Zum Schluss den QR-Code scannen und bezahlen.

Dies ist das Ende dieses Artikels über die Zahlungsfunktion des Vue-Projekts. Weitere relevante Inhalte zur Vue-Zahlungsfunktion finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!