h5端实现调起微信app支付

如夜了我衣衫太薄便归家靠路灯°

于 2024-07-23 09:36:59 发布

阅读量406

点赞数 2

文章标签：微信

本文链接：https://blog.csdn.net/weixin_42487883/article/details/140521107

版权

在H5端实现调起微信APP支付需要通过一系列步骤，包括配置微信支付、前端调用微信支付接口、生成支付订单、调用支付接口等。下面是详细的步骤和代码示例：

1. 配置微信支付

首先需要在微信支付商户平台上进行配置，获取商户号（MchID）和API密钥（API Key），并且确保已开通支付功能。

2. 前端代码示例

前端代码主要是生成支付订单并调用微信支付接口。这里假设你使用的是Vue.js框架，其他框架类似。

HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
  <title>微信支付</title>
  <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
  <button id="payBtn">微信支付</button>

  <script>
    // 微信配置
    wx.config({
      debug: false,
      appId: 'yourAppId', // 必填，公众号的唯一标识
      timestamp: 0, // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '', // 必填，签名
      jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
    });

    // 获取支付订单参数
    function getPaymentParams() {
      return fetch('https://your-backend-api.com/getPaymentParams', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          orderId: 'yourOrderId'
        })
      })
      .then(response => response.json());
    }

    // 调用微信支付
    function invokeWeChatPay(params) {
      wx.chooseWXPay({
        timestamp: params.timestamp, // 支付签名时间戳
        nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位
        package: params.package, // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
        signType: params.signType, // 签名类型，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: params.paySign, // 支付签名
        success: function (res) {
          // 支付成功后的回调函数
          alert('支付成功');
        },
        fail: function (res) {
          // 支付失败后的回调函数
          alert('支付失败');
        }
      });
    }

    document.getElementById('payBtn').addEventListener('click', function() {
      getPaymentParams().then(params => {
        invokeWeChatPay(params);
      });
    });
  </script>
</body>
</html>

代码说明：

微信配置：使用wx.config方法配置微信JS SDK，包括appId、timestamp、nonceStr和signature等。
获取支付订单参数：通过调用后台接口获取支付订单参数，包括timestamp、nonceStr、package、signType和paySign。
调用微信支付：使用wx.chooseWXPay方法调起微信支付，传入支付订单参数。

3. 后端代码示例

后端代码负责生成支付订单并返回给前端。以下是Node.js的示例代码。

Node.js代码：

const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');
const crypto = require('crypto');

const app = express();
app.use(bodyParser.json());

const appId = 'yourAppId';
const mchId = 'yourMchId';
const apiKey = 'yourApiKey';

// 生成支付订单参数
app.post('/getPaymentParams', (req, res) => {
  const orderId = req.body.orderId;
  
  // 统一下单接口
  const unifiedOrderUrl = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
  
  const nonceStr = crypto.randomBytes(16).toString('hex');
  const timestamp = Math.floor(Date.now() / 1000).toString();
  const body = '商品描述';
  const outTradeNo = orderId;
  const totalFee = 1; // 订单金额，单位为分
  const spbillCreateIp = req.ip;
  const notifyUrl = 'https://your-notify-url.com/pay/notify';
  const tradeType = 'JSAPI';
  const openId = 'yourOpenId'; // 用户的OpenID

  // 签名
  const params = {
    appid: appId,
    mch_id: mchId,
    nonce_str: nonceStr,
    body,
    out_trade_no: outTradeNo,
    total_fee: totalFee,
    spbill_create_ip: spbillCreateIp,
    notify_url: notifyUrl,
    trade_type: tradeType,
    openid: openId
  };
  
  const stringA = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&');
  const stringSignTemp = `${stringA}&key=${apiKey}`;
  const sign = crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase();
  
  const formData = `<xml>
    <appid>${appId}</appid>
    <mch_id>${mchId}</mch_id>
    <nonce_str>${nonceStr}</nonce_str>
    <sign>${sign}</sign>
    <body>${body}</body>
    <out_trade_no>${outTradeNo}</out_trade_no>
    <total_fee>${totalFee}</total_fee>
    <spbill_create_ip>${spbillCreateIp}</spbill_create_ip>
    <notify_url>${notifyUrl}</notify_url>
    <trade_type>${tradeType}</trade_type>
    <openid>${openId}</openid>
  </xml>`;

  request({
    url: unifiedOrderUrl,
    method: 'POST',
    body: formData
  }, (err, response, body) => {
    if (err) {
      res.status(500).send(err);
    } else {
      // 解析微信返回的XML数据
      const prepayId = /<prepay_id><!\[CDATA\[(.*)\]\]><\/prepay_id>/.exec(body)[1];
      const paySign = crypto.createHash('md5').update(`appId=${appId}&nonceStr=${nonceStr}&package=prepay_id=${prepayId}&signType=MD5&timeStamp=${timestamp}&key=${apiKey}`).digest('hex').toUpperCase();

      res.json({
        timestamp,
        nonceStr,
        package: `prepay_id=${prepayId}`,
        signType: 'MD5',
        paySign
      });
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

代码说明：

生成支付订单参数：接收前端传来的订单ID，生成支付订单参数，包括nonceStr、timestamp、outTradeNo、totalFee、spbillCreateIp、notifyUrl、tradeType和openId。
签名：对支付参数进行签名，生成sign。
调用统一下单接口：向微信支付的统一下单接口发送请求，获取prepayId。
返回支付参数：将prepayId、timestamp、nonceStr、package、signType和paySign返回给前端。

4. 回调处理

支付成功后，微信会回调商户服务器的通知URL。商户服务器需要对通知进行处理，并更新订单状态。

Node.js回调处理示例：

const xmlParser = require('express-xml-bodyparser');

// 微信支付回调通知
app.post('/pay/notify', xmlParser({trim: false, explicitArray: false}), (req, res) => {
  const xml = req.body.xml;
  
  const params = {
    appid: xml.appid,
    mch_id: xml.mch_id,
    nonce_str: xml.nonce_str,
    result_code: xml.result_code,
    openid: xml.openid,
    total_fee: xml.total_fee,
    out_trade_no: xml.out_trade_no
  };
  
  const stringA = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&');
  const stringSignTemp = `${stringA}&key=${apiKey}`;
  const sign = crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase();
  
  if (sign === xml.sign) {
    // 验签成功，处理业务逻辑
    if (xml.result_code === 'SUCCESS') {
      // 支付成功，更新订单状态
      // TODO: 更新数据库订单状态
      res.send('<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>');
    } else {
      res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[支付失败]]></return_msg></xml>');