服务商模式下,微信小程序如何调起H5页面的支付?

2024-02-10 03:50

本文主要是介绍服务商模式下,微信小程序如何调起H5页面的支付?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

 

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

 

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

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

 

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

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

js代码:

function minipay (wxCode, punitId, iden, chargeMoney, channelId) {var outTime=$("#outTime").val();// 统一下单返回JS调取支付所需参数$.tenetAjax({url: PATH + "/punitWS/getPayOrderMini",data: {'code':wxCode,'punitId':punitId,'iden':iden,'chargeMoney':chargeMoney,'channelId':channelId, 'outTime':outTime},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;}// JS调取微信支付//var appid = data.payOrderMap.appid;//var timeStamp = data.payOrderMap.timeStamp;//var nonceStr = data.payOrderMap.nonceStr;//var package1 = data.payOrderMap.package1;//var signType = data.payOrderMap.signType;//var paySign = data.payOrderMap.paySign;//var payOrderId = data.payOrderMap.payOrderId;var payDataStr = encodeURIComponent(JSON.stringify(data.payOrderMap));//因为要吧参数传递给小程序,所以这里需要转为字符串const url = '/pages/wePay/wePay?payDataStr=' + payDataStr;wx.miniProgram.navigateTo({url: url});}});
}

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();//获取判断用的对象
}

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

Page({//h5传过来的参数onLoad: 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)}})})

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

 

 

点击支付,报错

 

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

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

 

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

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

特约商户方:

小程序方:

这篇关于服务商模式下,微信小程序如何调起H5页面的支付?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/696053

相关文章

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

Linux系统配置NAT网络模式的详细步骤(附图文)

《Linux系统配置NAT网络模式的详细步骤(附图文)》本文详细指导如何在VMware环境下配置NAT网络模式,包括设置主机和虚拟机的IP地址、网关,以及针对Linux和Windows系统的具体步骤,... 目录一、配置NAT网络模式二、设置虚拟机交换机网关2.1 打开虚拟机2.2 管理员授权2.3 设置子

SpringBoot如何通过Map实现策略模式

《SpringBoot如何通过Map实现策略模式》策略模式是一种行为设计模式,它允许在运行时选择算法的行为,在Spring框架中,我们可以利用@Resource注解和Map集合来优雅地实现策略模式,这... 目录前言底层机制解析Spring的集合类型自动装配@Resource注解的行为实现原理使用直接使用M

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

大数据spark3.5安装部署之local模式详解

《大数据spark3.5安装部署之local模式详解》本文介绍了如何在本地模式下安装和配置Spark,并展示了如何使用SparkShell进行基本的数据处理操作,同时,还介绍了如何通过Spark-su... 目录下载上传解压配置jdk解压配置环境变量启动查看交互操作命令行提交应用spark,一个数据处理框架

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

SpringBoot基于沙箱环境实现支付宝支付教程

《SpringBoot基于沙箱环境实现支付宝支付教程》本文介绍了如何使用支付宝沙箱环境进行开发测试,包括沙箱环境的介绍、准备步骤、在SpringBoot项目中结合支付宝沙箱进行支付接口的实现与测试... 目录一、支付宝沙箱环境介绍二、沙箱环境准备2.1 注册入驻支付宝开放平台2.2 配置沙箱环境2.3 沙箱

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T