服务商模式下,微信小程序如何调起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

相关文章

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中,不同电脑的配置和操作系统(如Win11与Win7)可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行,需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下,使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此,在开发程序时,尽量使用

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 (最大值之和)给定整数序列 a0,⋯,an−1,求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr(其中0≤l≤r<n0≤l≤r<n)表示,对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同,当且仅当下标不同。 例如,当原序列为 [1,2,1,2] 时,要计算子序列 [

模版方法模式template method

学习笔记,原文链接 https://refactoringguru.cn/design-patterns/template-method 超类中定义了一个算法的框架, 允许子类在不修改结构的情况下重写算法的特定步骤。 上层接口有默认实现的方法和子类需要自己实现的方法

【iOS】MVC模式

MVC模式 MVC模式MVC模式demo MVC模式 MVC模式全称为model(模型)view(视图)controller(控制器),他分为三个不同的层分别负责不同的职责。 View:该层用于存放视图,该层中我们可以对页面及控件进行布局。Model:模型一般都拥有很好的可复用性,在该层中,我们可以统一管理一些数据。Controlller:该层充当一个CPU的功能,即该应用程序