🔗 UPI Intents

Framework-agnostic TypeScript library for UPI deep-linking across Android and iOS platforms with robust fallbacks and NPCI compliance.

✨ Features

• 🎯 Universal UPI Links - Generate payment and mandate links that work across all UPI apps
• 📱 Platform Optimized - Android Intent URLs and iOS scheme URLs with proper fallbacks
• ✅ NPCI Compliant - Full compliance with NPCI's UPI deep-linking specification
• 🔧 Framework Agnostic - Works with vanilla JS, React, Vue, Angular, and any web framework
• 📊 QR Code Support - Generate QR codes for desktop/fallback scenarios
• 🎨 UI Components - Ready-to-use button components with official app branding
• 📦 Tree Shakeable - ESM modules with TypeScript declarations
• 🧪 Thoroughly Tested - Comprehensive test suite with 70 passing tests

🚀 Quick Start

Installation

npm install upi-intents
# or
yarn add upi-intents
# or
bun add upi-intents

Basic Usage

import { createPaymentUri, buildAppLink, detectPlatform } from 'upi-intents';

// Create a UPI payment link
const upiUri = createPaymentUri(
  'merchant@paytm',     // Payee VPA
  'Demo Merchant',      // Payee name
  '99.50',              // Amount
  'Payment for goods'   // Transaction note
);

// Generate app-specific links
const platform = detectPlatform(); // 'android' | 'ios'
const gpayLink = buildAppLink({
  appId: 'gpay',
  upiUri,
  platform
});

// Open Google Pay
window.location.href = gpayLink.url;

📖 API Reference

Core Functions

createPaymentUri(pa, pn, am?, tn?)

Creates a standard UPI payment URI.

const uri = createPaymentUri(
  'merchant@paytm',     // pa: Payee address (required)
  'Demo Merchant',      // pn: Payee name (required)  
  '100.00',             // am: Amount (optional)
  'Payment note'        // tn: Transaction note (optional)
);
// Returns: "upi://pay?pa=merchant@paytm&pn=Demo%20Merchant&am=100.00&cu=INR&tn=Payment%20note"

createMandateUri(pa, pn, am?, tn?, tr?)

Creates a UPI mandate/subscription URI.

const uri = createMandateUri(
  'merchant@paytm',
  'Demo Merchant', 
  '50.00',
  'Monthly subscription',
  'MANDATE-123'
);

buildAppLink(options)

Generates platform-specific deep links for UPI apps.

const link = buildAppLink({
  appId: 'gpay',        // See supported apps table below for all 38 app IDs
  upiUri: 'upi://pay?...',
  platform: 'android'   // 'android' | 'ios' | auto-detected
});

// Returns:
{
  url: "intent://pay?pa=...",           // Platform-specific URL
  fallbackUrl: "https://play.google...", // App store URL
  app: { id: 'gpay', label: 'Google Pay', verified: true },
  platform: 'android',
  action: 'pay'
}

detectPlatform()

Detects the current platform from user agent.

const platform = detectPlatform(); // 'android' | 'ios'

Utility Functions

generateQRCode(upiUri)

Generates QR codes for desktop fallback.

const qr = generateQRCode(upiUri);
console.log(qr.svg);     // SVG string
console.log(qr.dataUrl); // Data URL for downloads

App Registry

import { getAllApps, getApp, getVerifiedApps } from 'upi-intents';

const allApps = getAllApps();           // All registered UPI apps
const gpay = getApp('gpay');            // Specific app details
const verified = getVerifiedApps();     // Only verified apps

🏗️ Framework Integration

React Component

import React from 'react';
import { createPaymentUri, buildAppLink, detectPlatform } from 'upi-intents';

const UPIPaymentButton = ({ payeeAddress, payeeName, amount, note }) => {
  const handlePayment = (appId) => {
    const upiUri = createPaymentUri(payeeAddress, payeeName, amount, note);
    const platform = detectPlatform();
    const link = buildAppLink({ appId, upiUri, platform });
    
    window.location.href = link.url;
  };

  return (
    <div className="upi-buttons">
      <button onClick={() => handlePayment('gpay')}>
        Pay with Google Pay
      </button>
      <button onClick={() => handlePayment('phonepe')}>
        Pay with PhonePe
      </button>
    </div>
  );
};

Vue.js Integration

<template>
  <div class="upi-payment">
    <button @click="payWithApp('gpay')">Google Pay</button>
    <button @click="payWithApp('phonepe')">PhonePe</button>
  </div>
</template>

<script>
import { createPaymentUri, buildAppLink, detectPlatform } from 'upi-intents';

export default {
  methods: {
    payWithApp(appId) {
      const upiUri = createPaymentUri(
        this.payeeAddress,
        this.payeeName,
        this.amount,
        this.note
      );
      
      const link = buildAppLink({
        appId,
        upiUri,
        platform: detectPlatform()
      });
      
      window.location.href = link.url;
    }
  }
};
</script>

🎯 Supported UPI Apps

Third-Party Payment Apps

| App | Status | Android | iOS | Package / iOS Scheme | |-----|--------|---------|-----|----------------------| | Google Pay | ✅ Verified | ✅ | ✅ | com.google.android.apps.nbu.paisa.user / gpay:// | | PhonePe | ⚠️ Community | ✅ | ✅ | com.phonepe.app / phonepe:// | | Paytm | ⚠️ Community | ✅ | ✅ | net.one97.paytm / paytmmp:// | | Amazon Pay | ⚠️ Community | ✅ | ✅ | in.amazon.mShop.android.shopping / amzn:// | | CRED | ⚠️ Community | ✅ | ✅ | com.dreamplug.androidapp / credpay:// | | WhatsApp | ⚠️ Community | ✅ | ✅ | com.whatsapp / whatsapp:// | | MobiKwik | ⚠️ Community | ✅ | ✅ | com.mobikwik_new / mobikwik:// | | BHIM | ✅ Verified | ✅ | ✅ | in.org.npci.upiapp / bhim:// | | Tata Neu | ⚠️ Community | ✅ | ✅ | com.tatadigital.neumoney / tnupi:// | | Navi | ⚠️ Community | ✅ | ✅ | com.navi.navidotcom / navipay:// | | super.money | ⚠️ Community | ✅ | ✅ | com.hsb.super / super:// | | FreeCharge | ⚠️ Community | ✅ | ✅ | com.freecharge / freecharge:// | | Slice | ⚠️ Community | ✅ | ✅ | com.slice.pay / slicepay:// | | BharatPe | ⚠️ Community | ✅ | ✅ | com.postpe.app / bharatpe:// | | Fi Money | ⚠️ Community | ✅ | ✅ | com.fi.money / fi:// | | Jupiter Money | ⚠️ Community | ✅ | ✅ | com.jupiter.money / jupiter:// | | FamPay | ⚠️ Community | ✅ | ✅ | in.fampay.app / in.fampay.app:// | | Kiwi | ⚠️ Community | ✅ | ✅ | com.kiwi.bank / kiwi:// | | OmniCard | ⚠️ Community | ✅ | ✅ | com.omnicard / omnicard:// | | OneCard | ⚠️ Community | ✅ | ✅ | com.creditcard.onecard / onecard:// | | SimplyPay UPI | ⚠️ Community | ✅ | ✅ | com.simplypay.upi / simplypayupi:// | | Shriram One | ⚠️ Community | ✅ | ✅ | com.shriramone / shriramone:// |

Banking Apps

| App | Status | Android | iOS | Package / iOS Scheme | |-----|--------|---------|-----|----------------------| | ICICI Bank (iMobile) | ⚠️ Community | ✅ | ✅ | com.csam.icici.bank.imobile / imobile:// | | SBI (YONO) | ⚠️ Community | ✅ | ✅ | com.sbi.lotusintouch / yono:// | | Axis Bank | ⚠️ Community | ✅ | ✅ | com.upi.axispay / axispay:// | | HDFC Bank (PayZapp) | ⚠️ Community | ✅ | ✅ | com.hdfc.payzapp / payzapp:// | | Kotak Mahindra Bank | ⚠️ Community | ✅ | ✅ | com.msf.kbank.mobile / kmb:// | | IDFC First Bank | ⚠️ Community | ✅ | ✅ | com.idfcfirstbank.ifi / idfcfirstbank:// | | IndusInd Bank | ⚠️ Community | ✅ | ✅ | com.indusind.indusmobile / indusmobile:// | | Bank of Baroda | ⚠️ Community | ✅ | ✅ | com.bob.upi / bobupi:// | | RBL Bank | ⚠️ Community | ✅ | ✅ | com.rblbank.mobank / rbl:// | | DBS Bank (digibank) | ⚠️ Community | ✅ | ✅ | com.dbs.in.digitalbank / dbin:// | | Canara Bank (ai1Pe) | ⚠️ Community | ✅ | ✅ | com.canarabhim.upiapp.mobility / canara:// | | Punjab National Bank | ⚠️ Community | ✅ | ✅ | com.pnb.upi / pnbupi:// | | Jio Payments Bank | ⚠️ Community | ✅ | ✅ | com.jio.myjio / myjio:// | | Airtel Payments Bank | ⚠️ Community | ✅ | ✅ | com.myairtelapp / myairtel:// |

E-Commerce & Others

| App | Status | Android | iOS | Package / iOS Scheme | |-----|--------|---------|-----|----------------------| | Flipkart UPI | ⚠️ Community | ✅ | ✅ | com.flipkart.android / flipkart:// | | Generic UPI | ✅ Universal | ✅ | ✅ | upi:// |

📱 Platform Support

Android

• Intent URLs with Chrome fallback handling
• Package targeting for specific app launches
• Play Store fallbacks for uninstalled apps
• Generic UPI handling via system chooser

iOS

• Custom URL schemes for direct app launching
• App Store fallbacks for uninstalled apps
• Universal UPI support where available
• Graceful degradation for unsupported schemes

🔧 Development

Setup

git clone https://github.com/shambu2k/upi-intent.git
cd upi-intent
bun install

Available Scripts

bun run test          # Run test suite
bun run test:watch    # Run tests in watch mode  
bun run build         # Build for production
bun run lint          # Run ESLint
bun run typecheck     # Run TypeScript checks

Testing

bun run test --run    # Run all 70 tests

Current test coverage will be shown in the coverage badge above.

📋 Examples

Check out the examples/ directory for complete working examples:

• Vanilla JavaScript - Pure HTML/CSS/JS implementation
• React - Component-based React integration

Live Demo

Open examples/vanilla/index.html in your browser to see the library in action with:

• Interactive payment form
• Platform-specific app buttons
• QR code generation
• Real-time validation

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Adding New UPI Apps

1. Update src/data/apps.json with app details
2. Include verification status and sources
3. Add tests for the new app integration
4. Update documentation

📄 License

GPL-3.0-only License - see the LICENSE file for details.

🙏 Acknowledgments

• NPCI for the UPI specification
• Chrome Intent URLs documentation
• Community contributors for iOS scheme research
• UPI app developers for deep-linking support

📞 Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions
• 📧 [Email Support](mailto:[email protected]?subject="upi-intents lib query")

Made with ❤️ for the Indian payments ecosystem