当前位置:首页 » 《关注互联网》 » 正文

前端对接支付流程 - (微信支付与支付宝支付)

2 人参与  2024年11月12日 08:41  分类 : 《关注互联网》  评论

点击全文阅读


业务背景

由于公司业务需求,需对接微信支付和支付宝支付,于是对前端接入第三方支付进行了调研并以此记录,本次讨论微信支付与支付宝支付两种支付方式。

微信支付

微信支付开发文档

JSAPI支付:仅限在微信内使用,可调用微信的API,直接唤起微信的支付组件。
JSAPI唤起微信支付相关代码
function onBridgeReady () {        WeixinJSBridge.invoke(          "getBrandWCPayRequest",          {            "appId": appId, //公众号名称,由商户传入            "timeStamp": timeStamp, //时间戳,自1970年以来的秒数            "nonceStr": nonceStr, //随机串            "package": package,            "signType": signType, //微信签名方式:            "paySign": paySign //微信签名          },          function (data) {            if (              data.err_msg === "get_brand_wcpay_request:ok"            ) {              // 使用以上方式判断前端返回,微信团队郑重提示:              //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。              window.open(res.data.mweburl);            } else {              that.$toast.error("支付失败");              window.open(res.data.mweburl);            }          }        );      }      if (typeof WeixinJSBridge === "undefined") {        if (document.addEventListener) {          document.addEventListener(            "WeixinJSBridgeReady",            onBridgeReady,            false          );        } else if (document.attachEvent) {          document.attachEvent(            "WeixinJSBridgeReady",            onBridgeReady          );          document.attachEvent(            "onWeixinJSBridgeReady",            onBridgeReady          );        }      } else {        onBridgeReady();      }
H5支付:用户在浏览器端打开H5页面,唤起微信支付。
前端发起接口请求,后端响应并返回前端微信支付的链接,同时支付结果的回调地址,会以redirect_url 的形式拼在该链接后面,前端打开这个链接,就可以唤起微信支付。完成支付后,会回到支付结果回调地址。
redirect_url地址格式如下:
https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx1320983386585bfa61437b349e3580000&package=1509339968&redirect_url=回调地址
如果单纯的使用window.location.href 可能存在不同浏览器的兼容性问题,所以改用模拟a标签点击跳转
function createAHref(url) {    const link = document.createElement('a');    link.href = url;    link.style.display = 'none';    document.body.appendChild(link);    link.click();    document.body.removeChild(link);  }

支付宝支付

支付宝支付开发文档

在微信环境中,没有办法直接唤起支付宝,需要中间页引导用户在外部浏览器中进行支付同时支付分期与支付不分期唤起支付方式不同
 分期需要在后端接口返回的地址前拼接'https://render.alipay.com/p/s/i?scheme='
 不分期需要进行form表单提交(form表单提交方法可封装为公共方法,在微信环境、H5环境都可使用)
引导页主要代码如下
<template>  <div :class="$options.name">    <img class="arrow" :src="guidArrow" alt />    <p class="follow">      支付宝支付请使用浏览器进行支付,<br />请在菜单中选择浏览器打开    </p>  </div></template><script>import { createAHref, isWeiXin, isMobile,} from "@/publicJs/browser";import { unifiedOrder } from "@/common/api/api";export default {  created() {    //获取当前微信浏览器url地址参数    this.getParams();    // 唤起支付    this.invokePay();  },  methods: {    // 获取当前微信浏览器url地址参数    getParams(){      this.theRequest = JSON.parse(this.$route.query.params);    },    invokePay() {      if (isMobile() && isWeiXin()) {        this.is_WeChat = true;      } else if(isMobile() && !isWeiXin()){        this.is_WeChat = false;        unifiedOrder(this.theRequest).then(res=>{          if(this.theRequest.data.contractFlag){            let alipaySignUrl = 'https://render.alipay.com/p/s/i?scheme='+encodeURIComponent(res.data.alipaySignUrl)            createAHref(alipaySignUrl);          }else{            this.createFormSubmit(res.data.alipayForm);          }        })      }    }  }};</script>
在手机浏览器中
需要前端页面以 Form 表单的形式发起请求,浏览器会自动跳转至支付宝的相关页面(一般是收银台或签约页面),用户在该页面完成相关业务操作后再回跳到商户指定页面
From表单提交代码
createFormSubmit(data) {      var resData = data;      const div = document.createElement("div");      div.id = "alipay";      div.innerHTML = resData;      document.body.appendChild(div);      document.querySelector("#alipay").children[0].submit(); // 执行后会唤起支付宝},

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/184886.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • (番外)+(全书)温洛梨霍韫年(何处繁花醒洛梨结局+番外)_温洛梨霍韫年免费列表_笔趣阁(何处繁花醒洛梨结局+番外)
  • 时光不过大梦一场全文在线阅读_[江时宜傅临川]完结版免费在线阅读
  • 「我是男主的白月光」小说章节免费试读_[谢淮舟渺渺景平王]章节彩蛋限时释出‌
  • 我在眷恋里无路可逃+后续+完结(季微澜苏逸尘)全书免费_(季微澜苏逸尘)我在眷恋里无路可逃+后续+完结后续(季微澜苏逸尘)
  • 用我的情感交易我失忆他却疯了+后续+结局(妙妙傅沉玉姜月)列表_用我的情感交易我失忆他却疯了+后续+结局(妙妙傅沉玉姜月)用我的情感交易我失忆他却疯了+后续+结局在线
  • (番外)+(全书)余烬终成灰全书+后续(江晚照傅青辞)完结_(江晚照傅青辞)列表_笔趣阁(余烬终成灰全书+后续)
  • 我在回忆里万劫不复(秦见鹿秦临渊谢梵声)_我在回忆里万劫不复秦见鹿秦临渊谢梵声
  • 陆总跪求夫人复婚结局+番外+完结(许霜陆京墨)全书免费_(许霜陆京墨)陆总跪求夫人复婚结局+番外+完结后续(许霜陆京墨)
  • (番外)+(全书)阁主,夫人改修无情道了全书+后续+结局(余鹿祝之驭)_阁主,夫人改修无情道了全书+后续+结局列表_笔趣阁(阁主,夫人改修无情道了全书+后续+结局)
  • (番外)+(全书)秦见鹿秦临渊谢梵声(我在回忆里万劫不复结局+番外)_秦见鹿秦临渊谢梵声免费列表_笔趣阁(我在回忆里万劫不复结局+番外)
  • 七年地下恋,换来我死心悬念章节免费释出_柏林苏家苏母小说章节试读
  • 完结文月光溺亡在深海列表_完结文月光溺亡在深海(姜宁傅景城)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1