inappbrowser in cordova not returning 3ds payment data from popup

Question

I have a mobile app that uses checkout payments on inappbrowser in cordova.

When I press to pay, it shows me the payment page with a button, I press the button and a modal opens up where the customer enters his card payment info, once all the info is entered, he presses the continue button and a popup for 3ds (3d-secure) verification appears, once I validate the transaction and it is supposed to go back to the app to validate order, it gets stuck on a white page, as if there is an error returning the payment info.

Please help me resolve this issue if anyone can.

Here is a link to a video showing the process: https://drive.google.com/file/d/17Ujdz_-kfvAscM4H3ZjUvHvE2IJHqoHb/view?usp=sharing

The code and functions I have in my app.js file that are related to the payment inappbrowser.

payWebview = function(url){ if ( !krms_config.debug ){ inapp = cordova.InAppBrowser.open( url , '_blank', 'location=no,footer=yes,footercolor=#000000,closebuttoncaption=X,closebuttoncolor=#ffffff,EnableViewPortScale=no,hidden=no' );

 inapp.addEventListener('loadstart', function() {
  showLoader(true);
 });
 
 inapp.addEventListener('loadstop', function(event){      
   inapp.show();
   showLoader(false);
   
         url = event.url;
         var res = url.match(/success/gi);
         if(!empty(res)){
           inapp.executeScript({
              code: "document.documentElement.innerText"
           }, function(html) {                
              inapp.close();
              
              setTimeout(function(){
          $graphical = isTrackingGraphical();
                        
          if($graphical){
            showLoader(true,'modal_order_sent');
            setTimeout(function(){
              processAjax('getOrderGraphical','order_id=' + getStorage("global_receipt_order_id") );
            }, 2*1000);                 
          } else {
            var options = { 
              "order_id" : getStorage("global_receipt_order_id") ,
              "total_amount" : getStorage("global_receipt_amount_pay") ,
              'message': getStorage("global_receipt_message")
            };  
            onsenNavigator.pushPage('receipt.html',{
              animation : "slide",
              data : options
            });  
          }
                }, 1);                                
              
           });
         }
         
         var error = url.match(/error/gi);
         if(!empty(error)){
           inapp.executeScript({
              code: "document.documentElement.innerText"
           }, function(html) {
              inapp.close();
              showAlert(html);
           });
         }
         
         var cancel = url.match(/cancel/gi);
         if(!empty(cancel)){
            inapp.close();
         }
         
     });
} else {
    //window.open(url);
  window.open( url  , '_blank', 'location=no,footer=yes,footercolor=#000000,closebuttoncaption=X,closebuttoncolor=#ffffff,EnableViewPortScale=no,hidden=no');
}

};

AND

    case "init_webview":
      setStorage("global_receipt_order_id", data.details.order_id );   
      setStorage("global_receipt_amount_pay", data.details.total_amount );   
      setStorage("global_receipt_message", data.msg );   
              
      payWebview( data.details.redirect_url);   
    break;

When the payment card has no 3ds verification, the process finishes successfully.

Thank you for your help in advance

What if I want to use _system to use system browser and when payment is successful the browser closes and returns you to app to finish order. Is that possible? — OUALID

DaveAlden DaveAlden · Accepted Answer · 2021-03-01T14:21:29

Popup windows do not work in the Cordova inapp browser plugin. i.e. if the page you open in the inapp browser calls window.open(url, '_blank'), it will not work.

But if the page you are loading into the inappbrowser uses the Braintree JS SDK for its payment solution, then there is a possible solution:

Braintree created a "PopupBridge" extension for iOS and Android which extends the native webviews to provide emulated support for popup windows in the context of an inapp browser.

The cordova-plugin-inappbrowser-popup-bridge plugin extends the official cordova-plugin-inappbrowser plugin to wrap the native Braintree PopupBridge extensions, providing a solution for Cordova apps which works on both Android & iOS. I have used this extensively in production apps and confirm the approach works for both PayPal and 3d-secure popups when used in conjunction with the Braintree JS SDK.

However if your payment provider is not Braintree, I don't have a solution for you.

Disclamier: I am the author of cordova-plugin-inappbrowser-popup-bridge

inappbrowser in cordova not returning 3ds payment data from popup

1 Answers