多年建站沉淀,我们用实力证明,上千家成功案例,我们用效果说话!
一站式企业信息化解决方案
功能强大 想您所想
微信公众号
025-83221259
您的当前位置:首页>行业动态>微信小程序开发如何接入微信支付:详细步骤指南
关键词:

微信小程序开发

微信支付

微信支付接入

微信小程序开发如何接入微信支付:详细步骤指南

发布:建站100发布时间:2024/10/29 8:53:15

微信支付作为国内最主流的移动支付方式之一,为微信小程序提供了强大的支付功能。接入微信支付不仅可以提升用户的支付体验,还能增加小程序的商业价值。本文将详细介绍如何在微信小程序中接入微信支付,包括申请准备资料、注册与配置、技术实现等步骤。

一、微信支付申请的准备资料

在开始接入微信支付之前,需要准备以下资料:

1.企业资质:

-营业执照:提供企业的营业执照扫描件。

-法人身份证:提供法人的身份证正反面扫描件。

-银行开户许可证:提供企业的银行开户许可证扫描件。

2.开发者资质:

-开发者身份证:提供开发者的身份证正反面扫描件。

-开发者邮箱:提供开发者的常用邮箱,用于接收微信支付的审核通知。

3.小程序信息:

-小程序AppID:在微信公众平台注册的小程序AppID

-小程序名称:小程序的名称。

-小程序Logo:小程序的Logo图片。

二、微信支付注册与配置

1.注册微信支付商户号

(1) 访问微信支付商户平台网站(https://pay.weixin.qq.com)。

(2) 点击“注册”按钮,填写相关信息,包括商户名称、经营类目、营业执照等。

(3) 提交资料并等待审核。审核通过后,将收到微信支付商户号和支付密钥等重要信息。


2.配置微信支付

(1) API密钥:在微信支付商户平台(https://pay.weixin.qq.com/)中生成API密钥,并妥善保管。

(2) 商户号:在商户平台中获取商户号(MCH_ID),用于后续的技术开发。

(3) 证书下载:下载商户证书(apiclient_cert.p12),用于签名和验证。

三、技术实现

1.引入微信支付SDK

(1) 下载SDK:在微信支付官方文档中下载微信支付SDK

(2) 引入SDK:将下载的SDK文件引入到小程序项目中。

2.配置支付参数

(1) 获取预支付交易会话标识:

-在服务器端调用微信支付的统一下单接口(UnifiedOrder API),获取预支付交易会话标识(prepay_id)。

-统一下单接口参数示例:

{

"appid":"小程序AppID",

"mch_id":"商户号",

"nonce_str":"随机字符串",

"body":"商品描述",

"out_trade_no":"商户订单号",

"total_fee":"订单金额(单位:分)",

"spbill_create_ip":"客户端IP",

"notify_url":"支付结果通知URL",

"trade_type":"JSAPI",

"openid":"用户在小程序中的OpenID"

}

(2) 生成支付签名:

-使用微信支付提供的签名算法生成支付签名(sign)。

-签名算法示例(Node.js):


const crypto=require('crypto');

const params={

appid:'小程序AppID',

mch_id:'商户号',

nonce_str:'随机字符串',

prepay_id:'预支付交易会话标识',

sign_type:'MD5',

trade_type:'JSAPI'

};

const key='商户API密钥';

const stringA=Object.keys(params).sort().map(key=>`${key}=${params[key]}`).join('&');

const stringSignTemp=`${stringA}&key=${key}`;

const sign=crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase();

params.sign=sign;

3.调用微信支付API

(1) 调用wx.requestPayment

-在小程序前端调用微信支付APIwx.requestPayment),传递生成的支付参数。

-示例代码:


wx.requestPayment({

timeStamp:params.timeStamp,

nonceStr:params.nonceStr,

package:`prepay_id=${params.prepay_id}`,

signType:'MD5',

paySign:params.sign,

success(res){

console.log('支付成功',res);

},

fail(res){

console.log('支付失败',res);

}

});


四、支付结果通知

1.设置支付结果通知URL

-在微信支付商户平台中设置支付结果通知URL,用于接收微信支付的通知。

2.处理支付结果通知:

-在服务器端处理微信支付的通知,验证签名并更新订单状态。

-示例代码(Node.js):


const express=require('express');

const bodyParser=require('body-parser');

const crypto=require('crypto');

const app=express();

app.use(bodyParser.raw({type:'application/xml'}));

app.post('/notify',(req,res)=>{

const xml=req.body.toString();

const data=parseXML(xml);//解析XML数据

const sign=data.sign;

delete data.sign;

const stringA=Object.keys(data).sort().map(key=>`${key}=${data[key]}`).join('&');

const stringSignTemp=`${stringA}&key=${key}`;

const calculatedSign=crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase();

if(sign===calculatedSign){

//处理支付成功逻辑

res.send('<xml><return_code>SUCCESS</return_code><return_msg>OK</return_msg></xml>');

}else{

//处理支付失败逻辑

res.send('<xml><return_code>FAIL</return_code><return_msg>签名错误</return_msg></xml>');

}

});

app.listen(3000,()=>{

console.log('Server is running on port 3000');

});


五、总结

通过以上步骤,您可以在微信小程序中成功接入微信支付。接入微信支付不仅可以提升用户的支付体验,还能增加小程序的商业价值。希望本文能够为您提供详细的指导,帮助您顺利完成微信支付的接入工作。如果有任何疑问或需要进一步的帮助,可以查阅微信支付官方文档或联系微信支付客服。

智能客服