微信小程序接入支付功能并实现支付

article/2025/10/15 5:59:06

随着微信小程序越来越广泛的应用,现在小程序几乎无所不能(绝对啦,哈哈),那么就会有很多微信小程序需要有支付的需求,那么该文章将带领大家走一遍如何实现微信小程序的支付功能.

第一步,微信小程序管理后台 -> 微信支付->接入微信支付 及关联(设置)商户信息

 如果是第一次接入, 直接申请接入,然后选择弹出窗口的"我还没有商户号"选项接入即可

 接入商户,过程比较简单,随着指引一步一步走即可. 做完引导后所需的工作后,你需要确认做下面的两步,因为在后面的code时需要:

      1.设置支付授权目录:  依次找到  商户平台->产品中心->开发配置,然后点击下面的添加进行添加支付目录

     个人感觉类似微信小程序开发添加的request合法域名, 上面添加的这个目录,应该和你在后期在程序后台写的最终方法调用名一致,假设这里你设置的是  https://abc.cn/mypay/payOP

    2. 设置API密钥:  依次找到  商户平台->账号中心->API安全->设置APIv2密钥 设置后,可以把密钥拷贝出来记住,下面的code部分也需要该信息

第二步:开发小程序的支付页面,此处只简单介绍页面,重点介绍js部分

     1.配置页面信息, 假设页面只有一个输入金额的输入框,加一个按钮,那么在点击按钮后,执行js的操作部分如:

formSubmit:function(e){let pp = e.detail.value;if(pp.money.trim()==""){wx.showToast({title: "请输入捐赠金额!", //显示文本icon: 'none', //使用图标duration: 1000  //显示时间})return false;}// 注意,下面的reqest代码部分,that.data.userInfo.wid存储的就是当前用户的openid,这个信息一般会在用户登录后进行了存储,如果你没有存储,可以通过wx.login去获取,此处不再赘述let that = this; wx. request({url:'刚刚在上面设置的安全支付目录地址/'+that.data.userInfo.wid+'/'+pp.money,header: {'content-type': 'application/json' // 默认值}, success: function (ress){ // successlet res = ress.data;  if (res.status){let out_trade_no = res.out_trade_no;//记录商户订单号 ,为后续缴费成功回调做记录wx.requestOrderPayment ({ 'timeStamp': res.timeStamp,'nonceStr': res.nonceStr,'package': res.package, 'signType': 'MD5','paySign': res.paySign,  'success': function(res3){ wx.showToast({title: "支付成功,感谢您的善心!", icon: 'success', //使用图标duration: 1000  //显示时间})//此处负责回调,把先前的订单状态值为已付款},'fail':function (res2){console.log (res2);}})  }  },fail: function () {//后台没连上} ,complete: function () {// 处理结束} })},

第三步: 服务器后台代码部分,这里以php为例进行讲解,其它语言可以适当翻译改动

//支付调用的主函数, 名称需要和设置的商户支付授权目录一致
public function payOP(){//获取opid和fee$wid= $this->uri->segment(3,0);	//获取小程序传过来的openid$fee = $this->uri->segment(4,0);//获取小程序传过来的捐款//设置参数$appid =        'xxxxx';//小程序的appid ,如果是公众号 就是公众号的appid$body =         '本次支付的介绍,文字信息随便写';$mch_id =       '商户平台登录账号';$nonce_str =    $this->nonce_str();//随机字符串,下面会提供函数$notify_url =   '微信支付回调函数,说实话这个没啥用,不设应该不行,你就设置成你的reqest域名吧';$openid =       $wid;//当前支付用户的openid$out_trade_no = date('YmdHis_', time()).ceil(microtime()*1000);//商户订单号,需唯一$spbill_create_ip = '114.114.114.114';//随便一个真实存在的ip,必须要设置$total_fee =    $fee*100;//因为充值金额最小是1 而且单位为分 如果是充值1元所以这里需要*100$trade_type = 'JSAPI';//交易类型 默认//这里是按照顺序的 因为下面的签名是按照顺序 排序错误 肯定出错$post['appid'] = $appid;$post['body'] = $body;$post['mch_id'] = $mch_id;$post['nonce_str'] = $nonce_str;//随机字符串$post['notify_url'] = $notify_url;$post['openid'] = $openid;$post['out_trade_no'] = $out_trade_no;$post['spbill_create_ip'] = $spbill_create_ip;//终端的ip$post['total_fee'] = $total_fee;//总金额 最低为一块钱 必须是整数$post['trade_type'] = $trade_type;$sign = $this->sign($post);//签名$post_xml = '<xml><appid>'.$appid.'</appid><body>'.$body.'</body><mch_id>'.$mch_id.'</mch_id><nonce_str>'.$nonce_str.'</nonce_str><notify_url>'.$notify_url.'</notify_url><openid>'.$openid.'</openid><out_trade_no>'.$out_trade_no.'</out_trade_no><spbill_create_ip>'.$spbill_create_ip.'</spbill_create_ip><total_fee>'.$total_fee.'</total_fee><trade_type>'.$trade_type.'</trade_type><sign>'.$sign.'</sign></xml> ';//统一接口prepay_id$url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';$xml = $this->http_request($url,$post_xml);$array = $this->xml($xml);//全要大写if($array['RETURN_CODE'] == 'SUCCESS' && $array['RESULT_CODE'] == 'SUCCESS'){$time = time();$tmp='';//临时数组用于签名$tmp['appId'] = $appid;$tmp['nonceStr'] = $nonce_str;$tmp['package'] = 'prepay_id='.$array['PREPAY_ID'];$tmp['signType'] = 'MD5';$tmp['timeStamp'] = "$time";$data['status'] = true;$data['timeStamp'] = "$time";//时间戳$data['nonceStr'] = $nonce_str;//随机字符串$data['signType'] = 'MD5';//签名算法，暂支持 MD5$data['package'] = 'prepay_id='.$array['PREPAY_ID'];//统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*$data['paySign'] = $this->sign($tmp);//签名,具体签名方案参见微信公众号支付帮助文档;$data['out_trade_no'] = $out_trade_no;echo json_encode($data);}else{$data['status'] = false;$data['text'] = "错误";$data['RETURN_CODE'] = $array['RETURN_CODE'];$data['RETURN_MSG'] = $array['RETURN_MSG'];echo json_encode($data);}   	    }下面是一些上述代码需要调用的函数
//随机32位字符串private function nonce_str(){$result = '';$str = 'QWERTYUIOPASDFGHJKLZXVBNMqwertyuioplkjhgfdsamnbvcxz';for ($i=0;$i<32;$i++){$result .= $str[rand(0,48)];}return $result;}//签名 $data要先排好顺序private function sign($data){$stringA = '';foreach ($data as $key=>$value){if(!$value) continue;if($stringA) $stringA .= '&'.$key."=".$value;else $stringA = $key."=".$value;}$wx_key = '***************';//这里就是我上面讲解的设置了API的那个密钥 !!!$stringSignTemp = $stringA.'&key='.$wx_key;return strtoupper(md5($stringSignTemp)); }private function xml($xml){$p = xml_parser_create();xml_parse_into_struct($p, $xml, $vals, $index);xml_parser_free($p);$data = "";foreach ($index as $key=>$value) {if($key == 'xml' || $key == 'XML') continue;$tag = $vals[$value[0]]['tag'];$value = $vals[$value[0]]['value'];$data[$tag] = $value;}return $data;}private function http_request($url,$data = null,$headers=array()){$curl = curl_init();if( count($headers) >= 1 ){curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);}curl_setopt($curl, CURLOPT_URL, $url);curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);if (!empty($data)){curl_setopt($curl, CURLOPT_POST, 1);curl_setopt($curl, CURLOPT_POSTFIELDS, $data);}curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);$output = curl_exec($curl);curl_close($curl);return $output;}

上述代码是亲测有效并且能正常支付的,请需要的朋友拿去测试, 我是活雷锋,不谢 


http://chatgpt.dhexx.cn/article/gfLc3lIu.shtml

相关文章

软件测试之“支付功能”测试

软件测试之“支付功能”测试

测试思维 要分析测试点之前&#xff0c;我们先来梳理一下测试思维。总结来说&#xff0c;任何事物的测试思路都可以总结如下&#xff1a; 第一步&#xff1a;梳理产品的核心业务流程&#xff1a;明白这是个什么项目&#xff0c;实现了什么业务&#xff0c;以及是怎么实现的&a…
阅读更多...
一步步教你如何在SpringBoot项目中引入支付功能

一步步教你如何在SpringBoot项目中引入支付功能

听说微信搜索《Java鱼仔》会变更强哦&#xff01; 本文收录于JavaStarter &#xff0c;里面有我完整的Java系列文章&#xff0c;学习或面试都可以看看哦 &#xff08;一&#xff09;引言 支付功能如今已经成为一个需要盈利的网站的基本功能了&#xff0c;如今的网站如果想要做…
阅读更多...
支付功能怎么测试？

支付功能怎么测试？

跳槽高峰期&#xff0c;作为测试&#xff0c;不管是面试还是笔试&#xff0c;必然要被考验到的就是”测试思维“。在面试中就是体现在如下面试题中&#xff1a; “说说你项目中的 xx 模块你是如何测试的&#xff1f;” “给你一个购物车&#xff0c;你要怎么测试&#xff1f;”…
阅读更多...
面试题：支付功能怎么测试？如何回答？

面试题：支付功能怎么测试？如何回答？

文章末尾给大家准备了大量福利 前言 九月了&#xff0c;有很多的小伙伴已经全面武装好准备找工作了&#xff0c;九月和十月是黄金期——俗称”金九银十“。那么&#xff0c;作为测试&#xff0c;不管是面试还是笔试&#xff0c;必然要被考验到的就是”测试思维“。在面试中就…
阅读更多...
支付功能测试用例（参考微信平台）

支付功能测试用例（参考微信平台）

支付功能测试用例xmind&#xff0c;功能点以支付方式&#xff0c;支付手段&#xff0c;支付金额划分的 支付方式&#xff1a; 1.余额&#xff08;零钱&#xff09;支付 2.储蓄卡支付 3.第三方支付微信&#xff0c;支付宝&#xff0c;京东、百度、&#xff09; 4.信用卡支付…
阅读更多...
vue项目支付功能

vue项目支付功能

目录 1.支付宝方式&#xff1a; 代码&#xff1a; ​ 2.微信支付 二维码展示代码&#xff1a; ​请求后端的支付二维码接口 1.支付宝方式&#xff1a; 支付宝方式&#xff1a;点击支付宝支付, 调用后台接口(携带订单号)&#xff0c;后台返回一个form表单(HTML字符串结构)&am…
阅读更多...
在线支付功能实现代码

在线支付功能实现代码

我们都知道&#xff0c;在现在的网站中&#xff0c;基本上都会有支付功能&#xff0c;在线支付作为一个潮流已是现代化网站的必备功能模块&#xff0c;那么几天我就分享一下如果来做这个在线支付功能。 在线支付一般来说有两种实现方式&#xff0c;一种是调用各个银行提供的接口…
阅读更多...
Java实现微信支付功能

Java实现微信支付功能

微信实现支付功能与支付宝实现支付功能是相似的&#xff0c;接入前的准备工作&#xff0c;包括申请APPID、申请mchid、绑定APPID及mchid、配置API key、下载并配置商户证书等&#xff0c;具体可查看微信支付文档 接入前准备-APP支付 | 微信支付商户平台文档中心 (qq.com)正在上…
阅读更多...
Java开发支付宝支付功能

Java开发支付宝支付功能

之前做开发过程中&#xff0c;没有接触过支付相关的功能&#xff0c;最近做了一个支付相关功能的开发&#xff0c;包括支付宝和微信支付&#xff0c;为了避免以后忘记相关的流程&#xff0c;记录一下这次的开发经验&#xff0c;这里先介绍一下支付宝相关的开发。 首先在进行jav…
阅读更多...
支付宝支付功能实现

支付宝支付功能实现

支付宝支付功能 1、电脑网站支付&#xff0c;手机网站支付&#xff0c;app支付1.1、异步通知介绍1.2、API和请求示例介绍 2、当面付3、小程序支付接入4、代码完整代码 支付宝开发文档中心 注意&#xff1a;个人无法使用此功能&#xff0c;因为个人申请使用是不会通过的 1、电脑…
阅读更多...
支付功能

支付功能

Django rest framework之支付功能 一.支付宝支付 1.进入蚂蚁金服开放平台&#xff08;查看api&#xff09;&#xff1a; 1.1在正式生产环境中需要创建应用&#xff08;需审核&#xff09;&#xff1a; 1.2沙箱环境&#xff08;测试&#xff09;&#xff1a; 可以在文档中查看对…
阅读更多...
springboot实现支付宝支付功能

springboot实现支付宝支付功能

支付系统中容易出现的问题 1&#xff0c;用户在页面下订单后&#xff0c;价格被篡改&#xff1b; 解决方案&#xff1a;通过后端计算订单的总金额 2&#xff0c;订单重复处理。用户支付成功后&#xff0c;支付宝会短时间内多次调用我们的回调接口&#xff0c;如果出现网络波动…
阅读更多...
2021年，Flutter 与 React Native该如何选择？，安卓app开发教程

2021年，Flutter 与 React Native该如何选择？，安卓app开发教程

一、Flutter 应用的优势 =========================================================================== 1. 热重载 = 快速编码 Flutter 允许开发人员使用一种更复杂、更快速的方式来创建应用程序。这是 Flutter 的最大优势之一，也是所有顶级移动应用开发公司都颇为看重的…
阅读更多...
一大波开发者福利来了，一份微软官方Github上发布的开源项目清单等你签收

一大波开发者福利来了，一份微软官方Github上发布的开源项目清单等你签收

目录 微软Github开源项目入口微软开源项目受欢迎程度排名 Visual Studio CodeTypeScriptRxJS.NET Core 基础类库CNTKMicrosoft calculatorMonaco editorMS-DOSRedis windows版.NET Core CLR (公共语言运行时)ASP.NET CoreEntity Framework CorePowerShell如何在其中搜索自己需要…
阅读更多...
.Net资讯 | 一大波开发者福利来了， 一份微软官方Github上发布的开源项目清单等你签收...

.Net资讯 | 一大波开发者福利来了， 一份微软官方Github上发布的开源项目清单等你签收...

目录 微软Github开源项目入口微软开源项目受欢迎程度排名 Visual Studio CodeTypeScriptRxJS.NET Core 基础类库CNTKMicrosoft calculatorMonaco editorMS-DOSRedis windows版.NET Core CLR (公共语言运行时)ASP.NET CoreEntity Framework CorePowerShell如何在其中搜索自己需要…
阅读更多...
FullCalendar:eventColor,eventBackgroundColor, eventBorderColor, and eventTextColor

FullCalendar:eventColor,eventBackgroundColor, eventBorderColor, and eventTextColor

<!DOCTYPE html><html><head><meta charsetutf-8 /><title>背景色設定</title><link href../fullcalendar.min.css relstylesheet /><link href../fullcalendar.print.min.css relstylesheet mediaprint /><script src../l…
阅读更多...
Flutter 与 React Native 该如何选择

Flutter 与 React Native 该如何选择

跨平台程序员之间关于 React Native 和 Flutter 的旷日持久的争论越来越白热化了。前几年&#xff0c;React Native 还是开发人员的首选框架&#xff0c;但是自 2017 年 Flutter 发布以来&#xff0c;其已经发展成为 React Native 的一个强有力竞争对手。 最近&#xff0c;随着…
阅读更多...
2021年，Flutter 与 React Native该如何选择？

2021年，Flutter 与 React Native该如何选择？

????????关注后回复 “进群” &#xff0c;拉你进程序员交流群???????? 作者 | Wasim Charoliya 译者 | 王强 策划 | 田晓旭 2021 年&#xff0c;跨平台程序员之间关于 React Native 和 Flutter 的旷日持久的争论越来越白热化了。前几年&#xff0c;React Nati…
阅读更多...
React Native 三端同构实践

React Native 三端同构实践

⚠️ 博客中涉及的代码内容可查看 Github: react-native-isomorphism React Native三端同构皆在&#x1f22f;️在不改动 React Native 代码下&#xff0c;公用一套代码架构, 在浏览器中实现同样的展示、交互、功能。 在实际开发过程中, 尤其创业公司, 需求的迭代周期是非常快…
阅读更多...
吐血推荐｜2万字总结Mac所有应用程序、软件工具和相关资料

吐血推荐｜2万字总结Mac所有应用程序、软件工具和相关资料

现在随着互联网的发展&#xff0c;越来越多的公司都鼓励Mac办公&#xff0c;属实MacOS系统对于我们的工作开发效率有很大提升&#xff0c;所以我们需要收集各种类别非常好用的 Mac 应用程序、软件以及工具。作为一个资深 Mac 用户&#xff0c;我需要它们帮助我快乐、高效的工作…
阅读更多...
推荐文章

Copyright @ 2022~2023