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, { 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 }}>
      {/* HEADER */}
      <View style={styles.header}>
        <Text style={styles.title}>React Native UPI Intent Demo</Text>
      </View>

      {/* WEBVIEW */}
      <View style={{ flex: 1 }}>
        <WebView
          ref={webViewRef}
          source={{ uri: PAYMENT_URL }}
          originWhitelist={["*"]}
          onShouldStartLoadWithRequest={handleNavigation}
          javaScriptEnabled
          domStorageEnabled
          startInLoadingState
        />
      </View>
    </View>
  );
};

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

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