5分钟实现微信云小程序支付功能（含源码）

2023-09-18 19:25:09

现在许多人开始尝试着开发小程序，而小程序支付是一个非常基础但是开发者必须掌握的功能，尤其是在你开发小程序时用到了微信支付能力，那么该怎么使用呢？下面就为大家带来 5 分钟搞定微信云小程序支付功能的开发指南，同时提供代码示例。

一、准备工作

微信小程序账号 ：如果您还没有微信小程序账号，请先注册一个。
商户号 ：如果您还没有微信支付商户号，请先注册一个。
微信云开发环境 ：如果您还没有微信云开发环境，请先创建并配置一个。
Node.js 开发环境 ：您需要在本地安装 Node.js 开发环境，版本需要在 8 以上。
微信开发者工具 ：您需要在本地安装微信开发者工具。

二、实现微信云小程序支付功能

创建微信支付应用 ：在微信支付商户平台上，创建一个小程序应用，并获取您的商户号和商户秘钥。
配置微信云开发环境 ：在微信云开发控制台，选择您的项目，在「设置」选项卡中，找到「微信支付」模块，并填写您之前获取的商户号和商户秘钥。
安装微信支付 SDK ：在您的微信小程序项目中，使用 npm 安装微信支付 SDK：

npm install @cloudbase/wechat-miniprogram-sdk

初始化微信支付 SDK ：在您的微信小程序项目中，初始化微信支付 SDK：

import { initPayment } from '@cloudbase/wechat-miniprogram-sdk';

initPayment({
  envId: 'YOUR_ENV_ID', // 您的云开发环境 ID
  merchantId: 'YOUR_MERCHANT_ID', // 您的商户号
  privateKey: 'YOUR_PRIVATE_KEY' // 您的商户秘钥
});

调用微信支付接口 ：在您的微信小程序项目中，调用微信支付接口发起支付请求：

const payment = await wx.cloud.callFunction({
  name: 'pay',
  data: {
    total: 100, // 支付金额，单位为分
    description: '购买商品' // 商品
  }
});

处理支付结果 ：在您的微信小程序项目中，处理支付结果：

if (payment.result.code === 'SUCCESS') {
  // 支付成功
  wx.showToast({
    title: '支付成功',
    icon: 'success'
  });
} else {
  // 支付失败
  wx.showToast({
    title: '支付失败',
    icon: 'error'
  });
}