# Integrate InAppBrowser in Ionic React

**URL:** <https://forum.ionicframework.com/t/integrate-inappbrowser-in-ionic-react/193417>\
**Category:** Ionic React\
**Created:** [July 25, 2020, 2:49pm UTC](https://forum.ionicframework.com/t/integrate-inappbrowser-in-ionic-react/193417 "2020-07-25T14:49:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![spbhaskar](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@spbhaskar](https://forum.ionicframework.com/u/spbhaskar)\
**Post date:** [July 25, 2020, 2:49pm UTC](https://forum.ionicframework.com/t/integrate-inappbrowser-in-ionic-react/193417/1 "2020-07-25T14:49:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nunocostapt](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nunocostapt/32/106245_2.png) [@nunocostapt](https://forum.ionicframework.com/u/nunocostapt)\
**Post date:** [July 25, 2020, 5:00pm UTC](https://forum.ionicframework.com/t/integrate-inappbrowser-in-ionic-react/193417/2 "2020-07-25T17:00:37Z")

</div>

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

Also have the listens you looking for.  
Good lock!

---

<div class="post-metadata">

**Author:** ![spbhaskar](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@spbhaskar](https://forum.ionicframework.com/u/spbhaskar)\
**Post date:** [July 26, 2020, 5:09am UTC](https://forum.ionicframework.com/t/integrate-inappbrowser-in-ionic-react/193417/3 "2020-07-26T05:09:13Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ptmkenny](https://avatars.discourse-cdn.com/v4/letter/p/ea666f/32.png) [@ptmkenny](https://forum.ionicframework.com/u/ptmkenny)\
**Post date:** [November 4, 2021, 4:46pm UTC](https://forum.ionicframework.com/t/integrate-inappbrowser-in-ionic-react/193417/4 "2021-11-04T16:46:13Z")

</div>

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:

```auto
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);
};

```