iosionic-frameworkstripe-paymentswkwebviewcordova-ios

Stripe in wkwebview open a browser page loading script

we're moving with our APP to new new wkweview due to the apple requirements.

One of APPs, is using StripeJS sdk in order to allow payment in app. Problem occurs when APP is bootstraping and the stripe sdk is include with the following code:

// Payment service is not initialized yet
      $.ajax({
        type: "GET",
        cache: true,
        url: "https://js.stripe.com/v3/",
        dataType: "script",
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          Logger.error("An error ocurred during SDK download");
          def.reject();
        },
        success: function() {
          Logger.debug("Stipe JDK downloaded correctly");
          initialized = true;
          def.resolve();
        }
      });

We already tried to use '' head tag in the index.html or creating dynamically one script TAG and appenging it to the body: but no one fix the problem.

Script Inclusion Tests

[Angular $http method]

$http({
   method: "GET",
   url: "https://js.stripe.com/v3/"
}).then(
   function(res) {
      angular.element("body").append("<script>" + res.data + "</script>");
   }, function(err) {
      def.reject();
   });

[index.html]

<html>
  <head>
     <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
  ...

Problem

A browser page is opened and APP is left in the background; being more specific, the "METRICS_CONTROLLER" case is catch in switch at row 767 ( see library at url < https://js.stripe.com/v3/ > ).

Have anyone an idea why including that script the browser page is opened ?

Solution

  • We found the problem.

    The problem was about permission to navigate url not allowed by the cordova configuration ( file 'config.xml' ). More specifically, we need to add the following row in our config. file

    <allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

    So finally, our CORS permission definition is:

    <access origin="*" />
<allow-intent href="sms:*" />
<allow-intent href="tel:*" />
<allow-intent href="geo:*" />
<allow-intent href="mailto:*" />
<allow-intent href="file://*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

    '*' is due to the fact that the APP can trigger outside resource, so we cannot known which url will be opened by user in APP.