H5微信外支付(移动端浏览器)

简介: H5微信外支付(移动端浏览器)

H5微信外支付(移动端浏览器)

​业务场景介绍:

H5移动端浏览器微信支付 >>>微信外支付(开发文档
在这里插入图片描述

订单生成逻辑:前端根据商品信息配合后端调用接口,后端返回跳转URL, 前端判断浏览器类型,是微信外浏览器则直接跳转打开,再根据提示打开微信,拉微信支付

开发前准备:

开通商户接入微信支付,配置相关信息(详见开发文档)

提交订单,跳转拉起微信客户端支付

前端根据商品信息配合后端调用接口,后端返回跳转URL, 前端判断浏览器类型,然后跳转,这里注意也就是开发文档的-->开发指引里面的3.2.2. 【客户端】微信外部的浏览器拉起微信支付中间页
,这里根据实际情况进行处理,有个redirect_url参数,这个是拼接在服务端返回的url地址后面而且必须通过encodeURIComponent()编码才行,如果拼接这个参数就是最后会跳转到这个页面,如果不拼接则跳到支付发起页。

如果拼接的话可以这样处理,

// 构造支付 URL
function constructPaymentUrl(webUrl, redirectUrl) {
   
    // 验证输入参数
    if (!webUrl || !redirectUrl) {
   
        console.error('Missing required parameters: webUrl or redirectUrl');
        return null;
    }
    // 对 redirectUrl 进行编码
    const encodedRedirectUrl = encodeURIComponent(redirectUrl);
    // 构造最终的支付 URL
    const paymentUrl = `${
     webUrl}&redirect_url=${
     encodedRedirectUrl}`;
    return paymentUrl;
}

// 示例调用
const body = {
   
    webUrl: 'https://example.com/payment?'
};
const redirectUrl = 'https://example.com/redirect';
const paymentUrl = constructPaymentUrl(body.webUrl, redirectUrl);
if (paymentUrl) {
   
    // 在微信内打开支付页面
    if (isWeChatBrowser()) {
   
        window.location.href = paymentUrl;
    } else {
   
        console.log('Not in WeChat browser, using fallback method.');
        // 使用备选方法打开支付页面
        window.open(paymentUrl, '_self');
    }
}

// 判断是否在微信浏览器内
function isWeChatBrowser() {
   
    return /MicroMessenger/i.test(navigator.userAgent);
}

判断浏览器以实际为准,需要注意:uc浏览器安卓和ios有点不一样,判断设备类型的时候需要注意,我遇到的是这样的情况,安卓可以正常打开但是ios不能,发现手机上打开设备类型也显示是windows,可以单独处理判断

const isUCBrowser = /UCBrowser/i.test(navigator.userAgent);
const isIosUCBrowser = /Windows; U;/i.test(navigator.userAgent)

if (isUCBrowser || isIosUCBrowser ) {
   
    window.location.href = paymentUrl
}

请添加图片描述

在这里插入图片描述

这种情况应该是哪里配置有问题,配合后端自行检查
请添加图片描述

支付结果页

由于是浏览器跳转的链接,最终无论支付还是取消支付返回浏览器都会跳转到发起页或者重定向页。但是不知道状态,只能通过通过用户去触发,浏览器返回到前面提交支付发起页,或者就是成功之后重定向到目标页(比如我的订单页)也可以是单独的页,给添加个跳转中间页给个按钮已付款(点击查看订单状态然后在跳转)和重新提交(返回到支付前的页面),再或者就是比如文档那样直接给个弹框,让用户去操作都行,(可以给弹框,给中间页,然后触发跳转)总之具体根据实际情况处理

博客链接:https://blog.csdn.net/m0_67708785/article/details/142918942

目录
相关文章
|
3月前
|
API 开发者
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程,包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等,并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
157 3
|
4月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
182 3
|
5月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
657 3
|
5月前
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
298 0
微信H5支付--微信JS-SDK支付--点金计划
|
5月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
99 2
|
4月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
130 63
|
4月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
149 57
|
4月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
4月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
735 1
|
5月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
1050 1

热门文章

最新文章