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

【问题标题】：Apple Pay interface freezes the page after redirect on mobile SafariApple Pay 界面在移动 Safari 上重定向后冻结页面
【发布时间】：2019-12-07 03:38:48
【问题描述】：

我们正在使用 Stripe (Stripe.js / Payment Request Button) 在 Safari 中实现 Apple Pay。一切按计划进行，直到当我们调用ev.complete('success') 时，stripe 发出token 事件，这将关闭 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 只是感觉很笨拙，不太理想，而且这种方法的里程可能会因手机性能等而异......

所以，请停下来！ :)

【问题讨论】：

标签： javascript browser stripe-payments mobile-safari applepay

【解决方案1】：

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

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

抱歉，这里没有更好的答案。

【讨论】：