支付宝客户端拉起支付

此代码写入public文件夹下的index.html的js中

      function ready(callback) {// 如果jsbridge已经注⼊则直接调⽤if (window.AlipayJSBridge) {callback && callback();} else {// 如果没有注⼊则监听注⼊的事件document.addEventListener("AlipayJSBridgeReady", callback, false);}}

此代码写入需要拉起支付的页面的接口里面

      window.AlipayJSBridge.call("tradePay",{orderStr: res.payRequestPara},function(result) {console.log(result);console.log(thah.$router);console.log(thah.$router.replace("./recharge-result?rechargeResult=fail"));if (result.resultCode == 9000) {thah.$router.push("./recharge-result?rechargeResult=success");} else {thah.$router.replace("./recharge-result?rechargeResult=fail");}});

`以下是支付宝支付`

业务场景介绍：
H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付 [手机网站支付转 APP 支付官方API ]

订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接）

一、移动端微信支付，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" ){//执行}
})

二、移动端支付宝支付，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.进入到支付宝支付页（至此但有一个问题，调起支付后，用户中途取消支付或者点返回键会整个网页一起关闭退出，或者一直在进入支付页面，不知道有没有更好的SEO方案）

支付宝客户端拉起支付相关推荐

个人支付接口/支付宝H5拉起支付/转账
H5支付,个人支付宝使用H5拉起支付 ,即时支付到个人账户,无需手续费. 测试效果如下图: 原文链接: https://github.com/apppay/h5pay/blob/master/R ...
SpringBoot工程接入第三方支付渠道支付宝(C扫B支付)
目录 1.C扫B的概念 2.支付宝接口调研 2.1.产品列表 2.2.线下场所接入支付 3.配置支付宝沙箱环境 3.1.简介 3.2.注册开放平台账号 3.3.配置密钥 3.4.沙箱账号 4.生成二维 ...
h5支付不能打开支付宝 ios_IOS H5支付调起微信支付宝客户端问题总结
IOS H5支付调起微信支付宝客户端问题总结很早之前公司的支付功能,通过H5去支付宝和微信支付,开始使用的是UIwebView来加载h5页面,当初只有支付宝网页支付形式,所以没有考虑到那么多,现在新 ...
iOS H5原生WKWebView调起支付宝客户端支付方案
iOS H5原生WKWebView调起支付宝客户端支付方案问题描述: 安卓直接WebView加载上面的URL直接可完成跳转支付宝弹出支付界面: iOS WKWebView加载这个URL,只是单纯加载 ...
h5支付不能打开支付宝 ios_IOS WKWebView H5支付打开支付宝/微信客户端
近期公司项目中的App使用WKWebView封装作为一个壳,加载web的网页,其中的支付使用的是H5支付,在APP中需要调起微信和支付客户端进行支付,过程中遇到了一些问题,好在通过查找资料找到了以下解 ...
WebView支付宝wap支付转支付宝客户端支付
android WebView支付宝wap支付转支付宝客户端支付重写WebViewClient的以下方法即可.可参考支付宝平台文档商户APP的WebView处理alipays协议 public bo ...
建付支付即时到账源码免签支付支持支付宝微信拉卡拉等
介绍: 建付支付系统即时到账源码_免签支付支持支付宝微信拉卡拉等等_带简单安装教程源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助! 源 ...
WebView启动支付宝客户端支付失败
本文转载:http://blog.csdn.net/u014752325/article/details/53976422 目前在做一个用App加载H5网页,然后在网页中调起支付宝客户端支付,蚂蚁金服 ...
用支付宝和微信可以直接跳转拉起支付，API搭建比较方便第三方支付接口首选杉德比较靠谱，
向正在寻求个人支付方案的开发者朋友们提供一些信息,希望能给他们一定的帮助,结合自己的使用环境.业务领域和应用场景自行选择.对提到的所有第三方支付工具.第四方聚合支付工具绝无恶意贬低. 如何选择一个靠谱 ...
微信支付报错：统一下单和拉起支付的appid不一致(原创)
微信支付报错:统一下单和拉起支付的appid不一致错误码:-2 提示参考: 参考统一下单的API (谦信君原创,转载请注明来源) 原因排查: 我们做的是APP微信支付客户端向我服务端发请求,获取预 ...

支付宝客户端拉起支付

`以下是支付宝支付`

支付宝客户端拉起支付相关推荐

最新文章

热门文章

支付宝客户端拉起支付

以下是 支付宝支付

支付宝客户端拉起支付相关推荐

最新文章

热门文章

`以下是支付宝支付`