前端微信支付代码(公众号支付)

一.场景 (完成代码见附录)

其他商户跳转到我们支付页面，传入参数openId,fromTradeType,订单号，流水号，借由我们页面进行微信支付。具体在小程序后台如何配置，见微信官方文档。

二.包引入部分

import _ from "lodash";

引入lodash主要使用防抖功能

三.控制微信支付按钮显示隐藏的代码

this.showWxPay = this.isWeChat() && tmp.subOpenId;isWeChat() {let ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true; //是微信内部} else {return false;}},

满足1.是在微信内核进入。2.传入了openId

四.点击微信支付后的流程代码

 wxPay: _.debounce(function () {let url = "";        //接口获取后端timeStamp，nonceStr等微信支付拉起的参数let data = this.wxParams;if (!this.passJudge(data)) {        //对进入的数据进行判读，必须每一个数据都是存在的//对参数做一次校验return;}this.$axios.post({url,data,headers: { "Content-Type": "application/json" },}).then((res) => {this.$emit("getPayResult",);let judge =res.hasOwnProperty("data") &&res.data.hasOwnProperty("ERRCODE") &&res.data.ERRCODE == "000000" &&res.status == "SUCCESS";if (judge) {let _data = res.data;this.weChatParameter = {        //记录拉起支付的参数//微信搭桥需要的数据appid: _data.appId || "",timeStamp: _data.timeStamp || "",nonceStr: _data.nonceStr || "",package: _data.package || "",signType: _data.signType || "",paySign: _data.paySign || "",};this.weixinPay(); //微信内置对象判断} else {this.$message({message: res.retMsg || "提交订单失败",type: "warning",});}}).catch((error) => {this.$message({message: "提交订单失败",type: "warning",});});}, 240),

其中，passJudge函数为:

 passJudge(data) {if (!data) {this.$message.error("缺少请求参数");return false;}if (!data.reOrderNo) {this.$message.error("缺失参数:reOrderNo");return false;}if (!data.tranNo) {this.$message.error("缺失参数:tranNo");return false;}if (!data.subOpenId) {this.$message.error("缺失参数:subOpenId");return false;}if (!data.fromTradeType) {this.$message.error("缺失参数:fromTradeType");return false;}return true;},

五.进行微信搭桥，进行环境处理

let that = this;if (typeof WeixinJSBridge == "undefined") {if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady",that.onBridgeReady(),false);} else if (document.attachEvent) {document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady());}} else {that.onBridgeReady();}

六.环境准备好后，拉起支付

onBridgeReady() {let that = this;let timestamp = Math.round(this.weChatParameter.timeStamp).toString();window.WeixinJSBridge.invoke("getBrandWCPayRequest",{appId: that.weChatParameter.appid, //公众号名称，由商户传入timeStamp: timestamp, //时间戳，自1970年以来的秒数nonceStr: that.weChatParameter.nonceStr, //随机串package: that.weChatParameter.package,signType: that.weChatParameter.signType, //微信签名方式：paySign: that.weChatParameter.paySign, //微信签名// jsApiList: ["chooseWXPay"],},function (res) {that.$emit("getPayResult",`拉起支付返回结果为:${JSON.stringify(res)}`);// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。if (res.err_msg == "get_brand_wcpay_request:ok") {//支付成功that.$emit("toSuccess");} else if (res.err_msg == "get_brand_wcpay_request:cancel") {//取消支付} else {//支付失败that.$emit("toFail");}});},

七.附录：完整代码

<template><div class="check-box" @click="wxPay"><img src="../../../assets/images/normal/pay/phone.png" class="check-img" /><div class="check-word">微信支付</div></div>
</template><script>
import _ from "lodash";
import Bus from "@/utils/bus.js";
export default {data() {return {weChatParameter: "",};},props: {wxParams: {type: Object,default: {},},},created() {},mounted() {Bus.$on("getDetail", (amount, settlementNo, reconciliationTime) => {this.payAmount = amount;this.amount = amount;this.settlementNo = settlementNo;this.reconciliationTime = reconciliationTime;});},components: {},computed: {},watch: {},methods: {wxPay: _.debounce(function () {let url = "";let data = this.wxParams;this.$emit("changeWay", 3);if (!this.passJudge(data)) {//对参数做一次校验return;}this.$axios.post({url,data,headers: { "Content-Type": "application/json" },}).then((res) => {this.$emit("getPayResult","进入/cashier/PublicPay，数据为：" + JSON.stringify(res));let judge =res.hasOwnProperty("data") &&res.data.hasOwnProperty("ERRCODE") &&res.data.ERRCODE == "000000" &&res.status == "SUCCESS";if (judge) {let _data = res.data;this.weChatParameter = {//微信搭桥需要的数据appid: _data.appId || "",timeStamp: _data.timeStamp || "",nonceStr: _data.nonceStr || "",package: _data.package || "",signType: _data.signType || "",paySign: _data.paySign || "",};this.weixinPay(); //微信内置对象判断} else {this.$message({message: res.retMsg || "提交订单失败",type: "warning",});}}).catch((error) => {this.$message({message: "提交订单失败",type: "warning",});});}, 240),weixinPay() {let that = this;if (typeof WeixinJSBridge == "undefined") {if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady",that.onBridgeReady(),false);} else if (document.attachEvent) {document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady());}} else {that.onBridgeReady();}},//微信内置浏览器类onBridgeReady() {let that = this;let timestamp = Math.round(this.weChatParameter.timeStamp).toString();this.$emit("getPayResult","进入onBridgeReady，数据为：" + JSON.stringify(that.weChatParameter));window.WeixinJSBridge.invoke("getBrandWCPayRequest",{appId: that.weChatParameter.appid, //公众号名称，由商户传入timeStamp: timestamp, //时间戳，自1970年以来的秒数nonceStr: that.weChatParameter.nonceStr, //随机串package: that.weChatParameter.package,signType: that.weChatParameter.signType, //微信签名方式：paySign: that.weChatParameter.paySign, //微信签名// jsApiList: ["chooseWXPay"],},function (res) {that.$emit("getPayResult",`拉起支付返回结果为:${JSON.stringify(res)}`);// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。if (res.err_msg == "get_brand_wcpay_request:ok") {//支付成功that.$emit("toSuccess");} else if (res.err_msg == "get_brand_wcpay_request:cancel") {//取消支付} else {//支付失败that.$emit("toFail");}});},passJudge(data) {if (!data) {this.$message.error("缺少请求参数");return false;}if (!data.reOrderNo) {this.$message.error("缺失参数:reOrderNo");return false;}if (!data.tranNo) {this.$message.error("缺失参数:tranNo");return false;}if (!data.subOpenId) {this.$message.error("缺失参数:subOpenId");return false;}if (!data.fromTradeType) {this.$message.error("缺失参数:fromTradeType");return false;}return true;},},
};
</script><style lang="scss" scoped>
.check-box {padding: 0px 10px;height: 28px;display: flex;justify-content: center;align-items: center;border: 1px solid rgb(220, 220, 220);margin-left: 10px;cursor: pointer;.check-img {width: 18px;height: 18px;}.check-word {margin-left: 5px;font-size: 14px;}
}
</style>

前端微信支付代码(公众号支付)相关推荐

微信支付 php详解,微信支付之公众号支付详解
本文主要和大家分享微信支付之公众号支付详解,随着微信支付的流行,大多产品都开发了自己的公众号.小程序等,产品的营销需要支付的支撑,最近做了个微信公号号支付,采坑无数,今天给大家分享一下,希望能帮助到大 ...
php微信公众号支付实例教程,php微信支付之公众号支付功能
这篇文章主要为大家详细介绍了php微信支付之公众号支付功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下网上的很多PHP微信扫码支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通过整理后 ...
微信支付、公众号支付、微信APP支付教程
这两天有朋友问我微信支付的一些事情,我就抽了点时间整理了一下微信支付相关的一些东西,在这里分享给大家,希望能帮助大家少走弯路. 微信支付分为APP支付和公众号支付两大类,其中公众号支付又分为(公众号支 ...
APP支付和公众号支付区别在哪？
PP支付与公众号支付容易搞混淆,尤其对于一些半专业的外行人来说,傻傻分不清. 随着移动支付的盛行,或者说随着微信社交产品的全民普及,再加上消费者被一轮又一轮的支付大战烧脑,再不懂支付的也都了解那么丁点 ...
什么是APP支付和公众号支付
APP支付与公众号支付容易搞混淆,尤其对于一些半专业的外行人来说,傻傻分不清. 随着移动支付的盛行,或者说随着微信社交产品的全民普及,再加上消费者被一轮又一轮的支付大战烧脑,再不懂支付的也都了解那么丁 ...
微信支付（公众号支付）微信公众平台开发教程（5）
简介 Senparc.Weixin SDK 是由盛派网络(Senparc)团队自主研发的针对微信各模块的开发套件(C#SDK), 已全面支持微信公众号.微信支付.企业号.开放平台.JSSDK.摇一摇 ...
微信h5支付和公众号支付、支付宝h5支付
1.微信h5支付: 首先是支付参数的构建,这个需要通过后台进行组装,后台会跟微信进行数据的交互,而你所需要做的是拿到返回的数据,然后传递给微信的JSSDK,由微信的JSSDK进行后续操作,比如说先跳转 ...
微信支付之公众号支付
经过近一周的敲代码,终于把公众号支付和H5支付实现完成并测试通过,特此分享一些流程,一方面自己记录另一方面给新入门的一点思路 [本文介绍普通商户的公众号支付] 一.基本信息和配置公众号支付的前提是要 ...
【微信开发】---- 公众号支付
公众号支付就是在微信里面的H5页面唤起微信支付,不用扫码即可付款的功能.做这个功能首先要明确的就是,只有和商户号mch_id匹配的appid才能成功支付.商户号在注册成功的时候就会将相关信息发送到邮箱 ...
微信H5支付、非微信H5支付、公众号支付、小程序支付
文章目录前言一.微信H5支付和非微信H5支付二.公众号支付三.小程序支付总结前言最近公司又要搞微信支付,大体上就是把app上VIP那一套内容但做成网页版,更方便用户去购买vip,老板就让 ...

前端微信支付代码(公众号支付)

前端微信支付代码(公众号支付)相关推荐

最新文章

热门文章