支付宝和微信的JSSDK发起支付
2024-06-27 04:37:55
支付宝：
引入alipay的jsapi文件：
<script src="https://a.alipayobjects.com/g/h5-lib/alipayjsapi/3.0.6/alipayjsapi.min.js"></script>点击支付按钮调用的后台创建交易的接口，返回tradeNO
this.API.trade_create({total_amount:0.01,subject:localStorage.tablename+'点餐',buyer_id:localStorage.user_id,shop_id: localStorage.shop_id,seller_id:localStorage.seller_id,out_trade_no:this.orderdetail['pos_reference'],payment:'CODEPAY'}).then((response) => {//这条接口主要是为了拿到tradeNO,前端只需拿到这个就可以了this.alipayPay(response);}, (response) => {mui.toast('网络错误');});//传入tradeNOalipayPay: function (response) {this.tradePay(response);}//发起支付tradePay: function (tradeNO) {let that = this;this.alipayReady(function(){// 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)AlipayJSBridge.call("tradePay", {tradeNO: tradeNO}, function (data) {//支付成功后data.resultCode是900if ("9000" == data.resultCode) {that.processActionLog(tradeNO);//这是我做扫码点餐的数据回流给支付宝的代码，没用到可以直接去掉that.$store.dispatch('user_record',{orderid:that.orderdetail['id'],shop_id:localStorage.shop_id,user_id:localStorage.user_id,merchant_pid: localStorage.seller_id,tablename:localStorage.tablename,i:localStorage.i,status:14,statusDesc:'已支付',action_type:'order_dishes'});that.$router.push({path:'/orderinfo'});}});});}微信：
首先安装下jssdk
npm i -S weixin-js-sdkmain.js引入
import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx;点击支付按钮发起支付
this.API.toPay({//参数根据后台需要ordersn:this.orderdetail['pos_reference'],amount:this.orderdetail['amount_total'],user_id:localStorage.user_id,payment:'CODEPAY'}).then((response) => {//获取后台返回的支付的数据，调用jssdk发起支付this.weixinPay(response);}, (response) => {mui.toast('网络错误');});//发起支付的方法weixinPay: function (response) {let that = this;this.$wx.config({debug: false, appId: response['sdk_appid'],timestamp: response['sdk_timestamp'],nonceStr: response['sdk_noncestr'],signature: response['sign'],jsApiList: ['chooseWXPay']});this.$wx.ready(function(){that.$wx.chooseWXPay({timestamp: response['sdk_timestamp'],nonceStr: response['sdk_noncestr'],package: response['sdk_package'],signType: response['sdk_signtype'],paySign: response['sdk_paysign'],success: function(res) {that.$router.push({path:'/orderinfo'});},fail: function(res){console.log(JSON.stringify(res));}});});this.$wx.error(function(res) {console.log(JSON.stringify(res));});}另一种发起微信支付方式，不使用jssdk
//拿到后台返回的支付信息，调用onBridgeReady
onBridgeReady: function (response) {this.initWeixinReady(response);},initWeixinReady: function (response) {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":response['sdk_appid'], //公众号名称，由商户传入 "timeStamp":response['sdk_timestamp'], //时间戳，自1970年以来的秒数 "nonceStr":response['sdk_noncestr'], //随机串 "package":response['sdk_package'], "signType":response['sdk_signtype'], //微信签名方式： "paySign":response['sdk_paysign'] //微信签名 },function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ) {mui.toast('支付成功');}else{mui.toast('支付失败');} });if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);}}}支付宝支付完成后关闭窗口：
AlipayJSBridge.call('closeWebview');微信支付完成后关闭窗口：
that.$wx.closeWindow();支付宝和微信的JSSDK发起支付相关推荐
- 支付宝、微信、银联移动支付集成
一.支付宝移动支付 SDK开放平台:https://b.alipay.com/order/productDetail.htm?productId=2013080604609654&tabId= ...
- 电商线上支付 -- --支付宝， 微信和账期支付等 以及 线下支付（转账，汇票，货到付款）流程梳理
线上 --支付宝 微信-账期 1,订单和钱 生成支付单 -成功 , 2,(输入密码后)生成支付流水单号(如果是账期支付)- 支付结果查询(在线支付) 3, =-调起微信支付- // 将该app注册到微 ...
- 支付宝、微信等常用第三方支付接口费率介绍
当前第三方支付接口接入主要包含的支付模式有电脑网站支付.手机网站支付.APP支付等,各第三方支付公司的支付接口费率也趋于相同,一般行业费率在0.6%左右,游戏.娱乐等虚拟业务的费率为1%,下面就整理出 ...
- 支付宝，微信，线上支付流程介绍
这篇文章中我们介绍下目前中国市场线上支付主流的形式及流程 支付宝支付系统交互流程: 微信支付系统交互流程: 在我们写支付相关功能时,其实最主要的就是理解如上的两张图,我们可以把它们大致简化为: 商户服 ...
- 微信第三方授权登录并在h5中发起支付
概述:微信第三方授权登录,授权后转向h5页面直接发起支付,应用场景:智能售货机,用户扫码直接支付并记录用户信息. 一.业务配置项 1.1注册微信公众号,微信商户号 微信公众号需要认证,认证后才会有相关 ...
- 第三方移动支付类产品竞品分析：支付宝VS微信支付VS云闪付
第三方移动支付类产品竞品分析:支付宝VS微信支付VS云闪付 文章目录 第三方移动支付类产品竞品分析:支付宝VS微信支付VS云闪付 一.分析背景与竞品选择 1.竞品分析目的 2.行业研究与市场趋势分析 ...
- 支付宝、微信免接口支付方案
title: 支付宝.微信免签约接口支付方案 tags: 支付宝.微信 背景 相信很多开发者或者运营者,在为网站(博彩.棋牌 )即时到账充值发愁.还在为无法申请支付宝即时到账接口而担忧. 在这里我将为 ...
- Apple Pay正式入华：能否成支付宝与微信强敌
就在春节备受网友吐槽的"敬业福"让支付宝陷入尴尬境地,微信支付即将开始提现收费也引发外界热议之际,移动支付领域迎来重量玩家--苹果Apple Pay今日正式入华. 中国正式成为亚洲 ...
- android微信支付回调方法,Android接入支付宝和微信支付的方法
前言 很多APP都需要支付功能,国内一般就是支付宝和微信了.目前这2种接入方式对于APP端来说都已经比较方便了,因为大部分的安全校验之类的逻辑都在服务端. APP端总结起来就是三步走: 接入支付的库 ...
最新文章
- 2.session与cookie的区别?
- MongoDB或CouchDB - 适合生产？ [关闭]
- java模拟一个军队作战_战区级联合作战仿真推演系统
- 实现ftoa与itoa
- MaxCompute Console 实用小命令
- 全国计算机二级等级考试项目有什么,全国计算机等级考试二级内容
- 介绍Unreal Engine 4中的接口(Interface)使用C++和蓝图
- 7649:我家的门牌号
- 磁盘阵列 （RAID）简介
- 安装PyQt5安装包或者其他操作，报错Failed to execute script pyi_rth_multiprocessing，解决办法
- 往届毕业生档案去向查询网_往届毕业生档案在哪里可以查吗
- fdisk：Linux 下管理磁盘分区的利器
- Smartbi报表工具的学习笔记，如何学好报表分析？
- 微信小程序 图片等比例缩放（图片自适应屏幕）
- 使用sws_scale转换视频、使用swr_convert转换音频
- python常见几种设计模式
- java排班算法-几班几倒
- Mysql并发读写解决方案分析--MVCC
- C/C++ 项目必读：代码格式化和静态分析检查的一站式工作流 Cpp Linter
- 现代信号处理笔计 4 线性估计