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

这篇具有很好参考价值的文章主要介绍了【uniapp调用微信支付】uniapp开发小程序-调用微信支付。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp调用微信支付,uniapp,小程序,微信,javascript

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

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

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

uniapp调用微信支付,uniapp,小程序,微信,javascript

第二步、代码

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

这里的timeStamp, nonceStr, package, signType, paySign是由后端与微信交互生成后,通过接口传递过来的,调用接口直接取出来即可。
uniapp调用微信支付,uniapp,小程序,微信,javascript文章来源地址https://www.toymoban.com/news/detail-523739.html

<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)},
			});
		})
	},
					

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("支付失败");                        
    });

完成~

到了这里,关于【uniapp调用微信支付】uniapp开发小程序-调用微信支付的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包