Step by Step Guide to Building a Razorpay API Integration in JS

Hey there, fellow dev! Ready to add some payment magic to your JavaScript app? Let's dive into integrating Razorpay's API. It's easier than you might think, and I'll walk you through it step by step.

Introduction

Razorpay is a powerhouse when it comes to payment gateways in India. Their API is robust, developer-friendly, and can handle everything from simple checkouts to complex subscription models. If you're building any kind of e-commerce or SaaS platform, you'll want this in your toolkit.

Prerequisites

Before we jump in, make sure you've got:

• Node.js and npm installed (you're a dev, so I'm sure you do!)
• A Razorpay account with API keys handy
• Some experience with JavaScript and Express.js (nothing too fancy, though)

Setting Up the Project

Let's get our hands dirty:

mkdir razorpay-integration
cd razorpay-integration
npm init -y
npm install express razorpay dotenv

Create an index.js file and let's rock and roll!

Configuring Razorpay

First things first, let's import and set up Razorpay:

require('dotenv').config();
const Razorpay = require('razorpay');

const razorpay = new Razorpay({
  key_id: process.env.RAZORPAY_KEY_ID,
  key_secret: process.env.RAZORPAY_KEY_SECRET
});

Pro tip: Always use environment variables for sensitive info. Your future self will thank you!

Creating an Order

Now, let's set up an endpoint to create a Razorpay order:

app.post('/create-order', async (req, res) => {
  try {
    const options = {
      amount: 50000, // amount in smallest currency unit
      currency: "INR",
      receipt: "order_rcptid_11"
    };
    const order = await razorpay.orders.create(options);
    res.json(order);
  } catch (error) {
    res.status(500).send(error);
  }
});

This creates an order for ₹500 (remember, Razorpay uses the smallest currency unit).

Handling Payment Verification

Security is crucial, so let's verify those payments:

app.post('/verify-payment', (req, res) => {
  const secret = process.env.RAZORPAY_WEBHOOK_SECRET;
  const shasum = crypto.createHmac('sha256', secret);
  shasum.update(JSON.stringify(req.body));
  const digest = shasum.digest('hex');

  if (digest === req.headers['x-razorpay-signature']) {
    // payment is legit, do something with the order
    res.json({ status: 'ok' });
  } else {
    res.status(400).json({ status: 'fail' });
  }
});

This webhook will catch Razorpay's callbacks and verify the signature. Neat, huh?

Integrating Razorpay Checkout on the Frontend

Time to make it rain on the frontend:

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
const options = {
    key: 'YOUR_KEY_ID',
    amount: 50000,
    currency: 'INR',
    name: 'Acme Corp',
    description: 'Test Transaction',
    order_id: 'order_id_from_backend',
    handler: function (response) {
        alert(response.razorpay_payment_id);
    },
};
const rzp = new Razorpay(options);
rzp.open();
</script>

This snippet will pop open the Razorpay checkout when triggered. Smooth!

Error Handling and Best Practices

Always expect the unexpected:

• Wrap your async operations in try/catch blocks
• Use Razorpay's test mode for development
• Never expose your key_secret on the frontend
• Always verify payments server-side

Testing the Integration

Razorpay provides test cards for simulating different scenarios. Use them liberally before going live. It's always better to catch bugs in test than in prod, right?

Conclusion

And there you have it! You've just integrated Razorpay into your JS app. Pretty straightforward, wasn't it? Remember, this is just scratching the surface. Razorpay offers a ton more features like recurring payments, payment links, and more.

For more in-depth info, check out Razorpay's official docs. They're a goldmine of information.

Now go forth and process those payments! Happy coding! 🚀💸