Integrating PayPal, Stripe, and Razorpay Payment Gateways with Next.js

When building modern web applications, especially e-commerce platforms or service-oriented websites, incorporating a reliable payment system is crucial. Popular payment gateways like PayPal, Stripe, and Razorpay offer secure, user-friendly, and globally recognized solutions, making them ideal choices for developers. Combining these payment solutions with Next.js, a powerful React framework, allows you to create seamless and efficient payment experiences. This guide provides an overview of how to integrate PayPal, Stripe, and Razorpay with Next.js, exploring the setup, benefits, and unique features of each option.

Why Choose Next.js for Payment Integrations?

Next.js offers server-side rendering, static site generation, and API route capabilities, which make it an excellent framework for building optimized, SEO-friendly applications. With built-in API routes, you can handle backend processes directly within the Next.js environment, making it easy to implement payment gateways. Next.js provides the performance and flexibility needed to create a smooth and secure checkout experience.

Setting Up Payment Gateways in Next.js

Each payment gateway—PayPal, Stripe, and Razorpay—has its own setup process and requirements. Here, we’ll go through the basic steps for integrating each gateway, explaining their unique features and benefits.

1. Integrating PayPal with Next.js

PayPal is one of the most widely used payment platforms worldwide, offering customers the ability to pay through their PayPal accounts or credit cards. PayPal’s strong security measures and brand recognition make it a trusted choice for both businesses and customers.

Steps for Integrating PayPal

To integrate PayPal with Next.js, follow these steps:

• Step 1: Set up a PayPal Business Account and obtain your client ID and secret from the PayPal Developer Dashboard.
• Step 2: Install the PayPal SDK by running npm install @paypal/react-paypal-js in your Next.js project.
• Step 3: Create a PayPal component and import the PayPal buttons into your Next.js app. Configure your client ID in the PayPalScriptProvider.

import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function PayPalComponent() {
    return (
        <PayPalScriptProvider options={{ "client-id": "YOUR_CLIENT_ID" }}>
            <PayPalButtons style={{ layout: "vertical" }} />
        </PayPalScriptProvider>
    );
}

This simple setup displays PayPal buttons that users can click to complete transactions. Customize the buttons and handle payment completion using callbacks for a smoother experience.

2. Integrating Stripe with Next.js

Stripe is a developer-friendly payment gateway known for its ease of integration and advanced API features. Stripe supports a wide range of payment methods, including credit cards, digital wallets, and local payment options.

Steps for Integrating Stripe

Stripe’s setup involves both front-end and backend configurations:

• Step 1: Set up a Stripe account and get your API keys (publishable and secret keys).
• Step 2: Install the Stripe package by running npm install @stripe/stripe-js stripe in your Next.js project.
• Step 3: Create a backend API route in /pages/api to handle Stripe payments securely. For example, create an API endpoint /api/create-checkout-session to create a Stripe checkout session.

// /pages/api/create-checkout-session.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
    const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: [
            {
                price_data: {
                    currency: 'usd',
                    product_data: {
                        name: 'Sample Product',
                    },
                    unit_amount: 2000,
                },
                quantity: 1,
            },
        ],
        mode: 'payment',
        success_url: `${req.headers.origin}/success`,
        cancel_url: `${req.headers.origin}/cancel`,
    });

    res.json({ id: session.id });
}

In this example, a Stripe checkout session is created with product details, and URLs for success and cancellation pages are defined. You can then use Stripe’s checkout button on the frontend to initiate payment processing securely.

3. Integrating Razorpay with Next.js

Razorpay is a popular payment gateway in India, supporting local and international payment options, including UPI, wallets, and cards. Razorpay’s easy-to-use API and comprehensive dashboard make it a convenient choice for Indian developers and businesses.

Steps for Integrating Razorpay

To set up Razorpay with Next.js:

• Step 1: Sign up for a Razorpay account and get your API key and secret.
• Step 2: Install the Razorpay package by adding the Razorpay checkout script in the Next.js app.
• Step 3: Create an API route in Next.js to initiate Razorpay orders from the backend.

// /pages/api/razorpay-order.js
import Razorpay from 'razorpay';

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

export default async function handler(req, res) {
    const options = {
        amount: 50000,  // amount in the smallest currency unit
        currency: "INR",
        receipt: "order_rcptid_11"
    };
    const order = await razorpay.orders.create(options);
    res.status(200).json(order);
}

In this setup, an order is created through Razorpay’s API. On the frontend, use Razorpay’s JavaScript SDK to handle payment processing:

import Script from 'next/script';

function RazorpayComponent() {
    const handlePayment = () => {
        const options = {
            key: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID,
            amount: "50000",
            currency: "INR",
            name: "My Company",
            description: "Test Transaction",
            handler: function (response) {
                alert("Payment successful! Payment ID: " + response.razorpay_payment_id);
            },
            prefill: {
                name: "John Doe",
                email: "[email protected]",
                contact: "9999999999"
            },
            theme: {
                color: "#3399cc"
            }
        };
        const rzp1 = new Razorpay(options);
        rzp1.open();
    };

    return (
        <button class="btn btn-primary" onClick={handlePayment}>Pay with Razorpay</button>
    );
}

When users click the button, Razorpay’s payment gateway opens, allowing them to complete the transaction. Customize the payment options and fields as needed for your application.

Conclusion

Integrating payment gateways with Next.js is a straightforward process that opens up a world of e-commerce and subscription-based possibilities. Whether you choose PayPal, Stripe, or Razorpay, each platform offers unique advantages, from Stripe’s robust API for complex payment flows to PayPal’s brand recognition and Razorpay’s localized payment options. By incorporating any of these payment gateways into your Next.js application, you can provide a seamless, secure checkout experience that builds user trust and enhances overall engagement.

With a strong understanding of these integration techniques, you’re well-equipped to handle transactions in your Next.js projects. Payment integration may seem challenging initially, but by leveraging the powerful tools provided by these gateways, you can implement a reliable and user-friendly payment system that meets your business needs. Whether you’re just starting out or scaling up, PayPal, Stripe, and Razorpay can adapt to the demands of your growing application.