uniapp支付大全

H5微信支付（jsAPI）

bug1：H5的jsAPI需要先授权，获取code，才能获取支付参数，在授权时报redirect_uri参数错误

url必须是线上地址
url需要编码
需要在公众号后台配置网页授权域名

bug2:当前页面的URL未注册https://ddcity.brt999.com/h5/
在微信支付商户平台，jsAPI支付配置添加 url：https://ddcity.brt999.com/h5/

app微信支付

bug：支付失败：签名不对应

微信开放平台关联app，所有app可用一个证书，所以可以用一个签名，证书相同同一个手机只能装一个app，签名修改后需要等一会儿再试才可以
微信支付商户平台支付关联app
manifest配置AppID和secret

代码

<template><view class="box"><view class="mt-85 text-center size-26"><text class="mr-10">支付剩余时间</text><u-count-down :timestamp="time" font-size="26"></u-count-down></view><view class="yellow bold mt-15 text-center"><text>￥</text><text class="size-40">{{price}}</text></view><view class="bg-white pt-30 mt-80"><view class="size-34 bold plr-36 mb-20">支付方式</view><u-radio-group v-model="value" class="plr-36" active-color="#ff9900"><u-radio name="1" class="w100 bb ptb-30"><view class="flex_l"><image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/wx.png" mode=""></image>微信支付</view></u-radio><!-- #ifdef APP-PLUS --><u-radio name="2" class="w100 ptb-30"><view class="flex_l"><image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/zfb.png" mode=""></image>支付宝支付</view></u-radio><!-- #endif --><u-radio name="3" class="w100 ptb-30"><view class="flex_l"><image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/wallet.png" mode=""></image>余额支付</view></u-radio></u-radio-group></view><view class="fixed-bottom pb-100"><u-button type="warning" @click="pay">确认支付</u-button></view></view>
</template><script>import {mapState} from 'vuex'export default {data() {return {order_id: '',price: '',time: 0,value: 1,code: '',};},computed: {...mapState(['url'])},onLoad(option) {this.order_id = option.order_idthis.init()// #ifdef H5console.log(location.href);// 回调回来接收code，然后调取支付if (location.href.includes('code')) {this.code = location.href.split('?')[1].split('&')[0].split('=')[1]this.payAPI()} else {//url要存起来，不然取消支付重新支付，url就变了this.$store.commit('getUrl', encodeURIComponent(location.href))}// #endif},methods: {init() {this.$http('/addons/ddshop/order/info', {order_id: this.order_id}).then(data => {this.price = data.discount_pricethis.time = data.createtime + 15 * 60 - (new Date()).getTime() / 1000console.log(this.time);})},pay() {// value  1 微信  2 支付宝  3 余额// 如果是H5的微信支付，需要先授权，授权回调回来获取code，再调取支付if (this.value == 1) {// #ifdef H5// 每一次都要重新授权获取code，因为code只能使用一次location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxaeef47f194907497&redirect_uri=${this.url}&response_type=code&scope=snsapi_base&state=STATE#wechat_re`// #endif// #ifdef MP-WEIXINlet _this = thisuni.login({provider: 'weixin',success(loginRes) {console.log(loginRes);_this.code = loginRes.code_this.payAPI()}});// #endif// #ifdef APP-PLUSthis.payAPI()// #endif} else {this.payAPI()}},payAPI() {this.$http('/addons/ddshop/order/pay', {order_id: this.order_id,type: this.value,// #ifdef APP-PLUSmethod: 'app',// #endif// #ifdef MP-WEIXINmethod: 'miniapp',code: this.code,// #endif// #ifdef H5method: 'mp',code: this.code,// #endif}, "POST").then(data => {console.log('支付参数1', data, this.value);//{// appid: "wxd5cdb23fa8a8a8a4"// noncestr: "ElHzMeZUqs676yRK"//    package: "Sign=WXPay"//  partnerid: "1601210852"// prepayid: "wx271544341817098433edb8b12397d20000"//    sign: "5E26B16FE8B6995D333F09A44A5C7EC3"//    timestamp: "1603784674"//}// 调取支付接口获取支付参数// 1、余额支付直接支付成功// 2、微信支付：则判断支付环境，分别走app支付、小程序支付和H5支付// 3、支付宝支付：走app支付if (this.value == 3) {uni.showToast({title: '支付成功'})setTimeout(() => {uni.navigateTo({url: '/pages/home/pay-success'})}, 1000)} else if (this.value == 1) {// #ifdef APP-PLUSconsole.log(999999);let _this = thisuni.requestPayment({provider: 'wxpay',orderInfo: data, //微信、支付宝订单数据success: function(res) {console.log('success:' + JSON.stringify(res));uni.showToast({title: '支付成功'})setTimeout(() => {uni.navigateTo({url: '/pages/home/pay-success'})}, 1000)},fail: function(err) {console.log('fail:' + JSON.stringify(err));uni.showToast({title: '支付失败，请重新支付',icon: 'none'})}});// #endif// #ifdef MP-WEIXINuni.requestPayment({provider: 'wxpay',timeStamp: data.timeStamp,nonceStr: data.nonceStr,package: data.package,signType: data.signType,paySign: data.paySign,success: function(res) {console.log('success:' + JSON.stringify(res));uni.showToast({title: '支付成功'})setTimeout(() => {uni.navigateTo({url: '/pages/home/pay-success'})}, 1000)},fail: function(err) {console.log('fail:' + JSON.stringify(err));uni.showToast({title: '支付失败，请重新支付',icon: 'none'})}});// #endif// #ifdef H5WeixinJSBridge.invoke('getBrandWCPayRequest', {appId: data.appId, //公众号名称，由商户传入nonceStr: data.nonceStr, //随机串package: data.package,signType: data.signType, //微信签名方式：timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数paySign: data.paySign //微信签名},function(res) {if (res.err_msg == "get_brand_wcpay_request:ok") {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。uni.showToast({title: '支付成功'})setTimeout(() => {uni.navigateTo({url: '/pages/home/pay-success'})}, 1000)} else {uni.showToast({title: '支付失败，请重新支付',icon: 'none'})}});// #endif} else if (this.value == 2) {// #ifdef APP-PLUSlet _this = thisuni.requestPayment({provider: 'alipay',orderInfo: data, //微信、支付宝订单数据success: function(res) {console.log('success:' + JSON.stringify(res));uni.showToast({title: '支付成功'})setTimeout(() => {uni.navigateTo({url: '/pages/home/pay-success'})}, 1000)},fail: function(err) {console.log('fail:' + JSON.stringify(err));uni.showToast({title: '支付失败，请重新支付',icon: 'none'})}});// #endif}})},radioChange(e) {this.value = e.detail.value},}}
</script><style lang="scss" scoped>/deep/.u-radio {display: flex;flex-direction: row-reverse;}/deep/.u-radio-group {width: 100% !important;}/deep/.u-radio__label {width: 100%;}
</style>

uniapp支付大全相关推荐

uniapp 支付（支付宝，微信支付）
uniapp 支付前端处理: // 发送到后台的数据 var payData = {"isUpgrade": 'N',"lavel": level," ...
uni-app支付功能
uni-app支付功能扫码查看原文前言近期一直在使用APP开发多端应用,IOS的APP.安卓的APP和H5网页,其中开发的APP使用到了微信和支付宝的支付,在此给大家分享出来,一起使用前置条件 ...
uni-app支付相关配置和代码（H5+APP+小程序+requestPayment service fail not found报错)
借鉴文章: uniapp 开发过程中遇到的微信支付调用失败 payment微信:-1]General errors","errCode":-100,"cod ...
uniapp支付之App、小程序、H5（微信端）、支付宝、百度支付、头条支付
APP支付(内置) appPay.js /*** 5+App支付,仅支持支付宝以及微信支付** 支付宝Sdk集成,微信sdk未集成** @param : provider(String) ->被 ...
uniapp支付之APP微信支付unicloud版（附源码）
1 先上效果图为啥要用 unicloud ? 不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https.只需要一个简单的云函数,就可以轻松的实现微信支付功能问:服务端语言是什么,有框架限 ...
uniapp支付页面模板
支付组件 <template><view><u-popup v-model="show" mode="bottom" :close ...
uniapp 支付流程
支付前添加链接描述然后我们在支付前请求后端(把课程id,课程名称,课程金额等等后端需要什么,传什么) 然后后端拿到金额去生成预支付交易单,返回前端需要的参数签名然后前端就会弹出支付框然 ...
uniapp支付功能实现
<template><view class="pageContainer"><u-navbar :title="$t('支付费用')&quo ...
uni-app支付与打包
支付功能 1.支付厂商获取id(微信开放平台) 2.在mainfest.json/App模块配置中设置payment支付 3.案例代码 <template><view>< ...

uniapp支付大全

H5微信支付（jsAPI）

app微信支付

代码

uniapp支付大全相关推荐

最新文章

热门文章