UPI Intent in WebView – React Native

This guide provides a fully working React Native example for enabling UPI Intent payments inside a WebView, without using any native SDK.

It supports popular UPI apps such as Google Pay, PhonePe, Paytm, Cred, and other UPI-compliant applications.

Steps to Implement UPI Intent in React Native

1. Install Dependencies

Install the required WebView dependency:

npm install react-native-webview

We use:

• react-native-webview to embed the WebView
• Linking API from React Native core to open UPI apps

2. iOS Setup (Optional)

If you support iOS, add supported UPI URL schemes to
ios/Runner/Info.plist under LSApplicationQueriesSchemes:

<key>LSApplicationQueriesSchemes&lt;/key&gt;
&lt;array&gt;
  &lt;string&gt;upi&lt;/string&gt;
  &lt;string&gt;phonepe&lt;/string&gt;
  &lt;string&gt;paytmmp&lt;/string&gt;
  &lt;string&gt;tez&lt;/string&gt;
  &lt;string&gt;gpay&lt;/string&gt;
  &lt;string&gt;credpay&lt;/string&gt;
&lt;/array&gt;

Full Working Demo Code

Create a new file named App.js:

import React, { useRef } from "react";
import {
  Linking,
  View,
  Text,
  StyleSheet,
  Alert,
} from "react-native";
import { WebView } from "react-native-webview";

const PAYMENT_URL = "https://your-website-name.com";

const supportedSchemes = new Set([
  "upi",
  "paytmmp",
  "phonepe",
  "tez",
  "gpay",
  "credpay",
]);

const UPIWebView = () => {
  const webViewRef = useRef(null);

  const handleAsyncNavigation = async (url: string) => {
    try {
      const canOpen = await Linking.canOpenURL(url);

      if (canOpen) {
        await Linking.openURL(url);
      } else {
        Alert.alert(
          "App not installed",
          "Required UPI app is not installed."
        );
      }
    } catch (err) {
      Alert.alert("Error", "Unable to open payment app.");
    }
  };

  const handleNavigation = (request: any) => {
    const url = request?.url || request?.nativeEvent?.url;

    if (!url || typeof url !== "string") return true;

    const scheme = url.split(":")[0].toLowerCase();

    if (supportedSchemes.has(scheme)) {
      handleAsyncNavigation(url);
      return false;
    }

    return true;
  };

  return (
    <View style={{ flex: 1 }}&gt;
      {/* HEADER */}
      &lt;View style={styles.header}&gt;
        &lt;Text style={styles.title}&gt;React Native UPI Intent Demo&lt;/Text&gt;
      &lt;/View&gt;

      {/* WEBVIEW */}
      &lt;View style={{ flex: 1 }}&gt;
        &lt;WebView
          ref={webViewRef}
          source={{ uri: PAYMENT_URL }}
          originWhitelist={[&quot;*&quot;]}
          onShouldStartLoadWithRequest={handleNavigation}
          javaScriptEnabled
          domStorageEnabled
          startInLoadingState
        /&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  );
};

const styles = StyleSheet.create({
  header: {
    padding: 10,
    backgroundColor: &quot;#222&quot;,
    flexDirection: &quot;row&quot;,
    justifyContent: &quot;space-between&quot;,
    alignItems: &quot;center&quot;,
  },
  title: {
    color: &quot;#fff&quot;,
    fontSize: 16,
    fontWeight: &quot;bold&quot;,
  }
});

export default UPIWebView;

Common Issues & Fixes

• Handler not called
  Ensure you are using onShouldStartLoadWithRequest.

• Nothing launches on iOS
  Verify all schemes are added to LSApplicationQueriesSchemes.

• Android error: “No Activity found to handle Intent”
  The UPI app may not be installed, or the scheme is incorrect.

Supported UPI Intent Apps

The following UPI apps are commonly supported:

• Google Pay
• PhonePe
• Paytm
• Cred
• Other UPI-compliant apps

Best Practices

• Always validate URL schemes before opening external apps
• Provide clear user feedback when a UPI app is unavailable
• Test UPI flows on real devices (emulators may not support UPI apps)

Related Information

• UPI Intent Troubleshooting and FAQs