如何在 WKWebView 中使用 Stripe JS 接受 Apple Pay？答案

【问题标题】：How to accept Apple Pay with Stripe JS inside WKWebView?如何在 WKWebView 中使用 Stripe JS 接受 Apple Pay？
【发布时间】：2020-12-10 01:17:41
【问题描述】：

我正在尝试在 iOS 上的 WKWebView 中加载使用 Stripe.js 的网页（使用 Xamarin.Forms）。

一切正常（可以接受卡付款），Apple Pay 除外：paymentRequest.canMakePayment() 始终返回 null。

SFSafariViewController 中的同一网页可以正常工作，因此问题似乎与 WKWebView 中的限制有关。然而，根据https://webkit.org/blog/9674/new-webkit-features-in-safari-13/ 的说法，这现在应该得到支持，而且实际上相同的 WKWebView 也可以毫无问题地加载官方 Apple Pay 演示页面 (https://applepaydemo.apple.com/)。

看起来问题最终出在 Stripe.js 如何在后台工作（可能与脚本注入有关）。

我在 Xamarin 中的自定义渲染器如下所示：

        WKWebView wkWebView;
        protected override void OnElementChanged(ElementChangedEventArgs<NativeWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var config = new WKWebViewConfiguration();
                wkWebView = new WKWebView(Frame, config);
                wkWebView.WeakNavigationDelegate = new WebNavigationDelegate();
                SetNativeControl(wkWebView);
            }

            if (e.NewElement != null)
                Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Url)));
        }

以及网页中的 JS（取自 Stripe Element 样本）：

            //set up payment request
            var paymentRequest = stripe.paymentRequest({
                country: 'GB',
                currency: 'gbp',
                total: {
                    label: 'sample order',
                    amount: 100,
                },
                requestPayerName: true,
                requestPayerEmail: true,
            });

            paymentRequest.canMakePayment().then(function (result) {
                // result is always false!
                ...
            });

是否有其他设置可以添加到 WKWebView 以使其工作？

【问题讨论】：

据我所知，你不能。 Apple Pay 仅在 SFSafariViewController 中受支持。我看到你说它似乎确实有效，但这对我来说是个新闻。如果您认为这是 Stripe 的错误，您应该写信给他们的支持。
在 iOS 中，Safari 和 SFSafariViewController objects.Check developer.apple.com/documentation/apple_pay_on_the_web 支持 Apple Pay。
好吧，根据我链接的文章“在 iOS 13 中，WKWebView 中加载的网页现在可以接受 Apple Pay。”。他们的演示页面工作正常似乎证实了这一点。在这种情况下，我猜想这是 Stripe 组件的问题。
您可以将问题发布到github.com/stripe/stripe-js/issues。
我已经联系了 Stripe 支持，他们也认为在 stripe.js 库的包装函数中有一些特定的东西会导致 canMakePayment 在 WebView 中返回 false。一旦我收到他们的回复，我会在这里发布一个潜在的解决方案/解决方法。

标签： xamarin.forms xamarin.ios stripe-payments applepay

【解决方案1】：

这不再是问题。 Stripe 承认这是他们的 JS 包装器中的一个缺陷，并已在官方库的最新更新中得到修复。

【讨论】：