Maison > interface Web > uni-app > le corps du texte

Comment utiliser Alipay pour payer avec uniapp

PHPz
Libérer: 2023-04-17 14:05:23
original
4272 Les gens l'ont consulté

Ces dernières années, le paiement mobile est devenu l'une des méthodes de transaction les plus pratiques, les plus rapides et les plus sûres. En tant que plateforme de paiement mobile la plus utilisée en Chine, Alipay est très appréciée des utilisateurs. Avec la popularité d'uniapp (un framework de développement multiplateforme basé sur Vue.js), de nombreux développeurs souhaitent également intégrer les fonctions de paiement Alipay dans uniapp. Cet article donnera une brève introduction sur la façon d'utiliser Alipay pour payer avec uniapp.

1. Inscription sur la plateforme ouverte Alipay

Avant d'utiliser Alipay pour payer, les développeurs doivent d'abord s'inscrire sur la plateforme ouverte Alipay. Après avoir accédé à la plateforme ouverte Alipay (https://opendocs.alipay.com/open), sélectionnez « Inscription à la plateforme ouverte » et remplissez les informations pertinentes pour finaliser l'inscription.

2. Intégrez le SDK Alipay

Après une inscription réussie, les développeurs doivent télécharger le SDK Alipay et l'intégrer dans le projet. Vous pouvez accéder rapidement au SDK Alipay via l'outil uni-app-plus fourni sur le site officiel d'uniapp. Le processus d'utilisation d'uni-app-plus est le suivant :

1. Installez uni-app-plus

npm install -g uni-app-plus
Copier après la connexion

2 Utilisez uni-app-plus pour créer un projet uni-app

uni-app-plus init myApp
Copier après la connexion

3. et ajoutez le plug-in Alipay

cd myApp
uni-app-plus plugin add ali-pay
Copier après la connexion

4. Après avoir ajouté le plug-in, une référence au plug-in Alipay sera automatiquement ajoutée dans manifest.json :

"plugins": {
    "ali-pay": {
      "version": "1.4.4",
      "provider": "com.baidu.capacitor.alipay.AliPaySdkPlugin"
    }
},
"compilerOptions": {
    ...
    "provider": {
      "ali-pay": {
        "alias": "ap"
      }
    }
}
Copier après la connexion

5. Utilisez l'outil HBuilderX intégré à uni-app. -plus pour le développement.

Parmi eux, le SDK Alipay doit être téléchargé depuis le centre de développement de la plateforme ouverte Alipay. Après le téléchargement, décompressez-le pour obtenir le dossier "AlipaySDK.framework" et les trois en-têtes "APAuthV2Info.h", "APOrderInfo.h". " et le fichier "APOrderService.h", faites-le glisser dans le dossier "Destination" pour terminer l'ajout du SDK.

3. Configurer les informations de paiement Alipay

Après avoir terminé l'intégration du SDK Alipay, les développeurs doivent configurer les informations de paiement Alipay. Le processus spécifique est le suivant :

1. Créez une application sur la plateforme ouverte Alipay et obtenez l'APP_ID, le PID, la PRIVATE_KEY et d'autres informations de l'application.

2. Pendant l'utilisation, configurez l'APPID, le PARTNERID, la clé privée du commerçant, la clé publique Alipay et d'autres informations dans le projet. Exemple :

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'
}
Copier après la connexion

4. Implémentation du paiement Alipay

Après avoir terminé l'intégration du SDK Alipay et la configuration des informations de paiement Alipay, vous pouvez commencer à utiliser uniapp pour implémenter la fonction de paiement Alipay.

1. Initier le paiement Alipay

Utilisez la pay() méthode du plug-in Alipay pour lancer une demande de paiement à Alipay :

ap.pay({
    orderInfo: orderInfo, // 订单信息
    privateKey: privateKey, // 商户私钥
    aliPublicKey: aliPublicKey // 支付宝公钥
}, function(retJson) {
    console.log(JSON.stringify(retJson))
})
Copier après la connexion

2. Rappel du résultat du paiement Alipay

Une fois le paiement Alipay effectué, le résultat du paiement peut être obtenu. via la méthode de rappel d'Alipay :

document.addEventListener('AlipayPayResult', function (res) {
    // res.detail.code ==> 9000支付成功 6001取消支付 4000支付失败
    ...
})
Copier après la connexion

À ce stade, nous avons implémenté avec succès la fonction de paiement en utilisant Alipay dans uniapp. D'une manière générale, seule une petite quantité de configuration et d'écriture de code est requise pour compléter cette fonction, ce qui apporte une grande commodité aux développeurs.

À l'avenir, la demande de paiements mobiles sera de plus en plus élevée. En tant que cadre de développement multiplateforme, l'intégration d'uniapp avec le SDK Alipay aura une valeur applicative extrêmement élevée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!