微信小程序实现微信支付(代码和注释很详细)

简介: 微信小程序实现微信支付(代码和注释很详细)

实现微信小程序的微信支付功能涉及多个步骤,包括配置开发环境、获取支付权限、调用微信支付接口等。以下是一个详细的步骤指南,并附带代码示例和注释。

步骤 1:配置微信小程序开发环境

1.1 注册并创建微信小程序

首先,你需要在微信公众平台上注册并创建一个微信小程序。如果你已经有小程序,请跳过这一步。

1.2 获取微信支付权限

在微信公众平台上,你需要开通微信支付功能,并获取相应的商户号和密钥。这些信息将在支付过程中使用。

步骤 2:前端代码实现

2.1 调用后端获取支付参数

在微信小程序前端,你需要调用你的后端接口,以获取支付参数。假设你的后端接口为/api/getPayParams,以下是一个示例代码:

// pages/pay/pay.js
Page({
  data: {
    orderId: '', // 订单ID
  },
 
  onLoad: function (options) {
    // 从页面参数中获取订单ID
    this.setData({
      orderId: options.orderId
    });
  },
 
  initiatePayment: function () {
    const that = this;
    wx.request({
      url: 'https://your-backend.com/api/getPayParams',
      method: 'POST',
      data: {
        orderId: that.data.orderId,
      },
      success: function (res) {
        const payParams = res.data;
        that.wxPay(payParams);
      },
      fail: function (error) {
        console.error('Failed to get payment parameters:', error);
      }
    });
  },
 
  wxPay: function (payParams) {
    wx.requestPayment({
      timeStamp: payParams.timeStamp,
      nonceStr: payParams.nonceStr,
      package: payParams.package,
      signType: payParams.signType,
      paySign: payParams.paySign,
      success: function (res) {
        console.log('Payment success:', res);
        // 处理支付成功的逻辑
      },
      fail: function (error) {
        console.error('Payment failed:', error);
        // 处理支付失败的逻辑
      }
    });
  }
});

2.2 用户点击支付按钮

在小程序页面中,你需要添加一个支付按钮,当用户点击按钮时触发支付过程:

<!-- pages/pay/pay.wxml -->
<view class="container">
  <button bindtap="initiatePayment">支付</button>
</view>

2.3 样式调整

为支付页面添加样式:

/* pages/pay/pay.wxss */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
button {
  padding: 10px 20px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

步骤 3:后端代码实现

后端需要处理获取支付参数的请求,并调用微信支付接口生成支付参数。

3.1 安装微信支付SDK

在后端项目中安装微信支付SDK。以Node.js为例,安装wechat-pay

// config/wechatPayConfig.js
const wechatPay = require('wechat-pay');
const Payment = wechatPay.Payment;
 
const initConfig = {
  partnerKey: 'YOUR_PARTNER_KEY',
  appId: 'YOUR_APP_ID',
  mchId: 'YOUR_MCH_ID',
  notifyUrl: 'https://your-backend.com/api/payNotify',
};
 
const payment = new Payment(initConfig);
 
module.exports = payment;

3.2 创建获取支付参数的接口

实现后端接口,生成支付参数并返回给前端:

// routes/payment.js
const express = require('express');
const router = express.Router();
const payment = require('../config/wechatPayConfig');
 
router.post('/getPayParams', async (req, res) => {
  const { orderId } = req.body;
 
  const order = {
    body: 'Product description',
    attach: 'Additional data',
    out_trade_no: orderId,
    total_fee: 100, // 金额,单位为分
    spbill_create_ip: req.ip,
    notify_url: 'https://your-backend.com/api/payNotify',
    trade_type: 'JSAPI',
    openid: 'USER_OPENID', // 从前端获取用户的openid
  };
 
  try {
    const payParams = await payment.getBrandWCPayRequestParams(order);
    res.json(payParams);
  } catch (error) {
    console.error('Failed to generate payment parameters:', error);
    res.status(500).send('Error generating payment parameters');
  }
});
 
module.exports = router;

3.3 处理支付结果通知

微信支付成功后会发送异步通知到你的服务器,你需要处理这个通知:

// routes/payment.js
router.post('/payNotify', async (req, res) => {
  const xmlData = req.body;
 
  payment.validate(xmlData, (err, result) => {
    if (err) {
      console.error('Payment notification validation failed:', err);
      res.status(400).send('Validation failed');
      return;
    }
 
    // 处理支付结果
    const { out_trade_no, result_code } = result;
 
    if (result_code === 'SUCCESS') {
      // 更新订单状态
      console.log(`Order ${out_trade_no} payment success`);
      res.send('SUCCESS');
    } else {
      console.error(`Order ${out_trade_no} payment failed`);
      res.send('FAIL');
    }
  });
});
 
module.exports = router;

3.4 后端服务入口文件

最后,确保你的后端服务入口文件正确配置了路由:

// app.js
const express = require('express');
const bodyParser = require('body-parser');
const paymentRoutes = require('./routes/payment');
 
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
 
app.use('/api', paymentRoutes);
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

总结

以上内容涵盖了在微信小程序中实现微信支付的完整流程,包括前端代码和后端代码的详细示例和注释。通过这些步骤,你可以成功地在微信小程序中集成微信支付功能。

如果你在实施过程中遇到问题,建议查阅微信支付官方文档或相关社区寻求帮助。


相关文章
ly~
|
10天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
45 6
|
29天前
|
定位技术 开发工具 Python
代码让微信开屏地球转起来
这段内容介绍了如何使用Python制作一个动态旋转的地球图像,类似于微信启动画面中的地球。文章详细描述了所需准备的三个素材(地球表面、云图和微信地球的抠图),并解释了通过调整云层和地面的旋转速度来实现自然的相对运动效果的基本原理。文中还提供了一个GIF压缩工具的链接,以及部分代码示例。此外,文章最后提到了一些Python学习资源,包括学习路线、开发工具、视频教程、实战案例、练习题和面试资料。
28 0
|
28天前
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码,包括电商系统、同城拼车、博客等多种应用,涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例,适合初学者和开发者参考学习。提取码:8888,代码效果参考:http://www.603393.com/sitemap.xml。
35 2
|
1月前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
61 3
|
10天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
移动开发 小程序 前端开发
|
2月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
2月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
2月前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
2月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
328 65
下一篇
无影云桌面