This tutorial was written by Claude Code (an AI) and has not yet been reviewed. Follow along with caution. If the tutorial was helpful or a specific part was not clear/correct, please provide feedback at the bottom of the page. Thank you.
This guide covers integrating Razorpay with CoCart Preview API. Requires CoCart v4.6+ and a configured Razorpay payment gateway.
Overview
Razorpay integration with CoCart uses Razorpay Checkout for secure payment processing with automatic tokenization. This ensures PCI DSS Level 1 compliance while providing access to 100+ payment methods popular in India and Southeast Asia. Razorpay is the leading payment gateway in India, serving over 10 million businesses with support for UPI, cards, wallets, net banking, and EMI.Prerequisites
Before implementing Razorpay checkout, ensure you have:- Razorpay payment gateway configured in WooCommerce
- Razorpay API keys (Key ID and Key Secret)
- A valid cart with items added
- Customer billing address information
- Razorpay account (test mode available)
Integration Flow
1
Create Order
Generate a Razorpay order from your server
2
Load Razorpay Checkout
Initialize the Razorpay Checkout JavaScript library
3
Configure Checkout
Set up checkout options with order details
4
Open Checkout Modal
Display the Razorpay payment modal to customer
5
Handle Payment Response
Capture payment details and signature
6
Complete Checkout
Submit payment details to CoCart for verification
Step 1: Load Razorpay Checkout
Include the Razorpay Checkout script in your page:The Razorpay Checkout library is always served over HTTPS and automatically stays up to date.
Step 2: HTML Structure
Create a checkout form for customer information:Step 3: Create Razorpay Order
Request a Razorpay order from your server via CoCart:Step 4: Initialize Razorpay Checkout
Set up and configure Razorpay Checkout:Step 5: Handle Payment Success
Process successful payment response:Step 6: Handle Payment Failure
Manage failed payment scenarios:Complete Integration Example
Here’s a complete working implementation:Styling
Add CSS for a polished checkout experience:Testing
For development and testing with Razorpay:Test Mode Credentials
Use these credentials from your Razorpay Test Mode dashboard:- Key ID: Starts with
rzp_test_ - Key Secret: Use for server-side operations
Test Payment Methods
Test Card Numbers:- Success:
4111 1111 1111 1111(Visa) - Success:
5555 5555 5555 4444(Mastercard) - Failure: Any card number ending in
0002
- CVV: Any 3 digits
- Expiry: Any future date
- Cardholder: Any name
- Success:
success@razorpay - Failure:
failure@razorpay
- Select any bank from test mode
- Use credentials provided in test interface
Test Wallets
All wallet payments in test mode are automatically successful.Supported Payment Methods
Razorpay supports 100+ payment methods:Cards
- Credit Cards (Visa, Mastercard, RuPay, Amex)
- Debit Cards (All major banks)
- International Cards
UPI
- Google Pay
- PhonePe
- Paytm
- BHIM UPI
- Other UPI apps
Wallets
- Paytm
- PhonePe
- Mobikwik
- FreeCharge
- Amazon Pay
Net Banking
- All major Indian banks
- Corporate net banking
EMI
- Credit Card EMI
- Debit Card EMI
- Cardless EMI
Other Methods
- PayLater (LazyPay, Simpl, etc.)
- NACH/eNACH
- Bank Transfer (NEFT/RTGS)
Best Practices
Security
- Always verify payment signature on server
- Never expose Key Secret on frontend
- Use HTTPS for all requests
- Implement webhook verification
- Store payment IDs securely
- Enable fraud detection features
User Experience
- Pre-fill customer information
- Show clear order summary
- Handle modal dismissal gracefully
- Provide payment retry options
- Display multiple payment methods
- Support preferred languages
Compliance
- PCI DSS Level 1 certified
- RBI compliant tokenization
- Implement proper error logging
- Follow data retention policies
- Enable auto-refunds when needed
- Maintain transaction records
Performance
- Load Checkout.js from CDN
- Cache order contexts briefly
- Implement proper timeouts
- Handle network failures
- Monitor success rates
- Set up webhook endpoints
Advanced Features
Payment Capture
By default, payments are auto-captured. For manual capture:Recurring Payments
Set up subscriptions and recurring payments:Offers and Discounts
Apply offers during checkout:Webhook Handling
Razorpay sends webhooks for payment events:Error Handling
Handle common Razorpay errors:Troubleshooting
Common issues and solutions: Checkout modal not opening: Verify Checkout.js is loaded and Key ID is correct. Payment verification fails: Ensure signature verification logic is implemented correctly on server. Webhook not received: Check webhook URL configuration in Razorpay dashboard. Amount mismatch: Razorpay amounts are in smallest currency unit (paise for INR). Order creation fails: Verify API credentials and order amount is within limits.Always test your Razorpay integration thoroughly using test mode before going live. Configure webhooks to handle asynchronous payment updates. Monitor your Razorpay dashboard for failed payments and disputes. Implement proper logging for debugging payment issues.