首页 > 编程语言 >微信小程序如何调起H5页面的支付?

微信小程序如何调起H5页面的支付?

时间:2024-09-26 16:27:15浏览次数:10  
标签:return indexOf 微信 程序 payData H5 支付 var 调起

做过微信公众号支付(JSAPI)的同学,会比较熟悉,调起微信支付所需要的六个必须参数:appId、timeStamp、nonceStr、package、signType。

JSAPI官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi_sl.php?chapter=7_7&index=6

微信小程序如何调起H5页面的支付?_小程序H5支付

我们再来看一下小程序支付的官方介绍:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_sl_api.php?chapter=7_7&index=5

微信小程序如何调起H5页面的支付?_微信支付_02


你会发现,他们调起支付的参数是一致的,那么也就是说,

只要在小程序里面,可以拿到公众号支付下单所返回的参数,也可以调起支付。

ok,那么我们如何通过公众号支付下单,然后把参数传递到小程序里面?

首先引入<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> 

js代码如下:

function minipay (wxCode, chargeMoney) {
	var outTime=$("#outTime").val();
	// 统一下单返回JS调取支付所需参数
	$.tenetAjax({
		url: PATH + "/wxa/getPayOrderMini",
		data: {'code':wxCode,'chargeMoney':chargeMoney},
		async: false,
		success: function(data){
			if(data.payOrderMap==null){
				$("#iformbtndID").html('<a class="btna bg1">支付失败,请返回重新进入</a>');
				return;
			}
 
			var isPay = data.payOrderMap.isPay;
			var errorMsg = data.payOrderMap.errorMsg;
			if(isPay==null || isPay==0){
				alert(errorMsg);
				$("#iformbtndID").html('<a class="btna bg1">'+errorMsg+'</a>');
				return;
			} else if (isPay==2) {
				$("#iformbtndID").html('<p>支付成功</p>');
				return;
			}
			var payDataStr = encodeURIComponent(JSON.stringify(data.payOrderMap));//因为要吧参数传递给小程序,所以这里需要转为字符串
		    const url = '/pages/wePay/wePay?payDataStr=' + payDataStr;
		       wx.miniProgram.navigateTo({
		           url: url
		       });
		}
	});
}

然后在小程序端,写一个页面wepay,接收参数

也可以参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_sl_api.php?chapter=7_7&index=5

以下是部分代码:

Page({
  //h5传过来的参数
  onl oad: function(options) {
    console.log("webview传过来的参数", options)
    //字符串转对象
    let payData = JSON.parse(options.payDataStr)
    console.log("payData", payData)
 
    //支付
    wx.requestPayment({
      timeStamp: payData.timeStamp,
      nonceStr: payData.nonceStr,
      package: payData.package,
      signType: 'MD5',
      paySign: payData.paySign,
      success(res) {
        console.log("支付成功", res)
        // 支付成功跳转页面
        wx.navigateTo({
          url: '/pages/paysuc',
        })
      },
      fail(res) {
        console.log("支付失败", res)
      }
    })
 
})

返回结果:

微信小程序如何调起H5页面的支付?_微信支付_03


one more things ,再贴一下如何判断是否在小程序里面。

// 浏览器对象
	var ua = getBrowser();
 
	// 微信支付
	if (ua.match("micromessenger")) {
		var mini=0;
	    // ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)
        wx.miniProgram.getEnv((res) => {
	       if (res.miniprogram) {
// 	           alert("在小程序里");
	           mini=1;
	       }
        })
        if (mini==1) {
            minipay(wxCode, punitId, iden, chargeMoney, channelId);
            return;
        }
	   	weixinpay(wxCode, punitId, iden, chargeMoney, channelId);
	}
 
 
//获取浏览器对象
function getBrowser() {
	var browser = {
		versions : function() {
			var a = navigator.userAgent, b = navigator.appVersion;
			return {
				trident : a.indexOf("Trident") > -1,
				presto : a.indexOf("Presto") > -1,
				webKit : a.indexOf("AppleWebKit") > -1,
				gecko : a.indexOf("Gecko") > -1 && a.indexOf("KHTML") == -1,
				mobile : !!a.match(/AppleWebKit.*Mobile.*/),
				ios : !!a.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
				android : a.indexOf("Android") > -1
						|| a.indexOf("Linux") > -1,
				iPhone : a.indexOf("iPhone") > -1,
				iPad : a.indexOf("iPad") > -1,
				webApp : a.indexOf("Safari") == -1
			}
		}(),
		language : (navigator.browserLanguage || navigator.language)
				.toLowerCase()
	};
	return navigator.userAgent.toLowerCase();//获取判断用的对象
}



ok,在仔细看文档,发现小程序支付,必须使用小程序的appid

微信小程序如何调起H5页面的支付?_小程序H5支付_04

这里我们使用的是服务商模式的小程序支付,所以我们把小程序的appid作为sub_appid参数,传入下单接口里面,再次支付,提示 “sub_appid和sub_mchid不匹配”,这个需要在服务商功能里面,找到sub_mchid,配置关联appid

微信小程序如何调起H5页面的支付?_小程序H5支付_05

配置完成之后,就可以支付成功了。。。。


支付可能存在的问题

 微信小程序如何调起H5页面的支付?_小程序H5支付_06


特别提醒:对应主题不一样的appid添加,需要3方确认(服务商,特约商户,小程序)

特约商户方

微信小程序如何调起H5页面的支付?_小程序H5支付_07

小程序方

微信小程序如何调起H5页面的支付?_微信支付_08


标签:return,indexOf,微信,程序,payData,H5,支付,var,调起
From: https://blog.51cto.com/u_17028482/12119792

相关文章

  • 微信小程序修改radio颜色
    看效果: 代码:<radio-group@change="onRadioChange"><label><radiovalue="同意"style="margin-right:30rpx">同意</radio></label><label><radiovalue="不同意">不同意</radio>......
  • 基于微信小程序的校园二手平台{UNIAPP+SSM+MySQL+Vue}
    目录一、前言二、技术介绍三、系统实现四、论文参考五、核心代码六、数据库文件 七、其他案例八、源码获取作者介绍:✌️大厂全栈码农|毕设实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。✌️作者博客:曾几何时......
  • 【开题报告+文档+源码】基于微信小程序的卫生院预约挂号管理系统的设计与实现
    项目背景与意义随着信息技术的迅猛发展和互联网的普及,传统医疗服务模式正面临着数字化、智能化的转型需求。特别是在医疗资源紧张、看病难、挂号难问题日益突出的背景下,借助互联网技术优化医疗服务流程,提升医疗服务效率和质量,成为当前医疗改革的重要方向之一。微信小程序作为......
  • 微信支付开发-支付工厂AppApi查账代码
    一、JSAPI支付产品、APP支付产品、小程序支付产品流程图二、工厂父类抽象类代码开发<?php/***微信父类抽象类*User:龙哥·三年风水*Date:2024/9/19*Time:11:33*/namespacePayment\WechatPay;abstractclassWechatPaymentHandle{/***下单......
  • 基于SpringBoot+Vue+uniapp微信小程序的小区租拼车管理信息系统的详细设计和实现
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我成功案例代码参考数据库参考源码获取前言......
  • 基于SpringBoot+Vue+uniapp微信小程序的电影院订票选座小程序的详细设计和实现
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我成功案例代码参考数据库参考源码获取前言......
  • 基于微信小程序的社区团购+ssm(lw+演示+源码+运行)
    摘要社会的发展和科学技术的进步,互联网技术越来越受欢迎。手机也逐渐受到广大人民群众的喜爱,也逐渐进入了每个会员的使用。手机具有便利性,速度快,效率高,成本低等优点。因此,构建符合自己要求的操作系统是非常有意义的。本文从管理员、商家、会员的功能要求出发,社区团购系统中......
  • 基于微信小程序的商品展示+ssm(lw+演示+源码+运行)
    商品展示系统摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序被用户普遍使用,为方便用户能够可以随时进行小程序的相应信息内容的管理,特开发了基于微信小程序的......
  • jenkins 搭建 uniapp h5部署服务
    项目中需要适用jenkins搭建uniapph5部署服务,初次接触,踩了很多坑,记录下主要分为两步骤:1.创建uniapp打包环境由于创建打包环境的步骤有手动确定项目,所以不能通过jenkins自动创建,需要先到目录中手动配置环境2.搭建jenkins自动化部署步骤任务把jenkins工作目录配置为刚才的环......
  • 如何正确的在项目中接入微信JS-SDK
    微信JS-SDK的功能如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了。微信的官方文档描述如下。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的......