服务商模式下,微信小程序如何调起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页面的支付?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/tm7796/article/details/108076250
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/696053

相关文章

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Java设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Redis Cluster模式配置

《RedisCluster模式配置》:本文主要介绍RedisCluster模式配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录分片 一、分片的本质与核心价值二、分片实现方案对比 ‌三、分片算法详解1. ‌范围分片(顺序分片)‌2. ‌哈希分片3. ‌虚

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》:本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一(适用于文件较少的程

RabbitMQ工作模式中的RPC通信模式详解

《RabbitMQ工作模式中的RPC通信模式详解》在RabbitMQ中,RPC模式通过消息队列实现远程调用功能,这篇文章给大家介绍RabbitMQ工作模式之RPC通信模式,感兴趣的朋友一起看看吧... 目录RPC通信模式概述工作流程代码案例引入依赖常量类编写客户端代码编写服务端代码RPC通信模式概述在R