一键接入微信支付,5步完成小程序收款全流程

业务背景

开发者在小程序中通过几行代码即可调用微信支付的能力,实现下单、订单查询、申请退款、查询退款等功能,简化以下多种小程序的支付场景:

在线预订酒店、餐厅、场地,并支付定金或全款。政务服务、教育、医疗等领域小程序用户缴纳费用电商零售、虚拟产品、在线服务、会员服务等卖货、充值等小程序场景。微信支付常见开发工作量对接微信支付也并非那么简单,除了官方文档、代码示例、SDK以外,依然会有一些较为复杂、繁重的开发工作量,例如:

部署和维护微信支付证书实现微信支付的签名、验签、回调、对账流程搭建微信支付的后台管理系统,实现退款审核、查账单等功能云开发微信支付场景解决方案云开发提供了开箱即用的微信支付模板,仅需要少量配置即可完成微信支付下单、回调流程的对接。帮助开发者更加快速、简便地完成微信支付场景的业务开发。

1.简化了支付接入过程,开发者无需处理复杂的证书和签名,只需调用云调用即可;

2.降低了后台管理复杂度,通过云后台提供基础管理系统,支持商户号配置和支付管理;

3.提高了安全性,避免了证书和支付敏感信息泄漏的风险,并且支持云函数作为支付和退款回调地址,更加高效。

流程对比:传统开发 vs 云开发快速上手示例:微信支付下单第 1 步:安装云模板在详情页点击 安装模板按钮,等待安装完成。

第 2 步:配置商户信息配置参数注意事项

参数前后不要引入额外空格。 密钥中的 ----- BEGIN PRIVATE KEY -----,----- END PRIVATE KEY -----,均需要带上。 回调函数填写格式:单个云函数填写scf:func1,多个回调函数填写scf:func1,scf:func2,用英文逗号分割。 不知道参数如何对应时,可点击输入框下方的连接,查看参数来源。 旧版微信支付没有微信支付公钥ID和微信支付公钥可不填,新版微信支付上述两个参数必填。参数设置参数配置第 3 步:使用云函数调用云模板下单接口模板已内置了云函数代码,可以直接在微信开发者工具中下载到本地修改后使用。 也可以手动创建云函数来完成,点击,可以查看云函数示例代码。

1.下载模板云函数代码到本地

打开微信开发者工具界面,在cloudfunctions目录点击右键,选择同步云函数列表,同步模板中的云函数wxpayFunctions到本地;然后在云函数wxpayFunctions目录右键,选择下载,即可下载模板内置的云函数代码到本地。如下图所示:

同步云函数列表下载2.编辑下单云函数

为了便于测试微信支付流程,下单云函数中,订单号为随机字符串,支付金额固定为¥0.01,直接调用即可返回支付凭证,唤起手机微信支付。

在实际项目中,需要修改云函数wxpayFunctions下的wxpay_order/index.js代码,参数更新为业务实际参数。云函数编辑后,需要重新上传部署。

第 4 步:小程序端获取预付单信息并完成支付小程序端调用云函数时,需要先在小程序端初始化云能力。修改app.js,在 App的 onLaunch 生命周期方法中添加云能力初始化代码,参数传入用户的云开发环境ID。

代码语言:txt复制App({

onLaunch: function () {

wx.cloud.init({

// env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源

env: '***',

// 是否在将用户访问记录到用户管理中,在控制台中可见,默认为false

traceUser: false,

});

},

});在小程序中调用第 3 步中的云函数,获取预付订单信息后,调用wx.requestPayment唤起微信支付组件完成支付。

代码语言:txt复制wx.cloud.callFunction({

// 云函数名称

name: 'wxpayFunctions',

data: {

// 调用云函数中的下单方法

type: 'wxpay_order',

// 业务其他参数...

// 这里的参数会传入wxpayFunctions/wxpay_order/index.js下的函数,通过event获取

},

success: (res) => {

console.log('下单结果: ', res);

const paymentData = res.result?.data;

// 唤起微信支付组件,完成支付

wx.requestPayment({

timeStamp: paymentData?.timeStamp,

nonceStr: paymentData?.nonceStr,

package: paymentData?.packageVal,

paySign: paymentData?.paySign,

signType: 'RSA', // 该参数为固定值

success(res) {

// 支付成功回调,实现自定义的业务逻辑

console.log('唤起支付组件成功:', res);

},

fail(err) {

// 支付失败回调

console.error('唤起支付组件失败:', err);

},

});

},

});第 5 步:使用云函数接收微信支付通知微信支付会异步发送支付通知,这里使用云函数接收微信支付发送的通知,判断是否支付成功,开发者可以根据云函数收到的微信支付通知,判断是否支付成功,然后处理订单支付状态。

新建云函数,假设函数名为:wxpayOrderCallback,在参数设置中配置“接收支付通知的云函数”字段,值为:scf:wxpayOrderCallback。

微信支付发送过来的参数和wxpayOrderCallback云函数示例代码如下

微信支付回调参数:

不同支付类型返回的参数结构有一定出入,以回调函数收到的实际参数为准

代码语言:txt复制{

"id": "EV-2018022511223320873", // 回调通知的唯一编号

"create_time": "2015-05-20T13:29:35+08:00", // 本次回调通知创建的时间

"resource_type": "encrypt-resource", // 通知的资源数据类型,固定为encrypt-resource

"event_type": "TRANSACTION.SUCCESS", // 微信支付回调通知的类型。支付成功通知的类型为TRANSACTION.SUCCESS。

"summary": "支付成功", // 微信支付对回调内容的摘要备注。

"resource": {

"amount": {

"currency": "CNY",

"payerCurrency": "CNY",

"payerTotal": 1,

"payer_currency": "CNY",

"payer_total": 1,

"total": 1

},

"appid": "wx480c*****aa44a43",

"attach": "",

"bankType": "BOC_DEBIT",

"bank_type": "BOC_DEBIT",

"mchid": "1613752320",

"outTradeNo": "8206022981401",

"out_trade_no": "8206022981401",

"payer": {

"openid": "ou*********************3zM"

},

"promotionDetail": null,

"promotion_detail": null,

"successTime": "2025-03-21T17:27:37+08:00",

"success_time": "2025-03-21T17:27:37+08:00",

"tradeState": "SUCCESS",

"tradeStateDesc": "支付成功",

"tradeType": "JSAPI",

"trade_state": "SUCCESS",

"trade_state_desc": "支付成功",

"trade_type": "JSAPI",

"transactionId": "4200002********8510115762",

"transaction_id": "42000026********8510115762"

}

}wxpayOrderCallback云函数示例代码:

代码语言:txt复制'use strict';

exports.main = async (event, context) => {

// event 中包含上面所有列出的json参数,按需取用

// 这里使用event_type==="TRANSACTION.SUCCESS"来判断支付成功

const {event_type}=event

if(event_type==="TRANSACTION.SUCCESS"){

// 处理支付成功相关的业务逻辑

}

return event

};接口说明本模板提供了 5 个接口方法:

wxpay_order: 小程序下单wxpay_query_order_by_transaction_id: 微信支付订单号查询订单wxpay_query_order_by_out_trade_no: 商户订单号查询订单wxpay_refund: 申请退款wxpay_refund_query: 通过商户退款单号查询单笔退款具体调用方式可查看对应接口详情。

常见问题如何查看云调用服务的监控日志云模板的监控和日志功能正在开发中,目前可以在云开发的工作流中查看调用的日志和监控。

点击云模版链接,快速安装

Copyright © 2022 破界远征沙盒工坊 All Rights Reserved.