微信点金计划（服务商角度）

时间：2023/2/17

背景：微信在推出点金计划后，原本window.WeixinJSBridge.invoke方法的回调失效了，需要在微信支付服务商平台｜平台开放更多能力，与服务商一起成长这里进行配置，配置流程跟着官方给出的文档一步步进行就好。

一.坑点：

①如果想要跳回原来商家页面，必须要根据官方文档配置“商家小票”页面，不然只有自己手动关掉网页。

②“商家小票”调试工具里面的，“从业机构商户号”是银行/服务商的商户号，底部的2个单号，可以在微信支付的“账单”里面点进去查询到。

③“商家小票”页面是微信用iframe嵌入的一个模块，要注意是否根据文档要求，将微信设置为了白名单（我们这里是通过nginx配置）

二.前端代码

tips：因为各种原因，手撸了一个html页面，其实用vue页面也是可以的


<!-- 此页面是放到服务器下，可以直接访问，供微信支付回调 -->
<!DOCTYPE html>
<html lang="cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="referrer" content="origin"><meta name="viewport"content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><title>砼联数科支付</title><script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script><script src="./jsapiResult/jsFiles/vue.js"></script><script type="text/javascript" src="./jsapiResult/jsFiles/element.js"></script><script type="text/javascript" src="./jsapiResult/jsFiles/axios.js"></script><link rel="stylesheet" href="./jsapiResult/cssFiles/jsapiResult.css"><link rel="stylesheet" href="./jsapiResult/cssFiles/theme.css">
</head><body><div class="gold-pay-result" id="goldPayResult"><div class="top-logo middle-center"><el-button type="success" icon="el-icon-check" circle size="large"></el-button></div><div class="custom-name middle-center">{{ pageInfo.payerName }}</div><div class="co-line vertical-center"><div class="left-title">订单状态</div><div class="right-info">支付成功</div></div><div class="co-line vertical-center"><div class="left-title">支付流水尾号</div><div class="right-info">{{pageInfo.txnNo}}</div></div><div class="cut-line"></div><div class="co-line vertical-center"><div class="left-title">支付总额</div><div class="right-info money-cl">￥{{ pageInfo.amount }}</div></div><div class="bottom-btn middle-center"><el-button class="return-btn" type="primary" icon="el-icon-position" size="small" @click="backBusiness">返回商家平台</el-button></div><script>let app = new Vue({el: '#goldPayResult',data: {pageInfo: {payerName: '',txnNo: '',amount: ''}},mounted: function () {this.openCustomPage();this.getTraderInfo();},methods: {getTraderInfo() {const out_trade_no = this.glGetUrlParam('out_trade_no');const sub_mch_id = this.glGetUrlParam('sub_mch_id');const check_code = this.glGetUrlParam('check_code');// 判断如果字段都有值try {if (out_trade_no && sub_mch_id && check_code) {let url = "";let postData = {pmcNo: sub_mch_id}axios({method: 'POST',url: url, //   data: postData, //加密,headers: {"Content-Type": "application/json"},}).then((res) => {_re = res.data.message;_re.txnNo = _re.txnNo.substr(-4);Object.assign(this.pageInfo, _re);}).catch(err => {this.$message.error('调取信息接口异常!')})} else {this.$message.error('微信订单信息缺失!')}} catch (error) {this.$message.error('获取订单基本信息异常!');}},backBusiness() {// 跳转到指定的h5页面/小程序，智选平台要做特殊化处理，小程序直接跳网页let _addr = "";let jsapiJump = [];if (this.pageInfo.tradeType == 'JSAPI' || jsapiJump.indexOf(this.pageInfo.channelNo) !=-1) {_addr = this.pageInfo.jumpAddress1;} else {_addr =``  //跳小程序}this.$message.info(`即将跳回的地址信息为:${_addr}`);const mchData = {action: "jumpOut",jumpOutUrl: _addr,}; // 跳转到指定的页面并携带参数const postData = JSON.stringify(mchData);window.parent.postMessage(postData, "*");},openCustomPage() {let mchData = {action: 'onIframeReady',displayStyle: 'SHOW_CUSTOM_PAGE'}let postData = JSON.stringify(mchData)window.parent.postMessage(postData, '*')},glGetUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配var context = "";if (r != null)context = decodeURIComponent(r[2]);reg = null;r = null;return context == null || context == "" || context == "undefined" ? "" : context;}},})</script>
</body></html>

引入的头部文件，除了./jsapiResult/cssFiles/jsapiResult.css这个文件外，其他直接去网上扒拉资源就好，我这里都是自己下载下来放置为静态文件调用,这个样式文件如下

.gold-pay-result {padding: 10px 20px 20px 20px;width: calc(100% - 40px);font-size: 14px;margin-bottom: 10px;background: white;
}.gold-pay-result .top-logo {width: 100%;margin: 10px 0px;
}.gold-pay-result .success-cl {font-size: 20px;font-weight: bold;
}.gold-pay-result .custom-name {width: 100%;margin: 10px 0px 25px 0px;
}.gold-pay-result .cut-line {height: 2px;width: 100%;margin: 5px 0px;border-bottom: 1px solid lightgray;
}.gold-pay-result .co-line {width: 100%;margin: 12px 0px;
}.gold-pay-result .left-title {color: gray;
}.gold-pay-result .return-btn {font-size: 14px;margin-top: 15px;
}.gold-pay-result .right-info {margin-left: auto;
}.gold-pay-result .money-cl {font-size: 18px;}.gold-pay-result.bottom-btn {width: 100%;margin-top: 25px;
}.vertical-center {display: flex;align-items: center;
}.middle-center {display: flex;align-items: center;justify-content: center;
}

三.因为微信的前端回调没有跳转小程序的方法，所以设置了一个空白页面，先跳转到空白页面，空白页面再跳转到小程序，空白页面代码如下

<!-- 小程序的结果页面，空白页，主要负责跳转回小程序 -->
<template><div class="mini-pay-result full-page"></div>
</template><script setup>
import { onMounted } from "vue";
import { getUrlParam } from "@/utils/tools.js"
import { ElMessage } from 'element-plus';
onMounted(() => {jumpToMiniPro();
});function jumpToMiniPro() {try {let params = getUrlParam('jumpAddress');if (!params.jumpAddress) {ElMessage.error('获取小程序跳转地址失败，请关闭后重新进入!');return;}wx.miniProgram.redirectTo({ url: params.jumpAddress });} catch (error) {ElMessage.error('小程序跳转失败，即将关闭当前页');setTimeout(() => {window.close();}, 2000);}
}
</script><style lang="scss" scoped>
.mini-pay-result {}
</style>

getUrlParam方法就是一个很普通的获取url参数的方法

wx.miniProgram.redirectTo需要引入

这个文件，我目前是放置在index.html里面

微信点金计划（服务商角度）相关推荐

微信支付服务商点金计划
点金计划简介点金计划是微信支付官方提供的支付后跳转能力的升级计划. 1.产品简介:微信支付平台提供支付后页面模板,支持账单展示.服务性内容展示.流量位推广等功能.其中,流量位推广指接入微信广告平台 ...
微信支付点金计划和商家小票的开发教程
微信支付成功的跳转页面,点金计划和商家小票的开发教程最近和一家企业合作,考虑怎么流量互换,于是就有了微信支付完后的跳转页面,利用微信的点金计划,展示商家小票的功能,作为初步方案. 直接进入主题,下面 ...
平安陆金所-点金计划，简直是骗子行为。
陆金所点金计划,让人防不胜防. 平安保险,骗子中的教练. 转载于:https://www.cnblogs.com/hthf/p/5205921.html
微信小程序服务商下子商户支付下单接口
微信小程序服务商下子商户支付下单流程调用方法 <?php namespace app\index\controller; class WeixinPay extends Base { prot ...
企业微信标准应用服务商入门考试--2021
企业微信标准应用服务商入门考试–2021 一. 单选题相关文档详情:更多详情 1.审批记录的保存期限 A. 半年 B. 一年 C. 五年 D. 永久保存 √ 2.企业标准应用服务商的合作层级可以分几 ...
微信小程序服务商模式支付巨坑解决！
今日有个在同一个小程序支付款项需要付到不同的银行卡里去??? 于是找了下微信小程序支付文档,只有个requestPayment方法 emmm 去看看小程序后台吧 ok 有个微信支付但是只能绑定一 ...
微信生态SaaS服务商“微赞”完成数千万A轮融资，钜鑫资本投资
9月12日消息,微信生态SaaS服务商"微赞"宣布完成数千万A轮融资,投资方为钜鑫资本.本轮资金主要用于产品和团队的优化,开拓更为广阔的企业培训市场. 微赞早期是一个为微信公众号粉 ...
张小龙2018PRO版微信公开课演讲全文透露2018微信全新计划
大家好!我是张小龙.欢迎大家来到微信公开课. 刚刚出现的是我打游戏的画面,被大家看到了,那个不是我最好的水平,因为有点紧张,我最高分曾打到6000多分.当然我是练习了很久了,并不是我比大家更厉害,而是 ...
张小龙现场“约战”跳一跳，发布2018微信全新计划（内附演讲全文）
大家好!我是张小龙.欢迎大家来到微信公开课. 刚刚出现的是我打游戏的画面,被大家看到了,那个不是我最好的水平,因为有点紧张,我最高分曾打到6000多分.当然我是练习了很久了,并不是我比大家更厉害,而是 ...

微信点金计划（服务商角度）

微信点金计划（服务商角度）相关推荐

最新文章

热门文章