Instructions pour accéder et utiliser la fonction de paiement d'UniApp

Instructions pour accéder et utiliser la fonction de paiement d'UniApp

Avec la popularité du paiement mobile, de nombreuses applications doivent intégrer des fonctions de paiement pour faciliter aux utilisateurs d'effectuer des paiements en ligne. En tant que cadre de développement multiplateforme basé sur Vue.js, UniApp présente les caractéristiques d'un développement unique et d'une utilisation multiplateforme, et peut facilement implémenter l'accès aux fonctions de paiement. Cet article expliquera comment accéder à la fonction de paiement dans UniApp et donnera des exemples de code.

1. Accès à la fonction de paiement

1. Ajouter des autorisations de paiement dans le fichier manifest.json côté App :

"permissions": {
  "payment": {
    "description": "用于进行支付操作"
  }
}

2. Ajouter des autorisations de paiement dans le fichier manifest.json côté H5 :

"permissions": {
  "payment": {
    "description": "用于进行支付操作"
  }
}

3. Dans le mini programme Ajoutez le module de paiement au fichier import.js du composant natif :

export default {
  payment: {
    module: 'wx',
    provider: 'wxpay'
  }
}

4. Dans la page de paiement, introduisez l'objet uni.payment :

import uni from 'uni-modules'

export default {
  methods: {
    pay() {
      uni.payment.requestPayment({
        provider: 'wxpay',
        orderInfo: {...}, // 支付订单信息
        success: res => {
          console.log('支付成功', res)
        },
        fail: err => {
          console.log('支付失败', err)
        }
      })
    }
  }
}

2. Instructions d'utilisation de la fonction de paiement

1. Obtention informations sur l'ordre de paiement

Avant d'effectuer le paiement, vous devez obtenir des informations pertinentes sur l'ordre de paiement. Ces informations incluent généralement le numéro de commande, le montant du paiement, la description du produit, etc. Ces informations peuvent être obtenues en appelant l'interface côté serveur, puis transmises à la page de paiement.

2. Initier une demande de paiement

Dans la page de paiement, appelez la méthode uni.payment.requestPayment, en transmettant les informations de l'ordre de paiement et la fonction de rappel lorsque le paiement est réussi ou échoué. Cette méthode ouvrira l'interface de paiement et attendra que l'utilisateur saisisse le mot de passe de paiement ou confirme le paiement.

3. Traitement des résultats du paiement

Une fois le paiement réussi, la fonction de rappel de réussite sera déclenchée, dans laquelle la logique après la réussite du paiement peut être traitée, comme la mise à jour du statut de la commande, le passage à la page de réussite du paiement, etc.

Lorsque le paiement échoue, la fonction de rappel en cas d'échec sera déclenchée. La logique après l'échec du paiement peut être traitée dans cette fonction, par exemple en informant l'utilisateur que le paiement a échoué, en passant à la page d'échec du paiement, etc.

3. Exemples de code

L'exemple suivant est le code pour le paiement WeChat sur la page de paiement :

<script>
import uni from 'uni-modules'

export default {
  methods: {
    pay() {
      uni.payment.requestPayment({
        provider: 'wxpay',
        orderInfo: {...}, // 支付订单信息
        success: res =&gt; {
          console.log('支付成功', res)
        },
        fail: err =&gt; {
          console.log('支付失败', err)
        }
      })
    }
  }
}
</script>

4. Résumé

Cet article présente les étapes pour accéder à la fonction de paiement dans UniApp et donne des exemples de code. Grâce aux étapes ci-dessus, les développeurs peuvent facilement implémenter la fonction de paiement et ajuster le style et la logique de paiement de la page de paiement en fonction de leurs propres besoins. J'espère que cet article vous aidera à accéder à la fonction de paiement dans UniApp.

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!