三招教你怎样实现微信礼物打赏功能 「代码全」

1. 简介

微信礼物打赏功能可以为直播平台、游戏平台等提供更多的收益途径，吸引用户的精力，增加用户黏性，也成为各大互联网平台的重要功能之一。本文将介绍三种实现微信礼物打赏功能的方法，包括使用微信支付、第三方聚合支付平台以及使用云函数实现。

2. 使用微信支付实现礼物打赏

微信支付是使用微信公众号或小程序用来进行支付的接口，开发者可以使用微信支付接口来收款。下面是使用微信支付实现微信礼物打赏的步骤：

2.1. 获取微信支付的API密钥

在微信支付商户平台申请开通微信支付功能，并获取微信支付的API密钥，该密钥用于开发者发起支付请求时进行签名验证。

2.2. 收集用户支付信息

在前端页面上添加支付功能按钮，用户点击按钮后，调用微信支付接口，打开微信支付界面并收集用户支付信息，包括支付金额、商户订单号等。

function pay() {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest',
    {
      "appId": "",
      "timeStamp": ,     //时间戳
      "nonceStr" : "",    //随机字符串
      "package" : "",     //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
      "signType" : "",    //签名算法
      "paySign" : "",     //签名
    },
    function(res){
      if (res.err_msg == "get_brand_wcpay_request:ok" ) {
        //支付成功的回调处理
      }else{
        //支付失败的回调处理
      }
    }
  );
}

2.3. 发起支付订单请求

在后端服务器中使用微信支付的统一下单接口进行支付订单的生成，传递前端页面上收集到的用户支付信息以及商户API密钥，生成未付款订单。订单生成成功后，将订单信息（如订单号）返回前端页面，页面上显示付款二维码等支付信息供用户付款。

const { WXPay } = require('wx-js-utils');
const wxpay = new WXPay({
  appId: '',             //公众号或小程序唯一标识
  mchId: '',             //微信商户号
  key: '',               //API密钥
}, false);
 
const order = {
  body: '测试支付',           //商品描述
  out_trade_no: '',       //商户订单号
  total_fee: '1',         //订单金额，单位为分
  spbill_create_ip: '',   //终端IP地址
  notify_url: '',         //接收微信支付异步通知回调地址
  trade_type: 'JSAPI',
  openid: '',             //用户openid
};
 
const result = await wxpay.unifiedOrder(order);
console.log(result);

2.4. 支付成功后回调处理

用户支付成功后，微信会将支付结果异步调用开发者预先设定的回调地址，开发者在回调地址中获取支付信息，验证消息真实性，返回处理结果。订单验证通过后，将订单状态更新为已支付并发放奖励。

const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
 
const app = new Koa();
 
app.use(bodyParser());
 
app.use(async (ctx) => {
  console.log(ctx.request.body);   //支付成功后微信支付异步通知的请求数据
  const wxpay = new WXPay({
    appId: '',            //公众号或小程序唯一标识
    mchId: '',            //微信商户号
    key: '',              //API密钥
  });
  const sign = wxpay.sign(ctx.request.body);
  if (sign === ctx.request.query.sign) {
    //验证成功，更改订单状态并发放奖励
  } else {
    //验证失败
  }
});
 
app.listen(3000);

3. 使用第三方支付平台实现礼物打赏

除了使用微信支付，我们也可以选择使用第三方支付平台来实现礼物打赏功能。下面介绍使用 Ping++ 第三方支付平台实现礼物打赏的步骤：

3.1. 在 Ping++ 平台注册开发者账号并创建应用

注册开发者账号并创建自己的应用或申请加入其他人已创建的应用，审核通过即可获得开发者帐户和应用主要参数。

3.2. 引入 JS SDK 文件

在前端页面上引入 Ping++ 提供的 JS SDK 文件，该文件提供了 Ping++ 支付的接口和方法。

<script src="https://cdn.bootcss.com/pingpp-js/2.0.21/pingpp.js"></script>

3.3. 收集用户支付信息

在前端页面上添加支付功能按钮，用户点击按钮后，调用 Ping++ 的支付接口并收集用户支付信息，包括支付金额、商户订单号等。

pingpp.createPayment(charge, function(result, err) {
  if (result === "success") {
    //支付成功的回调处理
  } else if (result === "fail") {
    //支付失败的回调处理
  } else if (result === "cancel") {
    //支付取消的回调处理
  }
});

3.4. 在后端服务器生成 Ping++ 支付订单并返回支付对应的 Charge

用户在线下单成功后，服务端需要生成订单并返回符合 Ping++ 规范的 Charge 对象，其中 charge 对象包含了具体的支付信息（如订单号、支付金额等）以及开发者的一些参数和设置（如支付的标题、支付描述等）。

const rawBody = ctx.request.rawBody;  // 获取 HTTP Post 请求的原始请求体, 这里是 Node.js 后端所使用的方式
const parsedBody = JSON.parse(rawBody);
const charge = await pingpp.charges.create(parsedBody);
ctx.body = {
  charge: charge
};

3.5. 执行支付后的回调处理

用户支付成功后，Ping++ 会异步通知开发者（回调通知），开发者在接收到回调通知的时候需要对回调通知的签名进行验证，然后处理回调结果。

app.post('/webhooks/pingpp', bodyParser.urlencoded(), function(req, res) {
  const body = JSON.parse(req.body);
  const signature = req.headers['x-pingplusplus-signature'];
  const pubKey = fs.readFileSync('./key/pub_key.pem', 'utf8');  //开发者需要在 Ping++ 后台证书管理中上传自己的公钥文件
  const verified = crypto.createVerify('RSA-SHA256').update(JSON.stringify(body)).verify(pubKey, signature, 'utf8');
  if (verified) {
    //验证成功，更改订单状态并发放奖励
  } else {
    //验证失败
  }
});

4. 使用云函数实现礼物打赏

云函数是一种支持用户在云端编写、运行和管理代码的服务，无需管理服务器和运维，只需要关注代码本身的实现。下面是使用云函数实现微信礼物打赏的步骤：

4.1. 创建云函数

在云函数平台上创建云函数并设置相应的触发器。

4.2. 编写云函数业务逻辑

在创建的云函数中，编写相应的业务逻辑代码，包括验证用户支付信息、生成订单、更新订单状态等。

const app = require('tcb-admin-node');
const cloud = require('wx-server-sdk');
 
cloud.init();
 
exports.main = async (event, context) => {
  const payment = event.payment;
  const openid = event.userInfo.openId;
  const wxpay = cloud.cloudPay.getWXPay(cloud.getWXContext());
  const order = await wxpay.unifiedOrder({
    body: '测试支付',                //商品描述
    out_trade_no: '',            //商户订单号
    total_fee: payment,          //订单金额，单位为分
    spbill_create_ip: '',        //终端IP地址
    notify_url: '',              //微信支付异步通知回调地址
    trade_type: 'JSAPI',
    openid: openid,              //用户openid
  });
  const result = await wxpay.orderQuery({
    out_trade_no: order.out_trade_no,
  });
  const status = result.trade_state;
  if (status === 'SUCCESS') {
    //支付成功后的业务逻辑
  } else {
    //支付失败的业务逻辑
  }
};

4.3. 部署和添加触发器

在部署云函数前，需安装云函数依赖：

npm init
npm install tcb-admin-node wx-server-sdk --save

在部署成功后，在云函数平台上添加相应的触发器，比如按状态变更、按订单到达等触发器。在代码逻辑中调用相应的触发器，使云函数得以随时得到监控事件。

5. 总结

本文介绍了三种实现微信礼物打赏功能的方法，它们分别是使用微信支付、第三方聚合支付平台以及使用云函数实现。实现方式因场景而异，开发者需要根据实际需要选择最适合自己的方式去实现。无论选择哪种方式，都需要关注支付的安全问题，以确保支付的真实性和稳定性。