uniapp 支付（vx、zfb、app、内嵌H5）

本人在做商城项目，需要多种支付方式，在这里记录一下，小白学习，勿喷

在项目路径下创建 common文件夹（随你起什么名），新建js文件 payment.js

/*** 支付相关方法*//*** 微信小程序支付* @param {function} paymentParams 支付参数* @param {function} paySuccess 支付成功回调* @param {function} payFail 支付失败回调*/
export function wechatMiniPay(paymentParams,paySuccess,payFail) {uni.requestPayment({provider: 'wxpay',//支付类型-固定值timeStamp: paymentParams.timeStamp,// 时间戳（单位：秒）nonceStr: paymentParams.nonceStr,// 随机字符串package: paymentParams.package,// 固定值signType: paymentParams.signType,//固定值paySign: paymentParams.paySign,//签名success(res) {paySuccess(res)},fail: function (err) {payFail(err)}})
}/*** 微信App支付* @param {function} paymentParams 支付参数* @param {function} paySuccess 支付成功回调* @param {function} payFail 支付失败回调*/
export function wechatAppPay(orderInfo,paySuccess,payFail) {uni.requestPayment({provider: 'wxpay',orderInfo:orderInfo,success(res) {paySuccess(res)},fail: function (err) {payFail(err)}})
}/*** 手机浏览器h5支付* @param {Object} paymentParams* @param {Object} paySuccess* @param {Object} payFail*/
export function mobileH5Pay(response,paySuccess,payFail) {location.href = response.gateway_url}
/*** 微信内嵌h5支付* @param {Object} paymentParams* @param {Object} paySuccess* @param {Object} payFail*/
export function wechatH5Pay(paymentParams,paySuccess,payFail) {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":paymentParams.appId,     //公众号名称，由商户传入"timeStamp":paymentParams.timeStamp,        //时间戳，自1970年以来的秒数"nonceStr":paymentParams.nonceStr, //随机串"package":paymentParams.package,"signType": paymentParams.signType,        //微信签名方式"paySign":paymentParams.paySign //微信签名},function(res){paySuccess(res)if(res.err_msg == "get_brand_wcpay_request:ok" ){}});
}/*** 支付宝H5支付* 在* @param {Object} paymentParams* @param {Object} paySuccess* @param {Object} payFail*/
export function aliPayH5(response,paySuccess,payFail) {let $formItems = ''if(response.form_items){response.form_items.forEach(item => {$formItems += `<input name="${item.item_name}" type="hidden" value='${item.item_value}' />`})}let $form = `<form action="${response.gateway_url}" method="post">${$formItems}</form>`document.getElementsByClassName('__pay_form__')[0].innerHTML = $formdocument.forms[0].submit()}export function aliPayApp(response,paySuccess,payFail) {uni.requestPayment({provider: 'alipay',orderInfo: response.gateway_url, //支付宝订单数据success: function (res) {paySuccess()},fail: function (err) {console.log('fail:' + JSON.stringify(err));}});
}

在需要调用支付的页面引入

import * as Payment from '@/common/payment.js'

Payment.wechatH5Pay(response, this.payCallback, this.payFail)

uniapp 支付（vx、zfb、app、内嵌H5）相关推荐

UNI-APP在自定义组件中内嵌H5/Html网页，可自定义webview大小，加载不闪屏
问题描述: UNI-APP在自定义组件中内嵌H5/Html网页时,通过内置组件 web-view 实现(如下),发现会自动铺满整个页面,不可控制大小(默认充满屏幕不可控制大小) <web-vie ...
云闪付APP内嵌H5监听左上角X关闭事件
最近在做云闪付蓝牙对接,遇到的一个问题. 需求用户进入云闪付APP内嵌 H5页面调用接口连上蓝牙后,可能不想支付使用,或其他原因,随手关闭左上角X关闭浏览器,这时需要监听这个动作,断开蓝牙连接,不然 ...
app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
关于app内嵌h5页面调用百度地图定位问题，为什么定位不准呢？
关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?以下为代码. 百度地图:里面有3种定位方式(a:浏览器定位,b:IP定位,c:定位SDK辅助定位),我选择第3种,是需要app那块添加些什 ...
app内嵌h5支付功能，跳转支付宝微信，vue组件
一.功能梳理 app内前h5涉及到支付的功能,ios非实物商品实付需要使用ios原生支付方式,实物商品则可以三方支付,主要的实现思路为后端返回跳转支付宝或微信的支付scheme链接,前端进行跳转支付, ...
H5 -- （功能）App内嵌h5网页实现芝麻认证的接入
1.需求:由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK,所以我们app芝麻认证只有通过内嵌H5页面实现 2.分析:通过调研 "芝麻认证"官方技术文档 ,接入芝麻认证的流 ...
H5-- （功能）App内嵌h5网页实现芝麻认证的接入
1.需求:由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK,所以我们app芝麻认证只有通过内嵌H5页面实现 2.分析:通过调研 "芝麻认证"官方技术文档 ,接入芝麻认证的流 ...
记录：app内嵌H5页面分享到微信后，在安卓手机打开白屏，苹果手机正常渲染的问题始末
**背景:**app内嵌的一个个人名片页面需要分享到微信,测试环境下,分享到微信后,安卓和苹果手机都能正常渲染,生产环境苹果手机没问题,安卓手机打开分享的链接,页面一直空白. **原因分析:**单独加 ...
APP内嵌H5开发常见问题及解决方案
前言作为一个开发了多个 H5 项目的前端工程师,在开发过程中难免会遇到一些兼容性等爬过坑的问题.现在我将这些问题一一汇总一下,并在后面给出坑产生的原理,和现阶段常规的填坑方案.由此来做一个阶段性的总 ...
android app内嵌h5页面,app内嵌h5页面：前端与原生语言的配合
判断操作系统: var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android' ...

uniapp 支付（vx、zfb、app、内嵌H5）

uniapp 支付（vx、zfb、app、内嵌H5）相关推荐

最新文章

热门文章