Simple Guide to Integrate Juspay in Your TypeScript React App

This guide provides step-by-step instructions on how to integrate Juspay into a React app using TypeScript for both front-end and back-end parts of the payment process.

Prerequisites

Ensure you have the following credentials for Juspay:

• Merchant ID
• Client ID
• API Key

Integration Flow

Here is the flow of payment integration using Juspay:

Steps for TypeScript Integration

1. Create Payment Session (Server-Side in TypeScript)

Use Node.js/Express with TypeScript to create the payment session using Juspay's API.

Create a TypeScript PaymentSession interface to type your response:

interface PaymentSession {
  payment_link: string;
  order_id: string;
  status: string;
}

TypeScript code for creating a session:

import axios from 'axios';
import base64 from 'base-64';
import { Request, Response } from 'express';

const createSession = async (req: Request, res: Response) => {
  const apiKey = 'your_api_key';
  const authHeader = base64.encode(`${apiKey}:`);

  try {
    const response = await axios.post<PaymentSession>(
      'https://api.juspay.in/session',
      {
        customer_id: 'customer_id_here',
        amount: 10000, // Amount in paise (100 INR)
        currency: 'INR',
      },
      {
        headers: {
          Authorization: `Basic ${authHeader}`,
        },
      }
    );
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: (error as Error).message });
  }
};

export default createSession;

In this code:

• PaymentSession interface ensures type safety for the session response.
• TypeScript's type assertions ensure accurate error handling (error as Error).

2. Initiate Payment from React Client (TypeScript)

In the React client, create a component that initiates the payment process using a useEffect hook and Axios for API requests.

Define an interface for the session response:

interface PaymentSession {
  payment_link: string;
  order_id: string;
}

Component in TypeScript:

import React, { useState } from 'react';
import axios from 'axios';

const PaymentPage: React.FC = () => {
  const [paymentUrl, setPaymentUrl] = useState<string | null>(null);

  const initiatePayment = async () => {
    try {
      const response = await axios.post<PaymentSession>('/api/create-session', {
        amount: 10000, // Amount in paise (100 INR)
        currency: 'INR',
        customer_id: 'your-customer-id',
      });
      setPaymentUrl(response.data.payment_link);
    } catch (error) {
      console.error('Error initiating payment:', error);
    }
  };

  return (
    <div>
      <h1>Initiate Payment</h1>
      <button onClick={initiatePayment}>Pay Now</button>
      {paymentUrl && (
        <div>
          <a href={paymentUrl} target="_blank" rel="noopener noreferrer">
            Complete Payment
          </a>
        </div>
      )}
    </div>
  );
};

export default PaymentPage;

In this code:

• PaymentSession ensures the expected structure of the response from the backend.
• The initiatePayment function sends the request to initiate the payment and handles the response.

3. Handling Return URL and Checking Payment Status

When the user is redirected back after the payment, you need to check the payment status and display it.

TypeScript Interface for Payment Status:

interface PaymentStatus {
  status: string;
  order_id: string;
  amount: number;
}

React Component to Handle Payment Status:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const PaymentStatusPage: React.FC = () => {
  const [paymentStatus, setPaymentStatus] = useState<string | null>(null);

  useEffect(() => {
    const checkPaymentStatus = async () => {
      try {
        const response = await axios.get<PaymentStatus>('/api/check-status', {
          params: { order_id: 'your-order-id' },
        });
        setPaymentStatus(response.data.status);
      } catch (error) {
        console.error('Error fetching payment status:', error);
      }
    };

    checkPaymentStatus();
  }, []);

  return (
    <div>
      <h1>Payment Status</h1>
      {paymentStatus ? (
        <p>Payment Status: {paymentStatus}</p>
      ) : (
        <p>Checking payment status...</p>
      )}
    </div>
  );
};

export default PaymentStatusPage;

In this component:

• You send the order_id to your backend to check the payment status.
• The backend should return the status based on the response from Juspay's API.

4. Handling Webhooks with TypeScript (Backend)

Juspay will send a webhook to notify you of payment status changes. Below is how to handle this in a TypeScript environment.

import { Request, Response } from 'express';

interface JuspayWebhook {
  order_id: string;
  status: string;
  amount: number;
  currency: string;
}

const handleWebhook = (req: Request, res: Response) => {
  const paymentUpdate: JuspayWebhook = req.body;

  console.log('Payment Update Received:', paymentUpdate);

  // Process the payment update (e.g., update your database)

  // Respond to Juspay to confirm receipt
  res.status(200).send('Webhook received');
};

export default handleWebhook;

5. Respond to Juspay with a 200 OK (Backend)

To confirm receipt of the webhook notification, your server should return a 200 OK status:

app.post('/api/webhook', (req: Request, res: Response) => {
  // Acknowledge the webhook
  res.status(200).send('OK');
});

---

Conclusion

By following these steps and leveraging TypeScript for both client and server-side code, you can integrate Juspay into your React app efficiently and safely. TypeScript adds the benefit of type safety, reducing errors and ensuring your integration is smooth.

• Client Side: You initiate payment using React components and check the status.
• Server Side: Your Node.js/Express backend handles the payment session, status, and webhook notifications.

This guide provides a complete overview of how to integrate Juspay into a modern web stack using TypeScript.