So implementieren Sie die WeChat-Zahlungsfunktion mit uniapp

uniapp ist ein plattformübergreifendes Entwicklungsframework auf Basis von Vue.js, mit dem schnell Anwendungen für mehrere Plattformen wie Miniprogramme, Apps und H5 entwickelt werden können. In uniapp können wir eine Online-Zahlungsfunktion implementieren, indem wir die WeChat-Zahlung integrieren, sodass Benutzer Waren oder Dienstleistungen in der Anwendung kaufen können.

In diesem Artikel erfahren Sie, wie Sie mit uniapp die WeChat-Zahlungsfunktion implementieren, einschließlich der Registrierung eines WeChat-Zahlungskontos, der Konfiguration von Zahlungsparametern, des Aufrufs der Zahlungsschnittstelle und anderer Schritte.

1. Registrieren Sie ein WeChat-Zahlungskonto
Um die WeChat-Zahlungsfunktion nutzen zu können, müssen wir zunächst ein WeChat-Zahlungshändlerkonto registrieren. Wenn Sie bereits ein offizielles WeChat-Konto oder Miniprogramm haben, können Sie es andernfalls direkt auf ein Zahlungskonto upgraden Sie müssen zur offiziellen WeChat-Zahlungswebsite-Registrierung gehen.

Nach Abschluss der Registrierung müssen Sie die entsprechenden Informationen zur Authentifizierung mit echtem Namen übermitteln. Nach bestandener Authentifizierung können Sie sich bei der Händlerplattform anmelden und nachfolgende zahlungsbezogene Vorgänge abschließen.

2. Erstellen Sie eine Händlerbestellung
Nach Abschluss der Registrierung eines WeChat-Händlerzahlungskontos müssen Sie eine Bestellung in uniapp erstellen, damit Benutzer online für den Kauf von Waren oder Dienstleistungen bezahlen können. Beim Erstellen einer Bestellung müssen Sie auf die folgenden Parameter achten:

1. appId: Von der offenen WeChat-Plattform zugewiesene AppID;
2. timeStamp: Zeitstempel, die Anzahl der Sekunden vom 1. Januar 1970 um 00:00:00 Uhr die Gegenwart;
3. nonceStr: zufällige Zeichenfolge, nicht länger als 32 Bit;
4. package: prepay_id-Parameterwert, der von der einheitlichen Bestellschnittstelle zurückgegeben wird, das Format ist wie folgt: prepay_id=*
5. signType: Signaturalgorithmus, unterstützt derzeit MD5;
6. paySign: Signatur, normalerweise im Hintergrund generiert.

In uniapp können Sie Händlerbestellungen auf folgende Weise erstellen:

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. WeChat-Zahlungsparameter konfigurieren
Nach dem Erstellen einer Händlerbestellung müssen Sie WeChat-Zahlungsparameter in uniapp konfigurieren, einschließlich Händlernummer, Schnittstellenschlüssel, Zertifikat , usw. . Bei der Konfiguration der Parameter müssen Sie auf folgende Punkte achten:

1. Händlernummer: die von der WeChat-Zahlung zugewiesene Händlernummer;
2. Schnittstellenschlüssel: Als Schlüssel für die Händlersignatur muss er auf dem Backend-Server gespeichert werden;
3. Zertifikatspfad: Wenn Sie erweiterte Funktionen wie Rückerstattungen und rote Umschläge nutzen möchten, müssen Sie Zertifikate auf die WeChat-Zahlungsplattform hochladen.

In uniapp können Sie WeChat-Zahlungsparameter auf folgende Weise konfigurieren:

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. Rufen Sie die Zahlungsschnittstelle auf
Nachdem Sie die WeChat-Zahlungsparameter konfiguriert haben, können Sie die WeChat-Zahlungsschnittstelle über die in uniapp bereitgestellte offizielle API aufrufen und übergeben in Parametern implementieren Sie die Online-Zahlungsfunktion. Beim Aufruf der Zahlungsschnittstelle müssen Sie auf folgende Punkte achten:

1. Das Applet oder die App muss über WeChat-Zahlungsberechtigungen verfügen;
2. Sie müssen Zahlungsparameter übergeben, einschließlich Händlerbestellnummer, Betrag, Transaktionsart usw .;
3. Nach erfolgreicher Zahlung können Sie das Zahlungsergebnis ermitteln, indem Sie asynchrone Benachrichtigungen von WeChat erhalten.

In uniapp können Sie die WeChat-Zahlungsschnittstelle auf folgende Weise aufrufen:

  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('支付失败');
    }
  });

Die oben genannten Schritte sind die spezifischen Schritte zur Verwendung der WeChat-Zahlungsfunktion in uniapp, einschließlich der Registrierung eines WeChat-Zahlungskontos, der Erstellung von Händlerbestellungen und der Konfiguration der WeChat-Zahlung Parameter, Aufruf der Zahlungsschnittstelle usw. . Während des Anwendungsentwicklungsprozesses können perfekte Zahlungsfunktionen das Benutzererlebnis beim Kauf von Waren oder Dienstleistungen erheblich verbessern und die Konversionsrate und den Umsatz der Anwendung oder Website steigern.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die WeChat-Zahlungsfunktion mit uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!