第三方微信和支付宝的支付流程
业务场景介绍
H5移动端支持微信支付 [ 微信支付分为微信内支付(JSAPI支付官方API)和微信外支付(H5支付官方API)] && 支付宝支付
[手机网站支付转 APP 支付 官方API ]
订单生成逻辑:前端请求后端提交订单,后端去和微信或者支付宝对接生成订单(后续支付都是这个逻辑进行的对接
1 .vue微信支付
微信支付又分为微信内支付和微信外支付流程如下
1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内:
//判断是否微信is_weixn(){var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger'){return true;} else {return false;}},
2.触发立即支付方法,根据微信内外的不同请求后端不同的接口,如果是微信外支付非常简单了~
3.【微信外支付】下面先看微信外支付,官方文档也写的很清楚,后端返回一个url地址,前端的工作就是拿到这个url地址进行跳转就可以了,看一下2-3步代码:
handelPay() {if(this.wechatpayType == 'wxpay'){// console.log("微信内支付")let data={amount:this.number,}this.$http.insideWeChatPay(data).then( res => {if(res.data.code === 200){this.weChatParameter=res.data.data// console.log(this.weChatParameter,"微信内支付需要参数")this.weixinPay()}else{Toast({message: res.data.msg,position: 'middle',duration: 1000});}});} else if(this.wechatpayType == 'wxpay_php'){// console.log("微信外支付")let data={amount:this.number,}this.$http.outsideWeChatPay(data).then( res => {if(res.data.code === 200){let url=res.data.datawindow.location.replace(url) //这里是后端返回的URL直接进行跳转即可完成微信外支付}else{Toast({message: res.data.msg,position: 'middle',duration: 1000});}});}},
4.在调起支付的页面监听从其他页面返回的事件,进行一些刷新业务逻辑的实现即可,至此微信外支付已经完成。
document.addEventListener("visibilitychange", function() {//需要的操作
});
5.【微信内支付】微信内支付比起微信外支付稍微复杂一点,但是也不难,(3步骤代码里面已经请求支付方式接口拿到了微信内支付所需要的参数)根据官方API
微信内置js对象 WeixinJSBridge,进行开发,至此微信浏览器内支付已经完成
//解决微信内置对象报错weixinPay(data){var vm= this;if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));}}else{vm.onBridgeReady();}},//微信内置浏览器类,weChatParameter对象中的参数是3.步骤代码中从后端获取的数据onBridgeReady(){var vm = this;var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();WeixinJSBridge.invoke('getBrandWCPayRequest',{debug:true,"appId":vm.weChatParameter.appId, //公众号名称,由商户传入"timeStamp":timestamp, //时间戳,自1970年以来的秒数"nonceStr":vm.weChatParameter.nonceStr, //随机串"package":vm.weChatParameter.package,"signType":vm.weChatParameter.signType, //微信签名方式:"paySign":vm.weChatParameter.paySign, //微信签名jsApiList: ['chooseWXPay']},function(res){// 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。if(res.err_msg == "get_brand_wcpay_request:ok" ){Toast({message: '支付成功',position: 'middle',duration: 3000});vm.number=nullvm.$router.go(-1)//window.location.href = vm.BASE_URL + 'index.html#/depositResult'}else{Toast({message: '支付失败',position: 'middle',duration: 3000});}});},
6.微信内部浏览器支付也可以封装一下,在全局都可以直接调用:
//微信浏览器支付
function wxpay(params,callback){if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params,callback), false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params,callback)); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params,callback));}}else{onBridgeReady(params,callback);}
}function onBridgeReady(params,callback){var that = thisWeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":params.appId, "timeStamp":params.timeStamp, "nonceStr":params.nonceStr, "package":params.package, "signType":params.signType, "paySign":params.paySign },function(res){ callback(res)}); }
7.组件中调用微信支付:
this.commonUtils.wxpay(res.data.data,function(payResult){if(payResult.err_msg == "get_brand_wcpay_request:ok" ){//执行}
})
2 .vue支付宝支付流程
其实支付宝支付也有H5支付和支付宝浏览器支付,这里只做H5支付,
1.支付宝中的H5支付和PC端的一样,主要是后端的工作量,后端完成订单的生成之后返给前端的是form表单,前端只需要负责做页面的跳转即可:
//立即支付按钮onSubmit() {if (this.payWay == 1) {//支付宝支付this.$router.push({path: '/aliPay', query: {orderId: this.orderId}});} else if (this.payWay == 2) {//微信支付,这里跳转到本文的微信支付模块的3.步骤handelPay方法}},
2.选择支付宝方式之后进入支付宝承载页面:
<template><div v-html="html"></div>
</template>
<script>export default {data(){return{html:''}},methods:{fetchVideoPay(){let param={orderId: this.$route.query.orderId};this.$api.orderpage.videoAliPay(param).then( res => {this.html = res.data;this.$nextTick(() => {document.forms[0].submit() //渲染支付宝支付页面})})}},mounted(){this.fetchVideoPay()}}
</script>
当然不想写承载页的还有其他方法调起支付,具体逻辑具体分析,根据不同的业务类型去变通比如:
const div = document.createElement('div');
div.innerHTML = (res.data); //res.data是返回的表单
document.body.appendChild(div);
document.forms.alipaysubmit.submit();
3.进入到支付宝支付页进行支付
第三方微信和支付宝的支付流程相关推荐
- 关于支付宝的支付流程
关于支付 现在的电商项目已经非常火爆了,随之而来的像支付宝,微信等第三方支付也非常的火爆,所以这里简单的说一下支付宝的支付流程. 支付步骤 工作前准备 首先我们需要在蚂蚁金服官网上面注册一个开发者账号 ...
- C# ASP.NET MVC 微信和支付宝H5支付开发及Demo
微信和支付宝H5支付 最近开发任务遇到了一个要在手机浏览器里面调起微信和支付宝去支付的开发需求,以前都是做的扫码支付或者JSAPI都是在软件内部支付的,没遇到过在自己浏览器内唤醒微信或者支付宝的支付这 ...
- 微信和支付宝APP支付使用总结
微信和支付宝APP支付使用总结 一.微信支付 1.先到微信开放平台注册账号.通过开发者认证. 2.创建应用,该应用也就是你的app,并提交审核. 3.审核后,应用详情下面有接口信息->微信支付- ...
- 聚合支付、单商户多商户支付、微信/支付宝/PayPal支付流程、支付政策法规
目录 一.聚合支付 聚合支付的基本概念 如何选择合适的支付模式 政策相关 常见的聚合支付平台 二.多商户和单商户 多商户单商户区别 多商户入驻流程 多商户模式中常见的支付流程 普通支付 合单支付 留个 ...
- 支付宝app支付流程(微信支付同理)
支付宝app支付现在很方便,支付宝的参考文档也规范易懂,需要开发人员做的事很少,具体参考支付宝开发文档https://docs.open.alipay.com/204/105297/ ,后台服务端的话 ...
- Springboot集成第三方jar快速实现微信、支付宝等支付场景
文章目录 前言 一.项目地址 二.使用步骤 1.引入jar包 2.根据官方demo,复制相应文件到项目中 常见报错问题 总结 前言 最近有个小型的活动外包项目,要集成一下支付功能,因为项目较小,按照微 ...
- 利用抖音Cookie充值接口提取支付链接,调起原生微信h5支付宝h5支付
最近开始搞一些个人支付通道的开发,方便个人不用和第三方平台签约就能收款,省去很多流程手续的成本. 然后翻了一下网上并没有太多现成的技术教程,只能自己研究着搞了. 这次要分享的是利用抖音的充值接口,去分 ...
- python微信、支付宝聚合支付说明文档
python在线聚合支付SDK 微信.支付宝二维码聚合SDK下载 点我下载 一.概述 一个二维码,用户可以使用微信.支付宝扫码支付. 1.设置支付金额,生成二维码 2.用户扫码 3.判断扫码来源 4. ...
- 利用抖音Cookie充值接口提取支付链接,个人调起原生微信h5支付宝h5支付
最近开始搞一些个人支付通道的开发,方便个人不用和第三方平台签约就能收款,省去很多流程手续的成本. 然后翻了一下网上并没有太多现成的技术教程,只能自己研究着搞了. 这次要分享的是利用抖音的充值接口,去分 ...
- 微信小程序开发支付流程
微信支付是时下最流行的交易支付方法之一,潜移默化推动着无现今社会的变革.小程序作为微信上的轻应用,同业也开放微信支付的接口,可以通过转账,扫二维码支付.要完成一次具体的订单支付需要完整的支付流程,具体 ...
最新文章
- ListView之SimpleAdapter的使用
- 去除word文档中向下的箭头图标
- nginx 重写 隐藏index.php
- Java之URLEncoder和URLDecoder类使用小记
- python爬取js加载的数据_Python爬虫学习,记一次抓包获取js,从js函数中取数据的过程...
- C# winform 多线程中创建等待窗体
- 网易资深Java架构师:java数组对象转为list集合
- 如何看待NLP领域的内卷:我不配找工作?
- stc89c51单片机音乐盒系统设计_基于单片机的火控系统语音报读设计
- VO(DTO)模式在架构设计中是否需要
- 什么样的两个矩阵相似_Lecture 27 | 相似矩阵
- Win10电脑如何打开任务管理器界面
- 大数据分析平台的核心价值
- Spring AOP异常处理(error at ::0 formal unbound in pointcut)
- 【RWM】基于matlab路由无线传感器网络模拟随机路点运动模型【含Matlab源码 1565期】
- python电脑录屏软件_可以推荐一款电脑录屏软件吗?
- 华为手机应用程序变为Android图标,华为手机如何改变应用图标
- 连接型CRM与社交型CRM、传统漏斗型CRM有什么区别?
- Linux发行版之CentOS,Mandriva,Redhat,Fedora,SuSE,Debian,Ubuntu比较
- css方位,CSS 世界中的方位与顺序