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>"
}