• 微信H5支付保持原页面继续执行

    作者:广力云微信阅读: 时间:2023-09-02 09:17:32

    微信H5支付保持原页面继续执行的实现方式

    随着移动互联网的发展,越来越多的用户选择通过手机进行购物消费。而移动端网页展示商品或服务的场景也越来越普遍。为了让用户体验更加顺畅,微信推出了H5支付。H5支付是一种方便用户在移动端网页唤起微信客户端进行支付的方式。但是,在进行支付过程中,有些用户会感到困扰:支付完成后,是否应该回到原页面,或者停留在微信支付的结果页?

    为了解决这一问题,我们可以采取如下的实现方式:

    1. 将原网页URL作为支付参数传递给微信支付页面

    在进行微信支付之前,我们可以将原网页URL作为支付参数传递给微信支付页面。这样,在支付完成后,微信支付页面会带上这个URL一起返回,我们可以通过解析这个URL,将用户自动跳转回原页面。具体实现方式如下:

    ```javascript

    // 将当前页面URL作为参数传递给微信支付页面

    var currentUrl = window.location.href;

    var wxPayUrl = 'http://www.xxx.com/wxpay.php?originUrl=' + encodeURIComponent(currentUrl);

    // 跳转到微信支付页面

    window.location.href = wxPayUrl;

    ```

    在微信支付页面中,我们可以通过获取URL参数,获取原页面URL并带回:

    ```php

    // 获取支付完成后返回的URL

    $originUrl = isset($_GET['originUrl']) ? urldecode($_GET['originUrl']) : '';

    // 在微信支付结果页中添加一个“返回”按钮,并在点击时跳转到原页面

    echo '返回';

    ```

    2. 基于iframe的方案

    在进行微信支付时,我们可以创建一个隐藏的iframe,然后将微信支付页面嵌入到这个iframe中。这样,在支付完成后,用户还可以在原页面保持其他操作而不被打断。具体实现方式如下:

    ```javascript

    // 创建一个需要隐藏的iframe

    var iframe = document.createElement('iframe');

    iframe.style.display = 'none';

    // 将微信支付页面带上原页面URL一起加载

    var currentUrl = window.location.href;

    var wxPayUrl = 'http://www.xxx.com/wxpay.php?originUrl=' + encodeURIComponent(currentUrl);

    iframe.src = wxPayUrl;

    // 将iframe添加到页面

    document.body.appendChild(iframe);

    ```

    在微信支付页面中,我们可以在页面加载完成后,通过Javascript发送消息给父页面,告诉它支付已完成,然后由父页面来决定是否跳转回原页面:

    ```javascript

    // 发送消息给父页面,告诉它支付已完成

    window.parent.postMessage('wxpay:success', '*');

    ```

    在父页面中,我们可以监听这个消息,并根据需要跳转回原页面:

    ```javascript

    // 监听微信支付页面发送的消息

    window.addEventListener("message", function(event) {

    // 如果支付已完成,跳转回原页面

    if (event.data === 'wxpay:success') {

    window.location.href = originUrl;

    }

    });

    ```

    以上就是实现微信H5支付保持原页面继续执行的方案。通过正确地寻找实现方式,我们可以为用户提供更好的体验,提高用户购物消费的满意度。

  • © Copyright 2019 深圳市推谷互动网络科技有限公司
  • 粤ICP备15107897号-3
微信客服
微信第三方平台
广力云

专业微信营销顾问

“Hi~ 感谢关注广力云

如果您想要深入合作请联系客服!

微信号:13332948893” 咨询电话:13332948893

微信第三方平台""

添加客服微信