小程序+云开发实现微信支付

最新推荐文章于 2025-01-18 11:26:57 发布

大恒大

最新推荐文章于 2025-01-18 11:26:57 发布

阅读量1.6k

点赞数

分类专栏：小程序前端文章标签：前端微信小程序

本文链接：https://blog.youkuaiyun.com/kindmb/article/details/124231372

版权

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

小程序

12 篇文章

订阅专栏

本文详细介绍了如何通过普通商户模式在小程序中接入微信支付。首先，在小程序后台关联商户号，然后在微信开发工具的云开发控制台添加商户号。接着，展示前端如何通过WXML和JS发起支付请求，并调用云函数统一下单。最后，云函数部分展示了如何使用`cloudPay.unifiedOrder`进行下单操作，并处理支付成功的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、开通微信支付

微信支付方式有三种：
1、普通商户：有自己的开发人员与团队
2、服务商：使用第三方服务接入，比较简单位
3、银行：通过银行进行清算

本例用第一种方式：

（1）在小程序后台开通微信支付或关联已开通的商户号

此步骤按后台页面提示来做，本例中是关联商户号
在这里插入图片描述

（2）

在微信开发工具中，打开云开发控制台，添加商户号
在这里插入图片描述

（3）小程序前端发起支付

wxml

 <button type="primary" bindtap="statPay" loading="{{loading}}">支付</button>

//支付函数
pay() {
//调用云函数统一下单功能
    wx.cloud.callFunction({
      name: 'pay',
      data: {           
        outTradeNo:"xxxxxxxxxx", //订单号
        price: 1 //以分为单位
      },
      success: res => {
        //处理订单支付  
        const payment = res.result.payment
        wx.requestPayment({
          ...payment,
          success: () => {
            wx.showToast({ title: '支付成功' })
            //执行某些操作
          },
          fail(err) {
            self.setData({loading: false })
            wx.showToast({icon: 'none',title: '支付失败'})
            console.error('支付失败：', err)
          }
        })
      },
      fail: err => {
        wx.showToast({icon: 'none',title: '支付失败'})
        console.error('[云函数] 调用失败：', err)
      }
    }
}

（4）云函数

pay.js

// pay云函数
const cloud = require('wx-server-sdk');
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV});
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext(); //获取openid  
  const res = await cloud.cloudPay.unifiedOrder({
    "body" : "XX商城订单",
    "subMchId":"14xxxxxx62", //小程序后台关联的商户号
    "nonceStr":Math.ceil(Math.random()*100000000).toString(), //随机数即可，用于加密
    "outTradeNo" : event.outTradeNo, //前端传来的订单号
    "spbillCreateIp" : "127.0.0.1", //客户IP，可以通过其它手段获取，此处设为127.0.0.1
    "totalFee" : event.price,   //支付数字
    "tradeType": 'JSAPI',  //小程序支付只能写JSAPI
    "openid":wxContext.OPENID,//tradeType为JSAPI时必填
    "envId": "cloud1-xxxxxxxxx",  //云开发环境名
    "functionName": "pay_cb"     //异步回调函数，本例采用同步模式，随便填
  })
  if (res['errMsg'] == 'cloudPay.unifiedOrder:ok') { // 下单成功
    //执行某些操作
  }
  return res
}