Using Stripe Checkout with Cordova ios 4.0.0+

Question

I have been trying to get Stripe checkout working with Cordova iOs 4.2.0 and am having no luck. The last Cordova iOs version this works with is 3.9.2. To test I made an empty hello world cordova app and added this code for stripe (tested on ios 9 and 10):

<script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="xxxxxxx"
    data-amount="999"
    data-name="Oki Technologies Inc"
    data-description="Widget"
    data-locale="auto"
    data-currency="cad">

Now it works perfectly on Cordova ios 3.9.2, but on 4.0.0+ it just has an empty iframe with a dark overlay. I think its trying to open the popup in a new tab like the mobile web, instead of as a popup like it is supposed to do on the app. I'm hoping there's a useragent or something I can spoof to get this to work as it works perfectly on android web/cordova as well as iphone on the web. Is there any way to get this working?

I made a test repo here that someone can clone to test https://github.com/HockeyCommunity/stripe

Answer 1

I was banging my head against the wall for days looking for a solution to this. Solution was to add the following two lines to my config.xml file:

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

Hope this helps!

EDIT: Updated solution with suggestion from @TateThurston