React Native Android WebView中Stripe.js加载失败问题求助

环境配置 #

内嵌HTML代码（用于Stripe支付配置） #

<!DOCTYPE html>
<html>
<head>
    <title>Stripe Setup Intent</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://js.stripe.com/v3/"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
        .container {
            width: 100%;
            max-width: 500px;
            padding: 20px;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align: center;
            overflow-y: auto;
        }
        h2 { margin-bottom: 20px; }
        p { margin-bottom: 40px; }
        .spinner {
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 3px solid rgba(195, 195, 195, 0.6);
            border-radius: 50%;
            border-top-color: #636767;
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
    </style>
</head>
<body>
    <div class="container" role="alert">
        <h2>Let's setup your payment method</h2>
        <p id="status-message">Connecting to Stripe...</p>
        <div class="spinner" aria-hidden="true"></div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const stripe = Stripe('<%= stripePublishableKey %>');
            const clientSecret = '<%= clientSecret %>';
            stripe.confirmAcssDebitSetup(clientSecret, {
                payment_method: {
                    billing_details: {
                        name: '<%= user.fullName %>',
                        email: '<%= user.email %>',
                    },
                },
            }).then(function(result) {
                if (result.error) {
                    document.querySelector('.container').innerHTML = `
                        <p>There was an error setting up your payment method. Please try again.</p>
                        <p>If the problem persists, please visit the "Contact Us" screen in the app or email us at <a href="mailto:support@tuze.ca">support@tuze.ca</a>.</p>
                    `;
                } else {
                    document.querySelector('.container').innerHTML = `
                        <p>Your payment method has been successfully set up!</p>
                        <p>You will be redirected shortly.</p>`;
                }
            });
        });

        window.addEventListener('resize', function() {
            if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
                document.activeElement.scrollIntoView({ behavior: 'smooth' });
            }
        });
    </script>
</body>
</html>

React Native WebView代码（iOS端运行正常） #

import { View } from 'react-native';
import React from 'react';
import StripeTos from '@Components/StripeTos';
import BackIcon from '@Components/BackIcon';
import { WebView } from 'react-native-webview';
import { styles } from './styles';
import { height, width } from '@Utils/dimensions';

interface Props {
  isVisible: boolean;
  close: () => void;
  htmlStr: string;
}
const StripeWebview = ({ isVisible = false, close, htmlStr = '' }: Props) => {
  return (
    <View>
      <StripeTos
        close={close}
        onSubmit={() => {}}
        open={isVisible}
        isWebView
        isSwipable={false}
        avoidKeyboard={false}
        containerStyle={{
          width: width(100),
          height: height(90),
          borderWidth: 0,
          backgroundColor: 'white',
        }}>
        <View style={styles.container}>
          <View style={styles.backBtn}>
            <BackIcon onPress={close} />
          </View>
          {isVisible && (
          <WebView
            source={{ html: htmlStr }}
            style={{
              flex: 1,
            }}
            scalesPageToFit={true}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            mixedContentMode="always"
            onMessage={event => {
              console.log(event.nativeEvent.data);
            }}
            onError={syntheticEvent => {
              const { nativeEvent } = syntheticEvent;
              console.warn('WebView error: ', nativeEvent);
            }}
            onHttpError={syntheticEvent => {
              const { nativeEvent } = syntheticEvent;
              console.warn('WebView HTTP error: ', nativeEvent);
            }}
          />
          )} 
        </View>
      </StripeTos>
    </View>
  );
};

export default StripeWebview;

问题现象 #

• Android WebView中Stripe.js始终无法加载，页面持续显示“Connecting to Stripe...”及加载动画，长时间等待无变化
• 测试发现jQuery可正常加载，但Lodash和Stripe.js均加载失败
• iOS端集成完全正常，支付流程可正常运行

已尝试的解决方法 #

• User-Agent测试：修改为iOS Safari等浏览器标识，问题仍存在
• WebView配置检查：已开启javaScriptEnabled、domStorageEnabled，mixedContentMode设为"always"
• 设备支持验证：设备已支持Stripe.js所需的Promises和TLS 1.2

补充调试信息 #

经调试发现Stripe.js初始化存在异常，寻求解决方案。

内容的提问来源于stack exchange，提问作者user27318543