Documentation

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</key>
<array>
  <string>upi</string>
  <string>phonepe</string>
  <string>paytmmp</string>
  <string>tez</string>
  <string>gpay</string>
  <string>credpay</string>
</array>

Full Working Demo Code

Create a new file named App.js:

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

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

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

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

    const colonIndex = url.indexOf(":");
    if (colonIndex === -1) return true;

    const scheme = url
      .slice(0, colonIndex)
      .toLowerCase();

    if (supportedSchemes.has(scheme)) {
      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 on this device."
          );
        }
      } catch (err) {
        console.warn("Failed to open UPI URL:", err);
        Alert.alert(
          "Error",
          "Unable to open payment app. Please try again."
        );
      }

      // Prevent WebView from loading UPI URL
      return false;
    }

    // Allow normal HTTP/HTTPS navigation
    return true;
  };

  return (
    <View style={{ flex: 1 }}>
      <Text style={styles.header}>
        React Native UPI Intent Demo
      </Text>

      <WebView
        source={{ uri: "https://your-payment-page.com" }}
        originWhitelist={[
          "https://*",
          "http://*",
          "upi:*",
          "paytmmp:*",
          "phonepe:*",
          "tez:*",
          "gpay:*",
        ]}
        onShouldStartLoadWithRequest={handleNavigation}
        javaScriptEnabled
        domStorageEnabled
        startInLoadingState
      />
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
    marginVertical: 10,
  },
});

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