vue-支付模块（pc/h5）集成实现

场景：

在手机浏览器中打开微信支付，支付宝支付，在网页版浏览器打开支付实现方法，一套代码实现兼容

pc支付：主要实现方法是生成二维码
h5支付：主要是网页拉起支付宝或者微信App

参考的开发文档：

pc支付：

支付宝：开通当面付

  https://opensupport.alipay.com/support/helpcenter/95/201602482184?ant_source=opendoc_recommend

微信： Native调起支付API

 https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_4_4.shtml

h5支付：

支付宝：开通手机网站支付

https://b.alipay.com/signing/productDetailV2.htm?productId=I1011000290000001001

微信： H5支付

https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4

实现须知

主要实现原理是：

参考页面

实现部分由三部分组成

1.校验手机号-验证码设置
2.选择支付方式
3.立即购买按钮防抖

代码如下

校验手机号-验证码设置

html结构：

     <div class="content_item"><div class="title">验证手机号</div><van-form validate-first ref="phoneFrom"><van-fieldv-model.trim="phone"label="手机号"type="tel"placeholder="请输入":rules="[{ required: true, validator, message: '请输入正确的手机号' },]"/><van-fieldv-model.trim="sms"centerclearablelabel="验证码"placeholder="请输入":rules="[{ required: true, message: '请输入短信验证码' }]"><template #button><van-buttonsize="small"type="primary"@click="!sendCodeVisible ? sendCode() : ''">{{ !sendCodeVisible ? "发送验证码" : `${count}s` }}</van-button></template></van-field></van-form></div>

data结构

 data() {return {sendCodeVisible: false,count: 60,phone: "",sms: "",     timer: null,};},

methods结构

  // 获取验证码getCode({ phone: this.phone }).then((res) => {if (res.code === 200) {this.sendCodeVisible = true;this.sms = "";var Codetimer;clearInterval(Codetimer);Codetimer = setInterval(() => {this.count--;if (this.count < 0) {clearInterval(Codetimer);this.sendCodeVisible = false;this.count = 60;}}, 1000);} else {Dialog.alert({message: res.message,theme: "round-button",});}

注意：要及时清除定时器

  destroyed() {clearTimeout(this.timer);},

立即购买按钮防抖

根据设备类型-选择不同的支付方式

  // 获取设备const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);

        //  payType 支付方式。1：pc支付宝，2：pc微信 3: h5支付宝 4:h5微信switch (payType) {case 1:this.getQrCode(qrcode);break;case 2:this.getQrCode(qrcode);break;case 3:this.alipay(qrcode);break;case 4:this.wechatpay(qrcode);break;default:break;}

可以进行方法封装

1.setQrCode 获取预支付接口返回的url生产qrcode，不断的轮询查询订单状态

qyOrder({orderId: this.orderId,payType: this.payWay === 0 ? "2" : "1",}).then((res) => {if (res.code === 200 && res.result === "FAILPAY") {// 发现支付没有完成, 设置一个定时器, 定时调用自己this.timer = setTimeout(() => {this.checkPayment();}, 2000);} else if (res.code === 200 && res.result === "SUCCESSPAY") {this.orderId = "";// 支付成功this.$router.push({path: "/payResults",query: {packageInfo: JSON.stringify(this.packageInfo),},});} else {Dialog.alert({message: res.message,theme: "round-button",});}});

2.手机端支付
通过返回的url，直接跳转或者构造表单标签

支付宝

    // h5端 支付宝支付alipay(from) {let divForm = document.querySelector("#alipay");if (divForm && divForm.length) {document.body.removeChild(divForm[0]);}const div = document.createElement("div");div.id = "alipay";div.innerHTML = from;document.body.appendChild(div);document.querySelector("#alipay").children[0].submit(); // 执行后会唤起支付宝},

微信–分为微信浏览器打开和一般浏览器打开

    // h5端 微信支付wechatpay(from) {let ua = navigator.userAgent.toLowerCase();let isWeixin = ua.indexOf("micromessenger") != -1;// 微信浏览器打开if (this.isWeixin) {调用微信支付WeixinJSBridge} else {window.location.replace(from);}},

注意：微信支付需要在商户设置的同一域名打开

vue-支付模块（pc/h5）集成实现相关推荐

android 支付模块封装,Android集成支付----支付宝支付总结与封装
前言类似于Android集成支付----微信支付总结与封装(可以查看本人另外一篇文章),本文对支付宝支付进行一个总结与封装.相比于微信支付,支付宝支付没有那么多坑. 集成支付宝支付SDK 这里只是简 ...
Magento银联支付模块|Magento1.9 Unionpay中国银联支付插件|支持PC、手机移动端支付|2016最新Unionpay5.0.0支付接口...
2019独角兽企业重金招聘Python工程师标准>>> 功能严格按照中国银联Unionpay)接口文档编写代码. 中国银联(Unionpay)异步通知机制,确保订单状态及时更新. ...
关于程序集成线上支付模块
关于线上支付的那些小问题:不涉及技术方面内容一.与线上支付对接阶段: 1.先作小DEMO,把SDK等跑通,至少需要获取token.支付.查询.退款 2.由小DEMO提取出最小单位的函数组成一个新的单 ...
ios浏览器微信支付回调页面_iOS集成H5微信支付实现跳转与回调的解决方案
前言最近有个需求,不能在iOS客户端内集成支付宝和微信的App支付SDK(为了防苹果审核检测SDK),因此使用H5支付,虽然微信和支付宝的H5支付文档都说不要在App内使用H5支付而是使用App支付 ...
pc端debugger微信、电脑debugger微信、电脑调试微信支付、pc调试微信支付、电脑调试真机微信、通过电脑调试手机真机打开的微信H5页面、通过电脑chrome调试手机真机打开的微信H5
pc端debugger微信.电脑debugger微信.电脑调试微信支付.pc调试微信支付.电脑调试真机微信.通过电脑调试手机真机打开的微信H5页面.通过电脑chrome调试手机真机打开的微信H5 ...
支付宝手机网站支付，app支付，PC端支付流程以及服务端php支付下单，回调流程详解
一.支付宝支付相关文档地址: 支付宝支付相关的文档地址:https://open.alipay.com/api 电脑网站支付:https://opendocs.alipay.com/open/270/ ...
支付宝支付-手机浏览器H5支付
前言支付宝支付-沙箱环境使用支付宝支付-支付宝PC端扫码支付支付宝支付-手机浏览器H5支付「本文」手机浏览器支付,用户在安装支付宝APP的情况下,调用手机网站支付接口默认会唤起支付宝钱包支付, ...
支付宝支付-支付宝PC端扫码支付
前言支付宝支付-沙箱环境使用支付宝支付-支付宝PC端扫码支付「本文」支付宝支付-手机浏览器H5支付「待写」 PC端扫码支付,其实就是就是电脑网站支付,本文基于支付宝沙箱环境,不了解的可以看一下 ...
pay-spring-boot 开箱即用的Java支付模块，整合支付宝支付、微信支付
关于使用本模块,可轻松实现支付宝支付.微信支付对接,从而专注于业务,无需关心第三方逻辑. 模块完全独立,无支付宝.微信SDK依赖. 基于Spring Boot. 依赖Redis. 我能做什么支付宝 ...
微信开发-微信分享和支付模块代码记录
文章目录微信H5开发[分享模块] 写在前面准备工作微信后台配置获取配置微信环境的参数引入weixin-js-sdk 分享配置源码启动以后日志显示OK即可注意事项微信H5开发支付模块需 ...

vue-支付模块（pc/h5）集成实现

场景：

pc支付：

h5支付：

实现须知

实现部分由三部分组成

代码如下

vue-支付模块（pc/h5）集成实现相关推荐

最新文章

热门文章

vue-支付模块（pc/h5）集成实现

场景：

pc支付 ：

h5支付 ：

实现须知

实现部分由三部分组成

代码如下

vue-支付模块（pc/h5）集成实现相关推荐

最新文章

热门文章

pc支付：

h5支付：