Accept payments with Razorpay

By the end of this page you will have a Web app with a button that opens Razorpay’s checkout and records the payment, tested end to end in preview with Razorpay’s test mode.

The example used throughout is a donation site for an animal shelter, where each pet has its own donate button.

What your app gets

When you add Razorpay to an app, qRaptor gives it a complete payment flow:

• A checkout window. When someone clicks your pay button, Razorpay’s own payment window opens over your app, showing the amount.
• A check when the browser returns. After the payment, your app’s server checks that the result handed back to the browser really came from Razorpay.
• A direct confirmation from Razorpay. Razorpay also notifies your app’s server directly. That notification is checked against your webhook secret and processed once, even if Razorpay sends it more than once. So a payment is still recorded if the customer closes the tab before getting back to your app.

The code that talks to Razorpay is written and tested by qRaptor. Your app’s own generated code builds the pages, forms and records around it.

Prerequisites

• A Razorpay  account. Test mode is enough for everything on this page except Going live.
• Developer Developer role or above, to save credentials.
• A project to build the app in. This page walks through a Web app.

Steps

Get your Razorpay keys

Razorpay calls these API keys. In the Razorpay Dashboard, switch to Test Mode, then generate a key from the API Keys settings. You get two values:

• a Key Id, which starts rzp_test_
• a Key Secret

⚠️

Razorpay shows the Key Secret only once, when you generate it. Copy it somewhere safe before you close the dialog.

You also need a webhook secret. Razorpay doesn’t generate this one: you choose it yourself. Pick a long, random string. You’ll enter the same value in qRaptor now and in Razorpay’s webhook settings later.

See Razorpay’s guide to generating API keys  if you need more detail.

Save the keys in Connections

Open Connections and click Razorpay. On the Preview side, fill in:

Field	Value
Key ID	Your test Key Id
Key Secret	Your test Key Secret
Webhook Secret	The webhook secret you chose

Click Save preview. See Add credentials for what each part of this form does.

Mention @razorpay in your prompt

On the Create Apps page, write your prompt as usual (see Create an app). Where you describe the payment, type @. A list opens with Razorpay at the top, labelled integration. Pick it, or type @razorpay in full.

A chip under the prompt box confirms the mention: @razorpay · Razorpay.

A prompt for the shelter example might include: “Clicking Donate opens a form asking for an amount in INR. Submitting the form opens the payment checkout using @razorpay.”

ℹ️

Use the @ mention. If you only write the word “Razorpay”, qRaptor suggests the connection but doesn’t add it. Payment connections move real money, so they’re only added when you ask for them explicitly.

Click Generate App.

Check the requirements

When the Requirements Specification appears, look for its Integrations section. A line confirms Razorpay will be built:

Razorpay — Ready. Add your Razorpay credentials in Connections before starting a preview.

Review the rest of the requirements, then click Approve & Generate. See The generation flow for what happens next.

Open the preview

When generation finishes, open the Preview tab. If your app has authentication, sign in with test credentials from App Details → Roles (see Preview your app).

Register the callback URL in Razorpay

Razorpay needs to know where to send its payment notifications. Each app has its own address.

1. In qRaptor, open Connections → Razorpay and scroll to Callback URLs. It lists every app in the project, with a Preview and a Production URL for each.
2. Click the copy icon next to your app’s Preview URL. It ends in /webhooks/razorpay.
3. In the Razorpay Dashboard, still in Test Mode, open the Webhooks settings and click + Add New Webhook.
4. Paste the URL into URL, and enter the same webhook secret you saved in qRaptor into Secret.
5. Under Active Events, select payment.captured and order.paid.
6. Click Create Webhook.

ℹ️

qRaptor doesn’t register this URL with Razorpay for you, and can’t tell whether a registration is still correct. If the Preview column says Preview this app once to get its URL, open the app’s preview first, then come back.

Make a test payment

In the preview, click a pet’s donate button (in this example, Donate for Bruno), enter an amount and submit the form. Razorpay’s checkout opens.

Pay with one of Razorpay’s test payment details , such as the test card 4100 2800 0000 1007 or the test UPI ID success@razorpay.

When the payment goes through, the checkout shows Payment Successful with the amount and Razorpay’s payment ID, then returns you to your app after a few seconds.

Going live

When the test payment works, switch to live keys for production.

1. Get live keys. In the Razorpay Dashboard, switch to Live Mode and generate a key. Razorpay asks for your website details before it issues live keys.
2. Save them in Connections. On the Razorpay page, fill in the Production side with your live Key ID and Key Secret, plus a webhook secret for production, and click Save production.
3. Publish the app. See Publish to production. Save the production credentials first: an app with empty production credentials won’t start.
4. Register the production callback URL. Back in Callback URLs, copy your app’s Production URL. In the Razorpay Dashboard, in Live Mode, add a webhook with that URL, the production webhook secret, and the same two events.

Adding Razorpay to an app you’ve already built

You don’t have to start again. In the app’s chat panel, ask for the change and mention the connection, for example “Add a Donate button to each pet card using @razorpay.” The credentials and callback URL steps above still apply.

Once an app has Razorpay, it keeps it. You don’t need to mention @razorpay again in later requests.

Common issues

• Razorpay shows a lightbulb instead of a tick on the requirements. The prompt named Razorpay without the @ mention, so it was suggested rather than added. Approve the rest, then ask for it in the chat panel with @razorpay (see Adding Razorpay to an app you’ve already built).
• “I can’t connect to … yet.” You asked for a service qRaptor doesn’t connect to yet. The message names the connections that are available, and the rest of your app is still built.
• The preview won’t start, with “Preview cannot start — … required credentials are missing”. A required field on the Preview side is empty. Fill it in on Connections → Razorpay, save, and start the preview again.
• The production deployment fails with “Deployment cannot start — … required credentials are missing”. The same problem on the Production side. Save the production credentials, then try the deployment again.
• Payments complete, but Razorpay’s notifications don’t reach the app. Check that the URL you registered is for the right app and the right environment, that the webhook secret matches what you saved in qRaptor exactly, that both events are selected, and that you registered it in the matching Razorpay mode: Test Mode for preview, Live Mode for production.