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
}

这种情况应该是哪里配置有问题，配合后端自行检查

支付结果页

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