当前位置:   article > 正文

【uniapp调用微信支付】uniapp开发小程序-调用微信支付_uniapp 微信小程序支付

uniapp 微信小程序支付

在这里插入图片描述

使用uniapp开发小程序时,调用微信支付的步骤如下:

第一步、manifest.json里配置相关参数

1.在manifest.json - App模块权限选择 中勾选 payment(支付)
2.在 manifest.json - App SDK配置 中,勾选需要的支付平台,目前有微信支付、支付宝支付、苹果应用内支付(IAP),其中微信支付需要填写从微信开放平台获取的

在这里插入图片描述

第二步、代码

1.微信小程序支付-代码:

这里的timeStamp, nonceStr, package, signType, paySign是由后端与微信交互生成后,通过接口传递过来的,调用接口直接取出来即可。
在这里插入图片描述

<view class="footbut" @tap="payBtn(goodsdetail.id)">立即购买</view>

	// ①立即购买-订单提交
	payBtn(id) {
		var that = this;
		var data = {
			id:id
		}
		this.$api.appPlateForm('POST', this.$url.url.wx_order_submit, data, function(res) {
			console.log("订单提交", res)
			that.payment(res.data.order_id)  //调用支付接口
		})
	},

	//②支付接口
	payment(order_id) {
		var that = this;
		var data = {
			order_id: order_id
		}
		this.$api.appPlateForm('POST',this.$url.url.wx_order_paydata, data, function(res) {
			console.log("订单提交", res)
			uni.requestPayment({
				provider: 'wxpay', //支付类型-固定值
				timeStamp: res.data.timeStamp, // 时间戳(单位:秒)
				nonceStr: res.data.nonceStr, // 随机字符串
				package: res.data.package, // 固定值
				signType: res.data.signType, //固定值
				paySign: res.data.paySign, //签名
			
				success: function(res) {
					// console.log('success:' + JSON.stringify(res));
					console.log("支付成功");
					uni.showToast({
						icon: 'success',
						title: '支付成功'
					})
					
					//清空输入框
					that.name = ''
					that.idcard = ''
					
					//2秒后跳转订单列表
					setTimeout(() => {
						uni.navigateTo({url:'/pages/shop/uni_order'})}, 2000)
					},
			
				fail: function(err) {
					// console.log('fail:' + JSON.stringify(err));
					console.log("支付失败");
					uni.showToast({
						icon: 'none',
						title: '支付失败'
					})
					// //2秒后返回
					// setTimeout(() => {uni.navigateBack() }, 2000)},
			});
		})
	},
					
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

2.APP支付代码:

//订单对象,从服务器获取
var orderInfo = {
  "appid": res.data.orderInfo.appId,  // 应用ID(AppID)
  "partnerid": res.data.orderInfo.partnerId, // 商户号(PartnerID)
  "prepayid": res.data.orderInfo.prepayId,  // 预支付交易会话ID
  "package": res.data.orderInfo.packageValue,        // 固定值
  "noncestr": res.data.orderInfo.nonceStr, // 随机字符串
  "timestamp": res.data.orderInfo.timeStamp, // 时间戳(单位:秒)
  "sign": res.data.orderInfo.sign, // 签名,这里用的 MD5 签名
};

uni.requestPayment({
    provider: "wxpay",
    orderInfo: orderInfos,
    success(res) {
            console.log('success:' + JSON.stringify(res));
            console.log("支付成功");
    },
    fail(err) {
            console.log('fail:' + JSON.stringify(err));
            console.log("支付失败");                        
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

完成~

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/700287
推荐阅读
相关标签
  

闽ICP备14008679号