Implement 3DSecure in InAppBrowser

Question

Implement 3DSecure in InAppBrowser

I am currently writing an application that uses 3DS (3DSecure), but I cannot get it to work on my mobile device (currently being tested on Android).

When I get the bank URL, I open window.open, publish in it, it redirects to the 3DSecured web page, I can authenticate, but I just can not close inAppBrowser at the end of the process.

Here is the click that the user clicks:

function showPopup3ds($ionicPopup, $scope, $window) { var myPopup = $ionicPopup.show({ title: 'Paiement sécurisé', subTitle: 'Confirmez votre transaction grâce au 3D Secure fourni par votre établissement bancaire.', scope: $scope, buttons: [{ text: '<b>Continuer</b>', type: 'button-positive', onTap: function(e) { // creating the 'formresult' window with custom features prior to submitting the form ref = $window.open($scope.p3ds.threeDSEncodedPareq, 'formresult', 'toolbar=0,scrollbars=0'); // <form id="redirectForm" name="redirectForm" target="formresult" action="{{p3ds.threeDSAcsUrl | trusted }}" method="POST" class="hide"> document.forms['redirectForm'].submit(); e.preventDefault(); } }] }); }

And then, juste after:

 showPopup3ds($ionicPopup, $scope, $window); socket.on(result.veResPAReqInfo.threeDSRequestId, function(data) { console.log(ref); ref.close(); showPopupResult($ionicPopup, $scope, data.success); })

But I can’t close it or listen to any event because the page is being redirected. This is not like a new tab or a new window, this is a redirect.

I feel a little desperate, I would like to open the chrome tab or any other.

Wish you could help me.

Kai23

Edit: this is how I did it:

In my view (payment_details.html) I have the current form:

 <form id="redirectForm" name="redirectForm" target="hidden_iframe" action="{{p3ds.threeDSAcsUrl | trusted }}" method="POST" class="hide"> <input type="hidden" id="PaReq" name="PaReq" value="{{p3ds.threeDSEncodedPareq}}"> <input type="hidden" id="TermUrl" name="TermUrl" value="{{p3ds.TermUrl}}"> <input type="hidden" id="MD" name="MD" value="{{p3ds.MD}}"> </form>

And I have an ionic modal view like this:

 <ion-modal-view> <ion-header-bar> <h1 class="title">Paiement sécurisé 3-D Secure</h1> <button class="button button-dark" ng-click="hide_modal(modal)">Fermer</button> </ion-header-bar> <ion-content scroll="true" overflow-scroll="true" class="has-header padding"> <iframe name="hidden_iframe" style="width:100%;height:100%"></iframe> </ion-content> </ion-modal-view>

Finally, in my PaymentController, I am doing something like this:

 $scope.p3ds.threeDSAcsUrl = result. $scope.p3ds.threeDSEncodedPareq = result. $scope.p3ds.TermUrl = api_url + '/retour-banque?token=' + $window.sessionStorage[' $scope.p3ds.MD = result.id; var myPopup = $ionicPopup.show({ title: 'Paiement sécurisé', subTitle: 'Confirmez votre transaction grâce au 3D Secure fourni par votre établissement bancaire.', scope: $scope, buttons: [{ text: '<b>Continuer</b>', type: 'button-positive', onTap: function(e) { $ionicModal.fromTemplateUrl('templates/payment/popup/modal_3DS.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; $scope.modal.show(); document.forms['redirectForm'].submit(); }); } }] });

On the server side, this is how it looks (I use nodejs and cheat a lot)

 // Once the transaction is complete res.ok("<p>Votre transaction a bien été enregistrée ! Revenez sur votre compte Payname en cliquant sur « fermer »"); // English : res.ok("<p>Transaction succeeded. Come back to your Payname account using the close button");

What will happen in PHP