Comment utiliser Uniapp pour mettre en œuvre la fonction de paiement WeChat

uniapp est un framework de développement multiplateforme basé sur Vue.js, qui peut être utilisé pour développer rapidement des applications pour plusieurs plates-formes telles que des mini-programmes, des applications et H5. Dans uniapp, nous pouvons mettre en œuvre une fonction de paiement en ligne en intégrant le paiement WeChat, permettant aux utilisateurs d'acheter des biens ou des services dans l'application.

Cet article explique comment utiliser uniapp pour mettre en œuvre la fonction de paiement WeChat, notamment l'enregistrement d'un compte de paiement WeChat, la configuration des paramètres de paiement, l'appel de l'interface de paiement et d'autres étapes.

1. Enregistrez un compte de paiement WeChat
Pour utiliser la fonction de paiement WeChat, nous devons d'abord enregistrer un compte marchand de paiement WeChat. Si vous disposez déjà d'un compte officiel ou d'un mini programme WeChat, vous pouvez directement le mettre à niveau vers un compte de paiement, sinon. vous devez vous rendre sur le site officiel de paiement WeChat pour vous inscrire.

Une fois l'inscription terminée, vous devez soumettre les informations correspondantes pour l'authentification en nom réel. Après avoir réussi l'authentification, vous pouvez vous connecter à la plateforme marchande et effectuer les opérations ultérieures liées au paiement.

2. Créer une commande marchande
Après avoir terminé l'enregistrement d'un compte de paiement marchand WeChat, vous devez créer une commande dans uniapp afin que les utilisateurs puissent payer en ligne pour acheter des biens ou des services. Lors de la création d'une commande, vous devez faire attention aux paramètres suivants :

1. appId : AppID attribué par la plateforme ouverte WeChat
2. timeStamp : horodatage, le nombre de secondes entre 00:00:00 le 1er janvier 1970 ; le présent ;
3. nonceStr : chaîne aléatoire, ne dépassant pas 32 bits ;
4. package : valeur du paramètre prepay_id renvoyée par l'interface de commande unifiée, le format est le suivant : prepay_id=*
5. signType : algorithme de signature, prend actuellement en charge MD5 ;
6. paySign : signature, généralement générée en arrière-plan.

Dans uniapp, vous pouvez créer des commandes marchandes des manières suivantes :

export default {
  data() {
    return {
      appId: 'XXXXXXXXXXXXXX', // 微信开放平台分配的 AppID
      merchantId: 'XXXXXXXXXXXXX', // 微信支付分配的商户号
      amount: null, // 订单金额，单位为分 
      orderNumber: null // 自定义订单编号
    };
  },
  methods: {
    createPayOrder() {
      // 调用后台接口，获取生成商户订单参数
      let data = {
        appId: this.appId,
        merchantId: this.merchantId,
        amount: this.amount,
        orderNumber: this.orderNumber
      };

      // 发送请求，获取预支付信息
      this.$http.post('/pay/unifiedOrder', data).then(resp => {
        wx.requestPayment({
          // 获取支付信息成功后，使用官方 API 调起微信支付
          timeStamp: resp.data.timeStamp,
          nonceStr: resp.data.nonceStr,
          package: resp.data.package,
          signType: resp.data.signType,
          paySign: resp.data.paySign,
          success(res) {
            console.log('支付成功');
          },
          fail(res) {
            console.log('支付失败');
          },
          complete(res) {
            console.log('支付完成');
          }
        })
      })
    }
  }
}

3. Configurer les paramètres de paiement WeChat
Après avoir créé une commande marchande, vous devez configurer les paramètres de paiement WeChat dans uniapp, y compris le numéro de commerçant, la clé d'interface et le certificat. , etc. . Lors de la configuration des paramètres, vous devez faire attention aux points suivants :

1. Numéro du commerçant : le numéro du commerçant attribué par le paiement WeChat
2. Clé d'interface : en tant que clé de signature du commerçant, elle doit être enregistrée dans le serveur backend ;
3. Chemin du certificat : si Pour utiliser des fonctions avancées telles que les remboursements et les enveloppes rouges, vous devez télécharger des certificats sur la plateforme de paiement WeChat.

Dans uniapp, vous pouvez configurer les paramètres de paiement WeChat des manières suivantes :

function getSign(params) {
  let str = '';
  for (let key in params) {
    str += key + '=' + params[key] + '&';
  }
  str += 'key=' + API_KEY;
  return md5(str).toUpperCase();
}

function createPayParams(data) {
  let params = Object.assign({}, data, {
    appid: APP_ID, // 微信开放平台分配的 AppID 
    mch_id: MERCHANT_ID, // 微信支付分配的商户号
    nonce_str: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), // 随机字符串
    notify_url: NOTIFY_URL, // 异步通知地址，接收微信支付异步通知回调地址
    spbill_create_ip: '127.0.0.1' // 终端IP
  });

  let sign = getSign(params);

  return `
    <xml>
      <appid><![CDATA[${params.appid}]]></appid>
      <attach>支付测试</attach>
      <body>APP支付测试</body>
      <mch_id>${params.mch_id}</mch_id>
      <nonce_str>${params.nonce_str}</nonce_str>
      <notify_url>${params.notify_url}</notify_url>
      <out_trade_no>${data.orderNumber}</out_trade_no>
      <spbill_create_ip>${params.spbill_create_ip}</spbill_create_ip>
      <total_fee>${params.total_fee}</total_fee>
      <trade_type>APP</trade_type>
      <sign>${sign}</sign>
    </xml>
  `;
}

4. Appelez l'interface de paiement
Après avoir configuré les paramètres de paiement WeChat, vous pouvez appeler l'interface de paiement WeChat via l'API officielle fournie dans uniapp et passer. dans Paramètres, implémentez la fonction de paiement en ligne. Lorsque vous appelez l'interface de paiement, vous devez faire attention aux points suivants :

1. L'applet ou l'application doit disposer des autorisations de paiement WeChat
2. Vous devez transmettre les paramètres de paiement, notamment le numéro de commande du commerçant, le montant, le type de transaction, etc. .;
3. Après un paiement réussi, vous pouvez déterminer le résultat du paiement en recevant des notifications asynchrones de WeChat.

Dans uniapp, vous pouvez appeler l'interface de paiement WeChat des manières suivantes :

  let params = {
    appId: APP_ID, // 微信开放平台分配的 AppID
    partnerId: MERCHANT_ID, // 微信支付分配的商户号
    prepayId: prepayId, // 预支付交易会话标识
    package: 'Sign=WXPay', // 扩展字段，暂填写固定值 Sign=WXPay
    nonceStr: nonceStr, // 随机字符串，不长于32位
    timeStamp: timeStamp.toString(), // 时间戳
    sign: getSign({ // 根据微信支付签名算法生成签名
      appId: APP_ID,
      partnerId: MERCHANT_ID,
      prepayId: prepayId,
      package: 'Sign=WXPay',
      nonceStr: nonceStr,
      timeStamp: timeStamp.toString()
    })
  };

  wx.requestPayment({
    appId: APP_ID,
    timeStamp: timeStamp.toString(),
    nonceStr: nonceStr,
    package: params.package,
    signType: 'MD5',
    paySign: params.sign,
    success(res) {
      console.log('支付成功');
    },
    fail(res) {
      console.log('支付失败');
    }
  });

Ci-dessus sont les étapes spécifiques pour utiliser la fonction de paiement WeChat dans uniapp, y compris l'enregistrement d'un compte de paiement WeChat, la création de commandes marchandes, la configuration du paiement WeChat. paramètres, appel de l'interface de paiement, etc. Au cours du processus de développement d’une application, des fonctions de paiement parfaites peuvent améliorer considérablement l’expérience des utilisateurs lors de l’achat de biens ou de services et augmenter le taux de conversion et les revenus de l’application ou du site Web.

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!