首先是在支付宝浏览器环境   使用支付宝支付

参考链接 https://myjsapi.alipay.com/jsapi/native/trade-pay.html

支付宝订单字符串唤起支付  调用支付宝浏览器环境内置Api  window.AlipayJSBridge.call("tradePay"

window.AlipayJSBridge.call("tradePay", {
orderStr: dataList.message.orderStr // 支付订单信息
}, function(result) {
// 支付成功回调判断
if(result.resultCode == 9000) {
uni.navigateTo({
url:'/pages/pay_order/succee?price=' + that.orderInfo.total
})
}else {
 console.log('支付失败')
}
});

H5 微信支付  这里使用是的   jsApi    WeixinJSBridge.invoke

不需要通过wx.config配置接口信息,在微信浏览器内,可以直接使用

// 下面是解决WeixinJSBridge is not defined 报错的方法
//wxInfo 是掉后台接口获取的支付配置信息

                             let that = this 
if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(wxInfo), false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(wxInfo))
document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(wxInfo))
}
} else {
// alert("225",JSON.stringify(data))
that.onBridgeReady(wxInfo,that.realPrice)
}

  

			// 微信支付
onBridgeReady (data) {
let that = this
WeixinJSBridge.invoke(
'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
'appId': data.appId, // 公众号名称,由商户传入
'timeStamp': data.timeStamp, // 时间戳
'nonceStr': data.nonceStr, // 随机串
'package': data.package, // 预支付id
'signType': data.signType, // 微信签名方式
'paySign': data.paySign // 微信签名
},
function (res) {
// 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
if (res.err_msg =="get_brand_wcpay_request:ok") {
uni.showToast({
title: '支付订单成功',
icon: 'none'
});
uni.navigateTo({
url:'/pages/pay_order/succee?price=' + that.orderInfo.total
})
} else {
alert('支付失败')
}
}
)
},

 支付宝支付  这里后台返回form表单  将接口返回的form表单显示到页面

                        document.querySelector('body').innerHTML = dataList.data.aliPaySign.form
//调用submit方法
document.forms[0].submit()
               支付完成以后,需要后台设置回调地址,跳回我们这边的成功界面

搜索

复制

H5在(支付宝和微信环境)使用支付的更多相关文章

  1. spring_boot_pay支付宝,微信,银联支付详细代码案例

    spring-boot-pay 支付服务:支付宝,微信,银联详细代码案例(除银联支付可以测试以外,支付宝和微信支付测试均需要企业认证,个人无法完成测试),项目启动前请仔细阅读 注意事项  . 友情提示 ...

  2. wap站、手机APP 接入支付宝、微信、银联支付。

    一.wap站 ①.支付宝接入 1.开发前准备:申请一个通过实名认证的企业支付宝账号,并申请开通手机WAP支付功能. 2.流程 参数准备: 企业支付宝账号的PID(也叫ParnerID)和KEY,如果使 ...

  3. JAVA支付宝和微信(APP支付,提现,退款)

    公共参数图表:       接口 需要参数 通知方式 支付宝APP支付 应用公钥,应用私钥 异步 支付宝APP提现 应用公钥,应用私钥,支付宝公钥 同步 支付宝APP退款 应用公钥,应用私钥,支付宝公 ...

  4. iOS支付宝,微信,银联支付集成封装调用(下)

    一.越来越多的app增加第三方的功能,可能app有不同的页面但调用相同的支付方式,例如界面如下: 这两个页面都会使用第三方支付支付:(微信,支付宝,银联)如果在每一个页面都直接调用第三方支付的接口全部 ...

  5. iOS支付宝,微信,银联支付集成封装(上)

    一.集成支付宝支付 支付宝集成官方教程https://docs.open.alipay.com/204/105295/ 支付宝集成官方demo https://docs.open.alipay.com ...

  6. 【移动支付】.NET微信扫码支付接入(模式二-NATIVE)

    一.前言       经过两三天的琢磨总算完成了微信扫码支付功能,不得不感叹几句: 微信提供的DEMO不错,直接复制粘贴就可以跑起来了: 微信的配置平台我真是服了.公众平台.商户平台.开放平台,一个平 ...

  7. Android H5调起原生微信或支付宝支付

    Android H5调起原生微信或支付宝支付 WebView调用原生微信或支付宝回调:其原理就是在shouldOverrideUrlLoading(final WebView view, String ...

  8. H5 网站支付宝支付(前端部分)包含微信浏览器中的处理方法。

    手机网站唤起支付宝支付: H5 网站实现支付宝支付是一个很常见的需求: 实现方式主要是在后台配置和预支付, 前端需要做的就是唤起 支付宝App 然后就可以输入密码支付. 这个其实难度很低, 主要就是在 ...

  9. IOS 支付宝、微信回调传值给H5网页

    这里用是的苹果原生和JS的交互 .有不明白JavaScriptCore框架的可以去网上搜索下这方面的资料很多废话不多说直接上代码 @protocol JSContextDelegate <JSE ...

  10. 微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付解决方案总结

    最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付.APP微信支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存. 先说注意 ...

随机推荐

  1. drf从入门到飞升仙界 08

    断点调试使用 # 程序在debug模式运行,可以在任意位置停下,查看当前情况下变量数据的变化情况 # 使用pycharm调试程序 - 1.以debug模式运行. - 2.在代码左侧加入断点(红圈) - ...

  2. vue-element-admin框架连接yapi配置vue.config.js

    devServer: { host:'localhost', port:port, proxy:{ [process.env.VUE_APP_BASE_API + '/admin']: { //配置p ...

  3. js通过hook拿fetch返回数据

    前言 很多情况下咱们在做浏览器插件的时候需要拿fetch的返回数据而不影响功能正常操作. 原理 hook原理咱就不讲了,跟其他hook差不多.具体来看看如何实现返回的. 用过fetch的朋友应该都知道 ...

  4. 如何删除Word文档中的空白页

    需求 平常我们写 Office 文档的时候,经常会不小心多加几页空白,那么如何删除 word 文档中的空白页呢? 小编结合网友提供的办法和亲身测试的操作经验,给大家提供几个可行的方案. 原文:如何删除 ...

  5. 微信开发获取code的时候总是提示 10003 redirect_uri域名与后台配置不一致

    填写的地址不能加 http://

  6. mysql数据库新建用户,并赋予权限

    新建用户: CREATE USER 'testuser'@'LOCALHOST' IDENTIFIED BY '123456'; 赋予权限: grant select on *.* to 'testu ...

  7. Qt使用图片旋转绘制圆环,圆弧类UI界面(方法可适用于winform和WPF等其余UI绘制)

    先上效果图: 这个主要是一个试剂杯盘的循环图,相信大家伙一定都想到了使用GDI和三角函数来进行计算,但如果没有实际尝试,可能会踩一些坑,留此文帮助大家方便快捷的绘制出类似圆环的UI效果. 这里主要是使 ...

  8. [OC] UIWebView APIs 的替换 以及转用WKWebView后的部分问题

    一.检查工程中的 UIWebView 1.打开终端,cd + 把项目的工程文件所在文件夹拖入终端(即 得到项目的工程文件所在的路径) 2.输入以下命令: grep -r UIWebView . 注意最 ...

  9. java spring 理解

    1.spring IOC容器 其实就是 new 了一个 ApplicationContext 类对象.->应用上下文对象. 2.应用上下文对象 实例化.配置,并管理 bean. 所以上下文对象是 ...

  10. 路飞项目 day03 前端配置、后台主页、项目依赖问题

    一.路飞项目前端配置 1.先删除一些不要的 ​ 删除多余的组件,只要app和首页组件 ​ 然后改一下组件的内部代码 -App.vue中 ______________ <template> ...