flutter_inappwebview 和 stripe.js 空白屏幕

Question

加载带有条纹 javascript 的网页时，InAppWebView 只是一个空白页面，onLoadStop 报告 URI： https ://m.stripe.network/inner.html?url=\*\*&title=\*\* &referrer=\*\*&muid=NA&sid=NA&version=6&preview=false

Flutter 应用程序是一个简单的 InAppWebView，它使用收银员/条纹订阅组合来镜像 laravel 网站。 该页面在浏览器中工作，并且在使用 url_launcher 启动时，但这需要用户重新登录并导航回他们所在的位置。

有什么办法可以让这个页面在flutter_inappwebview中加载？ 或者，创建不包含 JavaScript 的 card-element 元素（ https://js.stripe.com/v3 ）？

JavaScript 代码：

<script src="https://js.stripe.com/v3/"></script> -- this is the culprit
<script>
    var stripe = Stripe('{{ env('STRIPE_KEY') }}');
    var elements = stripe.elements();
    var style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };
    var card = elements.create('card', {
        hidePostalCode: true,
        style: style
    });
    card.mount('#card-element');
    card.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });
    const cardHolderName = document.getElementById('card-holder-name');
    const cardButton = document.getElementById('card-button');
    const clientSecret = cardButton.dataset.secret;
    cardButton.addEventListener('click', async (e) => {
        console.log("attempting");
        const { setupIntent, error } = await stripe.confirmCardSetup(
            clientSecret, {
                payment_method: {
                    card: card,
                    billing_details: { name: cardHolderName.value }
                }
        });
        if (error) {
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = error.message;
        } else {
            paymentMethodHandler(setupIntent.payment_method);
        }
    });
    function paymentMethodHandler(payment_method) {
        var form = document.getElementById('subscribe-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'payment_method');
        hiddenInput.setAttribute('value', payment_method);
        form.appendChild(hiddenInput);
        form.submit();
    }
</script>

Answer 1

解决了。

Stripe 不喜欢自定义标头，因此如果您在请求中添加标头，它将阻止它。