Integrate InAppBrowser in Ionic React

Ionic Framework Ionic React
1

Hi,

I am developing an eCommerce application with Ionic 5+React+Capacitor.

I want to implement payment gateway through web with the help of InAppBrowser.
Following is what i am trying to achieve

  1. Open the payment gateway page through InAppBrowser when user clicks checkout.
  2. After the user makes payment and redirects to success url, close the webview through an URL change listener.

Sounds simple but i could not find any tutorial for using InAppBrowser plugin or any other equivalent plugin with Ionic+React+Capacitor.
All the tutorial or code reference i find in web are for Angular and Cordova.

Any sample code or tutorial reference will be very much helpful.

2

I used the “Browser” Plugin from “Capacitor” and works really fine, look at the documentation https://capacitorjs.com/docs/apis/browser.

Also have the listens you looking for.
Good lock!

3

Thank you for your suggestion. I already checked this but it seems to have following limitations

  1. Close() method is not supported in Android.
  2. It displays URL bar and navigation buttons but there is no option to hide these controls.

Is there any work around for this?

4

The documentation only shows examples for Angular, but the plugin can be used in Ionic React v5 and Capacitor v3.

Here’s examples of using both the Capacitor Browser plugin and Cordova InAppBrowser:

import { Browser } from '@capacitor/browser';
import { InAppBrowser } from '@ionic-native/in-app-browser';

const openCapacitorSite = async (fullUrl: string) => {
  await Browser.open({ url: fullUrl });
};

const openWebview = async (fullUrl: string) => {
  InAppBrowser.create(fullUrl);
};