UPI Payment Gateway Integration
Budget: ₹600 – ₹1,500 INR
Job Title
Expo React Native Developer – UPI Payment Gateway Integration (Razorpay / PhonePe / Cashfree)
Project Overview
We are looking for an experienced React Native (Expo) developer to integrate a seamless UPI payment gateway into our mobile application. The ideal freelancer must have hands-on experience setting up payment flows, deep-linking with native UPI apps (Google Pay, PhonePe, Paytm, BHIM), handling webhooks, and testing in both sandbox and production environments.
Scope of Work & Steps Involved
Step 1: Environment & Architecture Setup
Configure Expo Development Build / Config Plugins (EAS) if native dependencies or custom schemes are required.
Set up environment variables (.env) for test and production API credentials safely.
Step 2: Backend & Order Creation Logic
Create a secure backend endpoint (Node.js/Express or existing API) to trigger the gateway’s "Create Order / Payment Intent" API.
Generate order tokens and pass transaction payloads securely to the app frontend.
Step 3: Frontend UPI Flow & UI Integration
Build the checkout UI in the Expo app allowing users to select UPI as the payment method.
Support UPI Intent (directly launching Google Pay, PhonePe, Paytm, etc.) or UPI Collect (VPA address).
Handle deep-linking redirects back to the Expo app post-payment.
Step 4: Webhook & Server-Side Verification
Set up a server-side Webhook listener to handle payment status updates (SUCCESS, FAILED, PENDING).
Implement signature verification to secure webhook payloads against tampering.
Step 5: Testing & Go-Live
Perform end-to-end sandbox testing using test UPI handles/credentials.
Verify failure, timeout, and cancellation states in the app UI.
Transition to production API keys and conduct live transaction verification.
Payment Gateway Setup Instructions (Step-by-Step)
Merchant Onboarding:
Register and complete KYC on the chosen Payment Gateway portal (e.g., Razorpay, PhonePe, Cashfree, or PayU).
API Key Generation:
Generate Key ID and Key Secret from the Merchant Dashboard for Sandbox (Test) and Production (Live) environments.
SDK / WebView Configuration in Expo:
Add the relevant Expo config plugins or native SDK modules (using EAS Build) or set up a secure WebView flow.
Configure deep-linking scheme in app.json (e.g., scheme: "myapp") to enable smooth app redirection after payment.
Order Creation & Verification Setup:
Pass transaction parameters: amount, currency (INR), order_id, and callback URLs.
Verify payments server-side before updating database records.
Deliverables
Fully functional UPI payment flow inside the Expo app (iOS & Android).
Backend integration code for order creation and webhook listener.
Clear documentation explaining how to update live API keys and test payments.
Required Skills
React Native / Expo (EAS Build)
Node.js / Backend API development
Payment Gateway Integration (Razorpay, PhonePe, Cashfree, or PayU)
Deep Linking & Webhook Handler configuration
Expo React Native Developer – UPI Payment Gateway Integration (Razorpay / PhonePe / Cashfree)
Project Overview
We are looking for an experienced React Native (Expo) developer to integrate a seamless UPI payment gateway into our mobile application. The ideal freelancer must have hands-on experience setting up payment flows, deep-linking with native UPI apps (Google Pay, PhonePe, Paytm, BHIM), handling webhooks, and testing in both sandbox and production environments.
Scope of Work & Steps Involved
Step 1: Environment & Architecture Setup
Configure Expo Development Build / Config Plugins (EAS) if native dependencies or custom schemes are required.
Set up environment variables (.env) for test and production API credentials safely.
Step 2: Backend & Order Creation Logic
Create a secure backend endpoint (Node.js/Express or existing API) to trigger the gateway’s "Create Order / Payment Intent" API.
Generate order tokens and pass transaction payloads securely to the app frontend.
Step 3: Frontend UPI Flow & UI Integration
Build the checkout UI in the Expo app allowing users to select UPI as the payment method.
Support UPI Intent (directly launching Google Pay, PhonePe, Paytm, etc.) or UPI Collect (VPA address).
Handle deep-linking redirects back to the Expo app post-payment.
Step 4: Webhook & Server-Side Verification
Set up a server-side Webhook listener to handle payment status updates (SUCCESS, FAILED, PENDING).
Implement signature verification to secure webhook payloads against tampering.
Step 5: Testing & Go-Live
Perform end-to-end sandbox testing using test UPI handles/credentials.
Verify failure, timeout, and cancellation states in the app UI.
Transition to production API keys and conduct live transaction verification.
Payment Gateway Setup Instructions (Step-by-Step)
Merchant Onboarding:
Register and complete KYC on the chosen Payment Gateway portal (e.g., Razorpay, PhonePe, Cashfree, or PayU).
API Key Generation:
Generate Key ID and Key Secret from the Merchant Dashboard for Sandbox (Test) and Production (Live) environments.
SDK / WebView Configuration in Expo:
Add the relevant Expo config plugins or native SDK modules (using EAS Build) or set up a secure WebView flow.
Configure deep-linking scheme in app.json (e.g., scheme: "myapp") to enable smooth app redirection after payment.
Order Creation & Verification Setup:
Pass transaction parameters: amount, currency (INR), order_id, and callback URLs.
Verify payments server-side before updating database records.
Deliverables
Fully functional UPI payment flow inside the Expo app (iOS & Android).
Backend integration code for order creation and webhook listener.
Clear documentation explaining how to update live API keys and test payments.
Required Skills
React Native / Expo (EAS Build)
Node.js / Backend API development
Payment Gateway Integration (Razorpay, PhonePe, Cashfree, or PayU)
Deep Linking & Webhook Handler configuration
Related categories:
PHP
JavaScript
Node.js
Socket IO
Payment Gateway Integration
React Native
API Development
Expo