Cordova ios app automatically redirects to js.stripe.com when using stripe/v3

问题

I am trying to implement stripe payments into my Cordova ios app. I did the same for my android app and it works fine but with ios I am immediately redirected to the url https://js.stripe.com/v3/m-outer-7e4b9b871fee876475cf1d5d316fe456.html#url=file%3A%2F%2F%2FUsers%2Fpeter%2FLibrary%2FDeveloper%2FCoreSimulator%2FDevices%2F9D689B57-710A-44FF-A531-209A40951971%2Fdata%2FContainers%2FBundle%2FApplication%2F39452448-BC9C-48CC-A645-30216C5E780E%2FTestProject.app%2Fwww%2Findex.html&title=Hello%20World&referrer=&muid=NA&sid=NA&version=6&preview=false (within the cordova app WebView).

I had a look at the other similar questions. I tried adding to my config.xml:

<allow-navigation href="https://*.stripe.com/*" />

It did not fix the problem of redirecting the WebView to a web page but it now takes me to another web page: https://m.stripe.network/inner.html#url=file%3A%2F%2F%2FUsers%2Fpeter%2FLibrary%2FDeveloper%2FCoreSimulator%2FDevices%2F9D689B57-710A-44FF-A531-209A40951971%2Fdata%2FContainers%2FBundle%2FApplication%2F8F59C0AB-C0B4-47B8-BE59-ED7F4BA6E50D%2FTestProject.app%2Fwww%2Findex.html&title=Hello%20World&referrer=&muid=NA&sid=NA&version=6&preview=false

which is shortened to just stripe.network

This happened both on my main project and on a new black test project made specifically for this bug. The test project has the following files:

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.menumeals.test" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>TestProject</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="https://*.stripe.com/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <a href="index2.html">Go to index2</a>
        </div>
        <script src="https://js.stripe.com/v3"></script>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

index.js

var app = {

    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    
    onDeviceReady: function() {
        // Cordova is now initialized. Have fun!
        console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
        document.getElementById('deviceready').classList.add('ready');
    }
}

app.initialize();

When I take out the <script src="https://js.stripe.com/v3"></script> the page no longer redirects.

回答1:

I fixed this by adding this to my config.xml

<allow-navigation href="https://*.stripe.network/*" />
<allow-navigation href="https://*.stripe.com/*" />

allow-navigation

Controls which URLs the WebView itself can be navigated to. Applies to top-level navigations only.

compared with allow-intent

Controls which URLs the app is allowed to ask the system to open. By default, no external URLs are allowed.

来源：https://stackoverflow.com/questions/64472959/cordova-ios-app-automatically-redirects-to-js-stripe-com-when-using-stripe-v3

标签

ios

cordova

stripe-payments