时间戳

首页 > 解决方案 > Apple Pay 界面在移动 Safari 上重定向后冻结页面

javascript - Apple Pay 界面在移动 Safari 上重定向后冻结页面

问题描述

我们正在使用 Stripe （Stripe.js / Payment Request Button）在 Safari 中实现 Apple Pay。一切都按计划进行，直到token当我们调用ev.complete('success')时，stripe 发出事件，这会关闭 Safari Apple Pay 界面。

paymentRequest.on('token', async (ev) => {
    if (ev) {
        ev.complete('success');
        let address = await somePromise(),
            fullname = (ev.payerName || '').split(' '),
            customerInfo = ...
            ...

            let params = {...address, ..customerInfo, ...};
            window.location.href = this.resolveRedirectUrl(params); // If we wrap this in setTimeout 1000ms+, issue gets fixes...
            return;
        }
        window.location.href = this.resolveRedirectUrl()
    });

它在 12.1.x iOS Safari 上运行良好，但在 12.3.x 上失败。Safari 支付界面不会自动离开屏幕（不会被关闭），当手动关闭时，会冻结我们重定向到的整个页面。只有在重新打开 Safari 时，页面才开始正常运行。

但是，如果大约一window.location.href = this.resolveRedirectUrl(params);秒钟setTimeout以上，问题就会得到修复。如果在完全关闭之前更改了路线，则其类似于 Apple Pay 界面不会正确关闭其 UI 元素。

界面完全关闭时是否会触发任何事件？我浏览了官方文档，但无济于事。

setTimeout只是感觉很糟糕，次优，这种方法的里程可能会因手机性能等而异......

所以，请停下来！:)

标签： javascriptbrowserstripe-paymentsmobile-safariapplepay

解决方案

这听起来更像是 Safari、您的异步代码和设置之间的问题，而window.location.href不是 Stripe 或 Apple Pay 的问题。setTimeout确实看起来很hacky，但是WebKit内部有一些限制可以防止window.location.hrefApple Pay表打开时进行设置。更糟糕的是，在测试中，您似乎需要 3-5 秒的时间让 Safari 中的所有内容在重定向之前“稳定”下来。像这样的东西应该可以工作：

setTimeout(() => window.location.href = …, 3000)

对不起，我在这里没有更好的答案。

推荐阅读