1. Python技术站首页
  2. 其他
  3. Vue

vue项目中的支付功能实现(微信支付和支付宝支付)

• Vue

下面是关于Vue项目中实现微信支付和支付宝支付的完整攻略。

简介

在Vue项目中需要实现支付功能，常见的方式有微信支付和支付宝支付。微信支付目前还需要申请微信支付商户号，而支付宝支付可以使用支付宝开放平台提供的接口实现。

在项目中可以将支付功能实现为一个组件，以便在需要支付的地方引入使用。

微信支付

微信支付需要完成以下步骤：

  1. 申请微信支付商户号；
  2. 在项目中引入微信支付SDK，并配置好相关参数；
  3. 调用微信支付的接口生成预支付订单并返回相关参数；
  4. 使用微信支付的接口完成订单支付；
  5. 将支付结果同步到服务器端进行验证和记录。

引入SDK和配置参数

可以使用官方提供的微信支付SDK，也可以使用第三方库如weixin-js-sdk。以官方提供的SDK为例，可以在项目中引入以下脚本：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

同时需要配置以下参数：

// 微信支付参数
const WX_APP_ID = 'your_app_id'; // 替换为自己的APP ID
const WX_MCH_ID = 'your_mch_id'; // 替换为自己的商户号
const WX_API_KEY = 'your_api_key'; // 替换为自己的API KEY
const WX_NOTIFY_URL = 'your_notify_url'; // 替换为自己的回调地址

生成预支付订单

使用微信提供的JSAPI，可以在前端生成预支付订单。以下为示例代码：

// 生成预支付订单
createUnifiedOrder(orderId, amount) {
  // 获取OpenID
  const openid = getCurrentOpenId(); // 从LocalStorage等缓存中获取

  // 请求服务器生成预支付订单，获取到预支付订单号prepay_id
  return axios.post('/api/wxpay/createUnifiedOrder', {
    openid,
    orderId,
    amount
  }).then(response => {
    const data = response.data;

    // 使用JSAPI调起微信支付
    wx.chooseWXPay({
      timestamp: data.timestamp,
      nonceStr: data.nonceStr,
      package: `prepay_id=${data.prepay_id}`,
      signType: 'MD5',
      paySign: data.sign,
      success: function(res) {
        // 支付成功，跳转到订单详情页面
        router.push({
          name: 'OrderDetail',
          params: {
            orderId: orderId
          }
        });
      },
      fail: function(res) {
        // 支付失败，提示用户
        Toast.fail(res.errMsg);
      }
    });
  });
}

这里的/api/wxpay/createUnifiedOrder接口需要在服务器端实现。可以使用官方提供的SDK和第三方库如wechatpay-openapi。下面是一个简单的实现，仅供参考：

// 生成预支付订单
app.post('/wxpay/createUnifiedOrder', async (req, res) => {
  const nonceStr = getRandomString(32);
  const outTradeNo = uuid.v4().replace(/-/g, '');
  const totalFee = req.body.amount;
  const {openid, orderId} = req.body;

  const order = {
    // ...
  };

  // 省略调用微信支付API生成预支付订单的代码

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

完成订单支付

在用户确认支付后，微信会调用预设的回调URL并带上支付结果，我们需要做以下事情：

  1. 对支付结果进行检验，判断支付流程是否正常；
  2. 如果支付成功，更新订单状态并保存支付结果。

以下为示例代码：

// 引入微信支付sdk
const WXPay = require('weixin-pay');

// 根据配置参数创建一个微信支付对象
const wxpay = WXPay({
  appid: WX_APP_ID,
  mch_id: WX_MCH_ID,
  partner_key: WX_API_KEY,
});

// 微信支付结果回调处理
app.post('/wxpay/notify', (req, res) => {
  // 将XML格式的通知消息解析成JSON格式
  wxpay.verifySign(req.rawBody).then((result) => {
    // 验证成功
    if (result.return_code === 'SUCCESS' && result.result_code === 'SUCCESS') {
      const outTradeNo = result.out_trade_no; // 商户订单号
      const totalFee = result.total_fee; // 支付金额
      const transactionId = result.transaction_id; // 微信支付订单号

      // 根据商户订单号查询订单，判断支付是否已完成
      return db.collection('orders').findOne({outTradeNo: outTradeNo});
    } else {
      // 验证失败
      console.error(result);
    }
  }).then((order) => {
    if (!order) {
      // 订单不存在或已处理过，不作处理
      return;
    }
    // 订单支付成功，更新订单状态
    order.status = 2; // 已支付
    order.transactionId = transactionId;
    order.payTime = new Date();

    // 保存订单状态
    return db.collection('orders').updateOne({_id: order._id}, {$set: order});
  }).then(() => {
    // 返回结果
    res.send({
      return_code: 'SUCCESS'
    });
  }).catch((error) => {
    console.error(error);
    res.send({
      return_code: 'FAIL'
    });
  });
});

最后将以上代码保存为一个组件，使用时只需要在需要支付的地方引入使用即可。

支付宝支付

支付宝支付需要完成以下步骤：

  1. 在支付宝开放平台上创建应用，并获取应用的APP ID和私钥；
  2. 在项目中引入支付宝支付SDK，并配置好相关参数；
  3. 调用支付宝支付的接口生成预支付订单并返回相关参数；
  4. 使用支付宝支付的接口完成订单支付；
  5. 将支付结果同步到服务器端进行验证和记录。

引入SDK和配置参数

可以使用官方提供的支付宝SDK，也可以使用第三方库如alipay-sdk。以官方提供的SDK为例，可以在项目中引入以下脚本：

<script src="https://appx/web-view.min.js"></script>

同时需要配置以下参数：

// 支付宝支付参数
const ALIPAY_APP_ID = 'your_app_id'; // 替换为自己的APP ID
const ALIPAY_MCH_ID = 'your_mch_id'; // 替换为自己的商户号
const ALIPAY_API_KEY = 'your_api_key'; // 替换为自己的API KEY
const ALIPAY_NOTIFY_URL = 'your_notify_url'; // 替换为自己的回调地址
const ALIPAY_PUBLIC_KEY = 'your_public_key'; // 替换为自己的公钥
const ALIPAY_PRIVATE_KEY = 'your_private_key'; // 替换为自己的私钥

生成预支付订单

使用支付宝提供的SDK，可以在前端生成预支付订单。以下为示例代码：

// 生成预支付订单
createTrade(orderId, amount) {
  // 请求服务器生成预支付订单，获取到预支付订单号tradeNo
  return axios.post('/api/alipay/createTrade', {
    orderId,
    amount
  }).then(response => {
    // 装载配置
    let iv = ""; //注意这里先设置一下iv值iv是无所谓的，只是必须要有
    let data = {
      authInfo: response.data.appAuthToken, // 这里需要使用appAuthToken
      orderStr: response.data.tradeStr, // 获取到的订单信息串
    };
    let resolve = (ret) => {
      // 支付成功，跳转到订单详情页面
      router.push({
        name: 'OrderDetail',
        params: {
          orderId: orderId
        }
      });
    };
    let reject = (error) => {
      // 支付失败，提示用户
      Toast.fail(error.description);
    };
    // 打开支付宝客户端并发起支付请求
    ap.tradePay({
        orderStr: data.orderStr,
    }, (res) => {
        // 可以在这里查询订单，以确认支付结果
        resolve(res);
    }, (err) => {
        // 失败回调
        reject(err);
    });
  });
}

这里的/api/alipay/createTrade接口需要在服务器端实现。可以使用官方提供的SDK和第三方库如alipay-sdk。下面是一个简单的实现，仅供参考：

// 生成预支付订单
app.post('/alipay/createTrade', async (req, res) => {
  // 省略对参数的解析和检验
  const notifyUrl = ALIPAY_NOTIFY_URL;

  const timestamp = moment().format('YYYY-MM-DD HH:mm:ss');
  const outTradeNo = uuid.v4().replace(/-/g, '');
  const totalAmount = req.body.amount;

  const order = {
    // ...
  };

  const alipaySdk = new AlipaySdk({
    appId: ALIPAY_APP_ID,
    privateKey: ALIPAY_PRIVATE_KEY,
    gateway: 'https://openapi.alipay.com/gateway.do',
    alipayPublicKey: ALIPAY_PUBLIC_KEY,
    timeout: 5000,
    signType: 'RSA2'
  });

  // 构造请求参数
  const bizContent = {
    body: '支付宝支付',
    subject: '订单支付',
    out_trade_no: outTradeNo,
    total_amount: totalAmount,
    product_code: 'QUICK_MSECURITY_PAY'
  };
  const extendParams = {
    sys_service_provider_id: ALIPAY_MCH_ID
  };
  const requestParams = {
    notify_url: notifyUrl,
    method: 'alipay.trade.app.pay',
    timestamp: timestamp,
    version: '1.0',
    app_id: ALIPAY_APP_ID,
    biz_content: JSON.stringify(bizContent),
    sign_type: 'RSA2',
    app_auth_token: 'your_token', // 替换为自己的授权令牌
    extend_params: JSON.stringify(extendParams) // 需要传递额外参数时传递
  };

  // 发起支付宝请求
  const result = await alipaySdk.exec('alipay.trade.app.pay', requestParams);

  res.json({
    tradeStr: result,
    appAuthToken: 'your_token' // 替换为自己的授权令牌
  });
});

完成订单支付

在用户确认支付后，支付宝会调用预设的回调URL并带上支付结果，我们需要做以下事情：

  1. 对支付结果进行检验，判断支付流程是否正常；
  2. 如果支付成功，更新订单状态并保存支付结果。

以下为示例代码：

// 引入支付宝sdk
const AlipaySdk = require('alipay-sdk').default;

// 根据配置参数创建一个支付宝sdk对象
const alipaySdk = new AlipaySdk({
  appId: ALIPAY_APP_ID,
  privateKey: ALIPAY_PRIVATE_KEY,
  gateway: 'https://openapi.alipay.com/gateway.do',
  alipayPublicKey: ALIPAY_PUBLIC_KEY,
  timeout: 5000,
  signType: 'RSA2'
});

// 支付宝支付结果回调处理
app.post('/alipay/notify', async (req, res) => {
  // 将form格式的通知消息解析成JSON格式
  const data = await alipaySdk.checkNotifySign(req.body);

  // 验证成功
  if (data.code === '10000' && data.trade_status === 'TRADE_SUCCESS') {
    const outTradeNo = data.out_trade_no; // 商户订单号
    const totalAmount = data.total_amount; // 支付金额
    const tradeNo = data.trade_no; // 支付宝交易流水号

    // 根据商户订单号查询订单，判断支付是否已完成
    const order = await db.collection('orders').findOne({outTradeNo: outTradeNo});

    if (order && order.status === 1) { // 未处理的支付结果才处理
      // 订单支付成功，更新订单状态
      order.status = 2; // 已支付
      order.tradeNo = tradeNo;
      order.amount = totalAmount;
      order.payTime = new Date();

      // 保存订单状态
      await db.collection('orders').updateOne({_id: order._id}, {$set: order});
    }
    // 返回结果
    res.send('success');
  } else {
    // 验证失败
    console.error(data);
    res.send('fail');
  }
});

最后将以上代码保存为一个组件，使用时只需要在需要支付的地方引入使用即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue项目中的支付功能实现(微信支付和支付宝支付) - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • vue 内置过滤器的使用总结(附加自定义过滤器)

    下面是详细讲解“vue 内置过滤器的使用总结(附加自定义过滤器)”的完整攻略，过程中将给出两个示例来说明。 1. vue 内置过滤器 Vue 提供了一些内置的过滤器，用于快速展示数据的不同格式。这些过滤器可以在插值表达式和 v-bind 指令中使用。 1.1 文本格式化 {{message | capitalize}}: 将信息的第一个字母大写。 {{mes…

    Vue 2023年5月27日
    00

  • 详解用webpack2.0构建vue2.0超详细精简版

    下面是详解“用webpack2.0构建vue2.0超详细精简版”的完整攻略。 一、安装依赖 在开始构建项目前，我们需要先安装相关依赖，执行以下命令： npm i webpack webpack-dev-server vue vue-loader vue-template-compiler css-loader style-loader file-loader…

    Vue 2023年5月27日
    00

  • 手写vue无限滚动指令的详细过程

    关于手写Vue无限滚动指令的详细过程，我准备了以下攻略，希望对你有所帮助： 1. 确定需求 在开始手写Vue无限滚动指令之前，首先需要明确需求和具体功能。无限滚动指令可以将长列表数据分批次渲染显示，当用户滚动页面时，自动加载下一页数据，避免一次性加载全部内容。 2. 创建指令 接下来创建无限滚动指令，具体步骤如下： 2.1 注册指令 在Vue实例中，注册一个…

    Vue 2023年5月28日
    00

  • 浅谈VUE uni-app 核心知识

    浅谈VUE uni-app 核心知识 什么是uni-app？ uni-app 是一款基于Vue.js开发的跨平台应用开发框架，使用uni-app可以同时构建出能运行于多个平台（包括iOS、Android、H5等）的应用程序。 uni-app与其他跨平台开发框架相比，其最大的特点是具有接近原生应用的性能体验，同时具有极高的开发效率和代码复用性。此外，uni-a…

    Vue 2023年5月27日
    00

  • Vue学习之常用指令实例详解

    Vue学习之常用指令实例详解 一、指令的概念 Vue中的指令是Vue提供的一种特殊的属性，用于指定DOM节点的行为。指令以 v- 开头，后面跟着指令的名称，如 v-if、v-for、v-bind 等。通过指令，我们可以将Vue实例中的数据绑定到DOM元素上，实现数据的动态显示和交互效果。 二、常用指令实例详解 1. v-text v-text指令用于在DOM…

    Vue 2023年5月27日
    00

  • Vue2 响应式系统之异步队列

    当我们修改 Vue 实例数据时，Vue 会根据监听的数据属性触发响应式更新。Vue 2.x 的响应式系统包含依赖追踪和异步队列两个部分，其中异步队列主要负责缓存数据变更并批量更新 DOM，以最小代价更新视图。具体来说，异步队列可以将同一事件循环中的数据变更缓存起来，避免了对于同一数据进行多次 DOM 更新，降低了性能消耗。而且通过微任务让 DOM 更新在下一…

    Vue 2023年5月29日
    00

  • vue3使用keep alive实现前进更新后退销毁

    关于“Vue 3使用keep-alive实现前进更新后退销毁”的攻略，以下是具体步骤： 1. 确定路由结构 在使用keep-alive缓存路由时，为了避免某些路由被缓存，需要在路由配置中加上meta: {keepAlive: true}的标识。例如，我们的路由结构可能是这样的： const routes = [ { path: ‘/’, component:…

    Vue 2023年5月29日
    00

  • Vue 嵌套路由使用总结（推荐）

    Vue 嵌套路由使用总结（推荐）攻略 什么是嵌套路由？ 在 Vue 路由中，嵌套路由就是将多个组件的路由嵌套在一起，形成一个组件树结构。父路由对应的组件内部有子路由对应的组件，子路由对应的组件内部又可以嵌套更深层的路由和组件。在一个页面内，使用嵌套路由可以实现多级导航和页面切换的功能。 如何使用嵌套路由？ 1. 定义父路由和子路由 在路由配置中，我们需要定义…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部