【融职培训】Web前端学习 第11章 微信开发5 微信支付
一、概述
如果需要实现微信支付功能,需要有一个已认证的微信服务号,并且开通微信支付,开通后微信会提供一个商户ID。有了这个ID才能成功调用微信支付接口。
开通微信支付后,需要在微信支付后台【产品中心】=>【开发配置】中配置【JSAPI支付授权目录】和【Native支付回调链接】,如下图所示:
微信支付可以分为两种情况,微信浏览器之外的扫码支付(需要配置Native支付回调链接,支付完成后,微信服务器会调用这个链接,并传入参数。)和微信浏览器之内直接支付(需要配置JSAPI支付授权目录,只有这个域名下的链接才能调用支付接口)。两种支付都需要调用【统一下单接口】。所以本节针对统一下单接口来分别讲解如何实现这两种支付方法。
一、统一下单接口
通过调用下面的统一下单接口,就可以实现微信支付功能。
https://api.mch.weixin.qq.com/pay/unifiedorder
统一下单接口需要传入的参数包括如下内容(以下为必填项),并且参数要为xml格式:
- appid:公众号id
- body:商品描述
- mch_id:商户号id
- nonce_str:随机字符串
- notify_url:异步接收微信支付结果通知的回调地址,通知url必须为外网可访问的url,不能携带参数。
- openid:用户标识
- out_trade_no:商户订单号
- spbill_create_ip:终端IP
- total_fee:订单总金额,单位为分
- trade_type:交易类型JSAPI 、NATIVE、APP
- sign:签名
获取签名的规则与之前JS-SDK的签名规则相同,字段除了上述1-10十个字段外,还需要添加一个微信商户后台获取的key(【账户中心】=》【API安全】获取)
二、统一下单接口的返回值
交易类型为【JSAPI】
返回的xml格式会包含一个prepay_id。然后将这个值传递给前端,再由前端调用jsapi完成支付,示例代码如下所示:
1 document.querySelector(".pay").onclick = function(){2 function onBridgeReady() {3 WeixinJSBridge.invoke(4 'getBrandWCPayRequest', {5 "appId": `{{appId}}`, //公众号名称,由商户传入6 "timeStamp": `{{timeStamp}}`, //时间戳,自1970年以来的秒数7 "nonceStr": `{{nonceStr}}`, //随机串8 "package": `{{package}}`,9 "signType": `{{signType}}`, //微信签名方式: 10 "paySign": `{{paySign}}` //微信签名 11 }, 12 function (res) { 13 if (res.err_msg == "get_brand_wcpay_request:ok") { 14 // 使用以上方式判断前端返回,微信团队郑重提示: 15 //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。 16 location.href="/success" 17 } 18 }); 19 } 20 if (typeof WeixinJSBridge == "undefined") { 21 if (document.addEventListener) { 22 document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); 23 } else if (document.attachEvent) { 24 document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 25 document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); 26 } 27 } else { 28 onBridgeReady(); 29 } 30 }
交易类型为【NATIVE】
返回的结果包括一个code_url字段,将这个字段的值传递给前端,然后转换成二维码,用户扫码即刻完成支付。
三、完成支付
完成支付后,微信服务器会向notify_url的参数地址发送一个支付结果的消息。网站或公众号程序可以根据返回结果,自行处理支付完成后的业务逻辑。
【融职教育】在工作中学习,在学习中工作
【融职培训】Web前端学习 第11章 微信开发5 微信支付相关推荐
- 【融职培训】Web前端学习 第11章 微信开发4 JS-SDK接口
一.概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.例如我们网页中希望实现扫一扫.获取本地相册.位置信息.分享功能等,都可以使用JS-SDK来实现. 二.JS-SD ...
- 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签
一.html5概述 html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本.我们平时所说的html5其实是包含了html5,css3的新特性,以及新增的Jav ...
- 【融职培训】Web前端学习 第2章 网页重构1 第一个网页
一.内容概述 从本节我们开始正式学习前端开发的课程内容,首先我们从第一个网页开始了解html和css的基本概念,并通过创建第一个网页了解vscode的基本使用方法. 二.安装vscode插件 汉化插件 ...
- 【融职培训】Web前端学习 第3章 JavaScript基础教程9 内置对象
一.内置对象概述 javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能.我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:M ...
- 【融职培训】Web前端学习 第7章 Vue基础教程4 组件传值
一.组件传值的三种情况 我们可以把组件之间的数据传递分为三种情况: 父级向子级传递数据 子级向父级传递数据 非父子级传递数据 二.父级向子级传值 父级可以通过属性向自己传递数据,示例代码如下所示: 1 ...
- 【融职培训】Web前端学习 第10章 小程序开发4 小程序开发
一,数据绑定 VUE:vue动态绑定一个变量的变量元素的某个属性的时候,会在变量前面加上冒号:,例: <p:title="tit">我的title属性绑定了数据< ...
- 【融职培训】Web前端学习 第2章 网页重构7 浮动布局
一.元素分类 特性展示 在此前的课程中,我们还有一些遗留问题没有解决,例如: 有些元素不管宽度多少,都是独立占一行显示,有些元素则可以共同占用一行显示; 有些元素可以设置宽度和高度,有些元素不能设置宽 ...
- 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签
一.HTML语法 上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法. 1 <!DOCTYPE html> <!-- 文档声明 --> ...
- 【融职培训】Web前端学习 第3章 JavaScript基础教程18 BOM概述
一.概述 <javaScript高级程序设计>这本书讲过: javaScript = ECMAScript + DOM + BOM. DOM:文档对象模型(document对象) BOM: ...
最新文章
- C++ 调试技术:addr2line
- 学习redhat linux 6.1中文版笔记
- MATLAB常用命令、函数与运算
- becon帧 wifi_WireShark对于WIFI数据帧的分析
- 世界上最美的40个小镇,你见过多少个?
- 产品经理经验谈100篇(二)-数据分析应用,如何构建指标体系?
- 【Java】Object类、Objects类和日期类
- 企业者的福音之8266接入阿里智能,点亮一盏灯
- 深度学习2.0-14.神经网络与全连接层之全连接层、输出方式、误差计算
- 全球压缩毛巾行业调研及趋势分析报告
- cad插件_【CAD】源泉插件CAD插件强大到你无法想象,掌握此插件1/10功能你就是绘图大师...
- ssr提示服务器名无效_免费领取腾讯云服务器附带新手配置步骤(搭建网站)
- pyinstaller打包py遇到的问题
- java ruby 比较_java和ruby的一些比较
- mac charles网页代理https使用笔记
- [玩转UE4/UE5动画系统>Control Rig篇] 之 Control Rig + Fullbody IK版的足部IK实现(附项目代码)
- FlEAPHP + Smarty 进行php开发
- 【分治】POJ2083 Fractal
- Faded (Conor Maynard Cover)
- 【强化学习论文合集】二十六.2020国际人工智能联合会议论文(IJCAI2020)
热门文章
- 第十一章:django之后台管理
- Unity3D如何制作透贴和使用透贴模型??解决办法!!!
- java排序算法对比_java项目 实现排序算法对比,步骤,改进
- 提取论文中公式神奇(写论文的福音)
- CSGO服务器基础搭建(Linux下)
- Java毕业设计-二手车交易平台管理系统 二手车交易管理系统 二手汽车交易系统 汽车销售系统 汽车商城
- 重磅!2021年报考指南出炉!揭秘最具潜力的高薪专业,这些人才最有“钱途”!...
- ajax 请求超时 cancel,ajax被cancel问题(事件冒泡)
- RFID技术在物流行业中的应用:优化物流流程,提高效率
- vue使用高德地图实现多车定位和信息窗口: