微信小程序实现微信支付完整流程指南

作者：工具松鼠

时间：2026-10-31

本文详细介绍在微信小程序中集成微信支付的全过程，涵盖从申请接口权限、后端获取支付参数到前端调用 wx.requestPayment 发起支付，以及处理支付成功与失败结果的完整代码示例。

文章目录

前言

微信支付为微信公众平台提供的在线支付服务，旨在为用户提供快速、便捷且安全的支付体验。在微信小程序中集成微信支付功能，能够丰富应用的服务能力，提升用户体验并创造更高的商业价值。本文将具体阐述在微信小程序中实现微信支付的操作步骤。

步骤一：申请微信支付接口权限

使用微信支付前，需在微信公众平台申请支付接口权限，并完成相关配置，包括添加支付功能的 AppID 及密钥等信息。具体操作可参考微信公众平台提供的官方文档与教程。

步骤二：引入微信支付模块

在微信小程序中，可通过调用 wx.requestPayment() 方法来唤起微信支付模块，从而执行支付流程。在调用该模块前，需确保已正确引入相关模块，并完成必要的参数设置与传递。

以下示例代码展示了如何引入微信支付模块并传递订单信息：

const app = getApp()

wx.request({
  url: 'https://example.com/pay',
  data: {
    openid: app.globalData.openid,
    total_fee: 100
  },
  success: res => {
    wx.requestPayment({
      timeStamp: res.timeStamp,
      nonceStr: res.nonceStr,
      package: res.package,
      signType: res.signType,
      paySign: res.paySign,
      success: res => {
        console.log(res)
      },
      fail: res => {
        console.log(res)
      }
    })
  }
})

在传递订单信息时，务必确保数据的安全性与准确性，防止因数据泄露或错误导致支付失败。

步骤三：处理支付结果

支付模块调用结束后，需在前端代码中添加相应逻辑以处理支付结果。可根据支付结果决定是跳转至后续页面，还是展示支付成功提示。

以下示例代码演示了如何通过 success 和 fail 参数监听支付结果：

wx.requestPayment({
  timeStamp: res.timeStamp,
  nonceStr: res.nonceStr,
  package: res.package,
  signType: res.signType,
  paySign: res.paySign,
  success: res => {
    // 支付成功，跳转到下一个页面
    wx.navigateTo({
      url: '/pages/order/success'
    })
  },
  fail: res => {
    // 支付失败，展示支付失败提示
    wx.showToast({
      title: '支付失败',
      icon: 'none'
    })
  }
})

处理支付结果时，应清晰告知用户支付状态及原因，并提供相应的解决方案或退款流程，以增强用户信任度与满意度。