react-native-open-upi

Deep linking for UPI payment apps in Android. This library allows you to initiate UPI payments from your React Native app by launching UPI-enabled apps installed on the user's device.

Note: This library only works on Android. iOS will return a failure status as UPI payment apps are not available on iOS.

Installation

npm install react-native-open-upi

or

yarn add react-native-open-upi

Usage

import { startPayment } from 'react-native-open-upi';

// Initiate a UPI payment
const handlePayment = async () => {
  try {
    const result = await startPayment(
      'upi://pay?pa=merchant@upi&pn=MerchantName&am=100.00&cu=INR&tn=Payment%20for%20Order',
      'ORDER_123456'
    );

    if (result.status === 'SUCCESS') {
      console.log('Payment successful!', result);
    } else {
      console.log('Payment failed or cancelled', result);
    }
  } catch (error) {
    console.error('Payment error:', error);
  }
};

API Reference

startPayment(url, requestID)

Initiates a UPI payment by opening a chooser dialog with available UPI apps.

Input Parameters

Parameter	Type	Required	Description
url	string	Yes	The UPI deep link URL containing payment details (e.g., upi://pay?pa=...&pn=...&am=...&cu=INR&tn=...)
requestID	string	Yes	A unique identifier for the transaction (e.g., order ID). This will be returned in the response for tracking

UPI URL Parameters

The url parameter should be a valid UPI deep link. Common parameters include:

Parameter	Description	Example
pa	Payee VPA (UPI ID)	merchant@upi
pn	Payee Name	MerchantName
am	Amount	100.00
cu	Currency (usually INR)	INR
tn	Transaction Note	Payment for Order
tr	Transaction Reference ID	TXN123456
mc	Merchant Category Code	5411

Output (PaymentResult)

Returns a Promise<PaymentResult> with the following structure:

Property	Type	Description
status	string	Payment status: SUCCESS, FAILURE, or SUBMITTED. Status is always uppercase
message	string	Response message from the UPI app or error description
orderID	string	The requestID that was passed to the function, useful for tracking

Status Values

Status	Description
SUCCESS	Payment was completed successfully
FAILURE	Payment failed or was cancelled by user
SUBMITTED	Payment was submitted but final status is pending confirmation

Error Scenarios

The function will return a FAILURE status in the following cases:

• No UPI app is installed on the device
• User cancelled the payment or closed the app chooser
• Activity does not exist (app is in background)
• Request code mismatch (internal error)

Example

import React, { useState } from 'react';
import { View, Button, Text, Alert } from 'react-native';
import { startPayment, type PaymentResult } from 'react-native-open-upi';

export default function App() {
  const [result, setResult] = useState<PaymentResult | null>(null);

  const handlePayment = async () => {
    const upiUrl = 'upi://pay?pa=example@upi&pn=ExampleMerchant&am=1.00&cu=INR&tn=TestPayment';
    const orderId = `ORDER_${Date.now()}`;

    const paymentResult = await startPayment(upiUrl, orderId);
    setResult(paymentResult);

    if (paymentResult.status === 'SUCCESS') {
      Alert.alert('Success', 'Payment completed successfully!');
    } else {
      Alert.alert('Failed', paymentResult.message);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Pay with UPI" onPress={handlePayment} />
      {result && (
        <View style={{ marginTop: 20 }}>
          <Text>Status: {result.status}</Text>
          <Text>Message: {result.message}</Text>
          <Text>Order ID: {result.orderID}</Text>
        </View>
      )}
    </View>
  );
}

Platform Support

Platform	Supported
Android	Yes
iOS	No

On iOS, the startPayment function will return:

{
  "status": "FAILURE",
  "message": "UPI payment is only supported on Android",
  "orderID": "<your-request-id>"
}