ARTICLE AD BOX
I am developing a React Native application and using react-native-webview to display a payment interface. Inside this WebView, I need to load an external script to integrate with Authorize.net.
<script src="https://js.authorize.net/v1/Accept.js" charset="utf-8"></script>
The script loads and works correctly on iOS devices and on some Android devices. However, on certain Android devices (for example, Google Pixel), the script fails to load, which causes the WebView functionality to break.
Current WebView implementation
<WebView source={{ uri: "https://example.com/payment-method/new" }} onLoad={onWebViewLoad} javaScriptEnabled={true} />I also tried dynamically injecting the script after the WebView content loads:
const scriptToInject = ` const script = document.createElement('script'); script.src = "https://js.authorize.net/v1/Accept.js"; script.charset = "utf-8"; document.head.appendChild(script); script.onload = function () { console.log("Accept.js successfully loaded"); }; script.onerror = function () { console.error("Failed to load Accept.js"); }; `; webviewRef.current.injectJavaScript(scriptToInject);Why does the Authorize.net Accept.js script fail to load inside react-native-webview on some Android devices but works on iOS and other Android devices?
