Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie Alipay, um mit uniapp zu bezahlen

So verwenden Sie Alipay, um mit uniapp zu bezahlen

PHPz
PHPzOriginal
2023-04-17 11:27:224317Durchsuche

Mobiles Bezahlen hat sich in den letzten Jahren zu einer der bequemeren, schnelleren und sichereren Transaktionsmethoden entwickelt. Alipay ist die am weitesten verbreitete mobile Zahlungsplattform in China und erfreut sich großer Beliebtheit bei den Nutzern. Aufgrund der Beliebtheit von Uniapp (einem plattformübergreifenden Entwicklungsframework auf Basis von Vue.js) möchten viele Entwickler auch Alipay-Zahlungsfunktionen in Uniapp integrieren. Dieser Artikel gibt eine kurze Einführung in die Verwendung der Alipay-Zahlung in uniapp.

1. Alipay Open Platform-Registrierung

Bevor Entwickler Alipay zum Bezahlen nutzen können, müssen sie sich zunächst auf der Alipay Open Platform registrieren. Nachdem Sie die offene Plattform von Alipay (https://opendocs.alipay.com/open) betreten haben, wählen Sie „Registrierung für die offene Plattform“ und geben Sie die relevanten Informationen ein, um die Registrierung abzuschließen.

2. Alipay SDK integrieren

Nach erfolgreicher Registrierung müssen Entwickler das Alipay SDK herunterladen und in das Projekt integrieren. Über das Tool uni-app-plus auf der offiziellen Website von uniapp können Sie schnell auf das Alipay SDK zugreifen. Der Vorgang zur Verwendung von uni-app-plus ist wie folgt:

1. Installieren Sie uni-app-plus

npm install -g uni-app-plus

2. Verwenden Sie uni-app-plus, um eine Uni zu erstellen -app project#🎜 🎜#

uni-app-plus init myApp
3. Rufen Sie das myApp-Verzeichnis auf und fügen Sie das Alipay-Plugin

cd myApp
uni-app-plus plugin add ali-pay
4 hinzu. in wird automatisch zur manifest.json hinzugefügt:

"plugins": {
    "ali-pay": {
      "version": "1.4.4",
      "provider": "com.baidu.capacitor.alipay.AliPaySdkPlugin"
    }
},
"compilerOptions": {
    ...
    "provider": {
      "ali-pay": {
        "alias": "ap"
      }
    }
}
# 🎜🎜#5 Verwenden Sie für die Entwicklung das in uni-app-plus integrierte HBuilderX-Tool.

Unter anderem muss das Alipay SDK vom Entwicklerzentrum der offenen Alipay-Plattform heruntergeladen werden. Entpacken Sie es nach dem Herunterladen, um den Ordner „AlipaySDK.framework“ und „APAuthV2Info.h“ zu erhalten. Ziehen Sie die drei Header-Dateien APOrderInfo.h und APOrderService.h in den Ordner „Destination“, um das Hinzufügen des SDK abzuschließen.

3. Alipay-Zahlungsinformationen konfigurieren

Nach Abschluss der Integration des Alipay SDK müssen Entwickler Alipay-Zahlungsinformationen konfigurieren. Der spezifische Prozess ist wie folgt:

1 Erstellen Sie eine Anwendung auf der offenen Alipay-Plattform und rufen Sie die APP_ID, PID, PRIVATE_KEY und andere Informationen ab.

2. Konfigurieren Sie während der Verwendung die APPID, PARTNERID, den privaten Schlüssel des Händlers, den öffentlichen Schlüssel von Alipay und andere Informationen im Projekt. Beispiel:

const ap = uni.requireNativePlugin('ali-pay') // 引入支付宝插件

const privateKey = `-----BEGIN RSA PRIVATE KEY-----
*****此处为商户私钥*****
-----END RSA PRIVATE KEY-----`
const aliPublicKey = `*****此处为支付宝公钥*****`

const orderInfo = { // 订单信息
    body: '测试商品',
    subject: '测试商品',
    out_trade_no: '1544665957487', // 订单号
    timeout_express: '30m',
    total_amount: '0.01'
}

4. Implementierung der Alipay-Zahlung

Nach Abschluss der Integration des Alipay SDK und der Konfiguration der Alipay-Zahlungsinformationen können Sie mit der Verwendung von uniapp beginnen, die Alipay-Zahlung zu implementieren Funktion.

1. Alipay-Zahlung einleiten

Verwenden Sie die

-Methode des Alipay-Plug-ins, um eine Zahlungsanforderung an Alipay zu initiieren:

ap.pay({
    orderInfo: orderInfo, // 订单信息
    privateKey: privateKey, // 商户私钥
    aliPublicKey: aliPublicKey // 支付宝公钥
}, function(retJson) {
    console.log(JSON.stringify(retJson))
})
#🎜🎜 #2. Rückruf des Alipay-Zahlungsergebnisses pay()Nach Abschluss der Alipay-Zahlung kann das Zahlungsergebnis über die Rückrufmethode von Alipay abgerufen werden:

document.addEventListener('AlipayPayResult', function (res) {
    // res.detail.code ==> 9000支付成功 6001取消支付 4000支付失败
    ...
})
Bisher haben wir das erfolgreich implementiert Funktion zur Verwendung von Alipay-Zahlungen in Uniapp. Im Allgemeinen ist nur ein geringer Konfigurations- und Code-Schreibaufwand erforderlich, um diese Funktion abzuschließen, was für Entwickler großen Komfort bietet.

In Zukunft wird die Nachfrage nach mobilem Bezahlen immer höher sein. Als plattformübergreifendes Entwicklungsframework wird die Integration von Uniapp mit Alipay SDK einen extrem hohen Anwendungswert haben.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Alipay, um mit uniapp zu bezahlen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn