I am using InAppBrowser plugin to redirect user to payment website. The problem is that, when payment is done , I need to close that window automatically.
Is there any way to watch requests in InAppBrowser and check them, so that I can catch the successful response and close browser?
Normally you listen to page load events or other events happening in the InAppBrowser. Here is an example of using the Cordova plugin directly (without Ionic Native):
browser.addEventListener("loadstart", (event) => {
if ((event.url).indexOf("http://localhost/callback") === 0) {
browser.removeEventListener("exit", (event) => {});
browser.close();
// do things with `event.url` here
}
});
Related
I try to add a Googla Pay button on a website. I follow the Google Pay implementation tutorial (https://developers.google.com/pay/api/web/guides/tutorial).
There is a code:
var paymentsClient = getGooglePaymentsClient();
paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
.then(function(response) {
//...
})
.catch(function(err) {
//...
});
I need to get some data from my server side before I call the above code so I do the http post request. Within success hanlder of my post request I call the above code. It works fine in my Android browser and my laptop browser. But it doesn't work from Safari. I get the "Unexpected developer error please try again later" error. If I call it without ajax request it works in Safari as well. Could someone suggest the solution?
Thanks for including the jsfiddle.
The reason that it's not working is because Google Pay tries to open a popup window when you call loadPaymentData in Safari. When a new window is triggered as the result of a click event (user initiated action), the popup window opens as expected. When it is triggered by a non-user initiated action, Google Pay gets loaded in the same window which ends up causing it to fail.
It looks like when you make an ajax request in the click handler and then call loadPaymentData, Safari considers it a non-user initiated action.
Check out the following example in Safari:
const ajaxButton = document.getElementById('ajax');
const nojaxButton = document.getElementById('nojax');
ajaxButton.addEventListener('click', event => {
$.get('/echo/json/', () => {
window.open('about:blank');
});
});
nojaxButton.addEventListener('click', event => {
window.open('about:blank');
});
I would recommend avoiding making any http calls on the button click event before loadPaymentData. If you can fetch the data before the button is clicked, then do so.
Out of interest, what kind of data are you fetching?
I have an Ionic 5.x app with the InAppBrowser plugin. I am trying to load a website with the plugin, the browser opens but the page is completely blank and with no errors thrown.
After many hours of debugging I have concluded that the issue is the certificate of the website not being trusted.
What does not make sense is the website is secure when viewed on a browser and is "Verified by: DigiCert Inc"
Other questions with same issue:
Loading url in ionic shows blank screen,
Cordova inAppBrowser opens www.google.com but not my custom facebook login page?
Does anyone have any ideas on why this is happening?
The code I am using to open:
this.browser = this.inAppBrowser.create( "https://mywebsite.com/", "_blank", "location=yes" );
this.browser.on("loadstart").subscribe( event => {
console.log( event ); // not triggered
});
this.browser.on("loadstop").subscribe( event => {
console.log( event ); // triggered
});
this.browser.on("loaderror").subscribe( event => {
console.log( event ); // not triggered
});
After many many hours of digging around I was finally able to find a solution. Editing a plugin file is not ideal but it does fix this issue!
Edit this file: plugins/cordova-plugin-inappbrowser/src/android/InAppBrowser.java
Add this to the import section:
import android.net.http.SslError;
import android.webkit.SslErrorHandler;
Then add this to the InAppBrowserClient class ( around line 1224 ):
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
return;
}
In file "plugins\cordova-plugin-inappbrowser\src\android\InAppBrowser.java":
Add this lines to import section:
import android.net.http.SslError;
import android.webkit.SslErrorHandler;
Add this to the InAppBrowserClient class ( around line 1224 ):
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
return;
}
In Console of Project Root: execute
$ cordova platform remove android
$ cordova platform add android
I have created an Ionic app. I have some items to order. Payment is done using Paypal. I have called a web url using window.open(url) which is redirecting me to the Paypal.
I'm able to do the payment successfully, but Can anyone please let me know how I can come back to my ionic app after successful payment.
Note: I have not used Paypal plugin as it is not developed for windows
Few days back even i was facing the same issue, i was able to do payment where the ionic app drags to the third party api but after the payment it was not redirecting to the ionic app in the mobile/smartphone.
after soing dome R and D i got the solution that when the app is running on the mobile it will not be having any port number running on i,e., http://localhost/dashboard instead of http:localhost:8100/dashboard, where 8100 is the port number running for the ionic server.
after specifying the return back url as http://localhost/dashboard i was able to redirect back to the ionic app.
Use loadsart event of the InAppBrowser to catch the urls when load pages after payment was done. Then you can process your tasks according to those urls and their parameters as you prefer. As an example, when you have the payment successful url you can navigate back to your app after closing the open browser. Also you can have the data passing back when the payment is success or fail, into your application using this way. Hope this will help to you.
addEventListener('loadstart', function(event) { var currentUrl = event.url /*do the rest according to the url inside your application */});
I just add a pseudo-code below.
browserRef.addEventListener('loadstart', function(event) {
var param = getParameters(event.url); //Read the parameters from the url
if (isCorrectParameters(param)) { //Check parameters agaist the payment gateway response url
browserRef.close(); // colse the browser
//Handle the success and failed scenarios
if(success){
$state.go('test');
}else{
// handle fail scenario
}
}
});
I'm very new to Ionic 2 framework and I'm trying to write an app in which I need to open an external URL in an embedded browser (InAppBrowser). I create an InAppBrowser instance and launch the browser. The browser opens and it also opens the link, but I keep getting an error.
Cannot read property 'addEventListener' of undefined
Here's the code that I'm using:
let browser = new InAppBrowser(
"http://www.google.com",
"_blank",
"location=no,hidden=yes",
);
console.log(browser);
browser.on('loadstop').subscribe(
(res) => {
// Handle url checking and body parsing here
},
(error) => {
// Handle error here
}
);
browser.on('deviceready').subscribe(
(res) => {
browser.show();
console.log(res);
},
(error) => {
console.log(error);
}
);
I don't understand what I'm doing wrong. I want to check what the url is everytime the browser loads a webpage and if it is the desired web page then parse the body of the browser and then close it.
I'm trying to integrate a payment gateway. So basically I load the payment url in the browser, user makes the payment and the payment gateway redirects the user to my backend url. Now I want to parse what my backend returns and close the browser. Also, that console.log(browser) in there does logs an instance of InAppBrowser.
I have below code to open a new browser window which is external URL other than the my applcation
<button id="button" onclick="window.location='http://www.google.com';">click</button>
Problem is: How can I stay within the browser when I open an http url ?
I crosswalk version10, -latest intel-xdk -
function onDeviceReady() {
if( navigator.splashscreen && navigator.splashscreen.hide ) { // Cordova hide splashscreen detected, use it
navigator.splashscreen.hide() ;
alert("Device is ready !");
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
alert("Started");
}
}
document.addEventListener("deviceready", onDeviceReady, false) ; // ignored by "Standard HTML5 web app"
</script>
I have the first alert "Device is ready");
but it never navigates to apache.org and I never got the second alert !
I added in App Browser (0.5.4) into Cordova included plugins.
In general, it is best to use the inAppBrowser plugin when trying to open URLs within a Cordova app (you are building Cordova apps with the Intel XDK). There are several open options associated with that plugin and it will give you the control you need.