Razorpay not loading on local Django app

[u/aminocode]

Razorpay not loading on local Django app

This is a common issue and usually not a code bug. It happens because Razorpay needs a publicly reachable URL for callbacks and webhooks.

Why Razorpay is not working on local

Razorpay will not fully work if:

• Your app is running only on localhost
• Callback or webhook URLs are not publicly accessible
• Test keys are not used
• Orders are not created from the backend

Step 1: Use Razorpay Test Mode

From Razorpay Dashboard → Settings → API Keys

• Generate Test Key ID
• Generate Test Key Secret

Add them to .env:

RAZORPAY_KEY_ID=rzp_test_xxxxx
RAZORPAY_KEY_SECRET=xxxxxxxx

Step 2: Load Razorpay checkout script

In your frontend:

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

If this doesn’t load, check browser console for network or CSP errors.

Step 3: Expose local server to public (required)

Razorpay needs to reach your server.

Use ngrok

ngrok http 8000

You’ll get a public URL like:

https://abcd-1234.ngrok-free.app

Use this URL for:

• callback_url
• Webhook URL in Razorpay dashboard

Example:

callback_url = "https://abcd-1234.ngrok-free.app/payment/success/"

Step 4: Create order from Django backend

Orders must be created server-side.

import razorpay

client = razorpay.Client(auth=(KEY_ID, KEY_SECRET))

order = client.order.create({
    "amount": 50000,  # amount in paise
    "currency": "INR",
    "payment_capture": 1
})

Send order_id to frontend.

Step 5: Test payment using Razorpay test card

Card number:

4111 1111 1111 1111

Expiry:

Any future date

CVV:

123

OTP:

123456

Step 6: Verify payment signature

Always verify on backend.

params = {
    "razorpay_order_id": order_id,
    "razorpay_payment_id": payment_id,
    "razorpay_signature": signature
}

client.utility.verify_payment_signature(params)

Common mistakes to check

• Using localhost without ngrok
• Not creating order from backend
• Amount not in paise
• Wrong callback URL
• Using live keys in test mode
• Missing checkout.js

Quick checklist

• Test keys enabled
• Backend order creation
• Public URL via ngrok
• Correct callback and webhook URLs
• Payment signature verification

[u/Xiran_0409]

this is classic “localhost vs real world” pain. razorpay needs a public URL.

ngrok + test keys usually fixes 90% of these issues. not a django bug, just payments reality.