Einfache Anleitung zur Integration von Juspay in Ihre TypeScript React-App

Diese Anleitung enthält Schritt-für-Schritt-Anleitungen zur Integration von Juspay in eine React-App mithilfe von TypeScript sowohl für Front-End- als auch für Back-End-Teile des Zahlungsprozesses.

Voraussetzungen

Stellen Sie sicher, dass Sie über die folgenden Anmeldeinformationen für Juspay verfügen:

• Händler-ID
• Kunden-ID
• API-Schlüssel

Integrationsfluss

Hier ist der Ablauf der Zahlungsintegration mit Juspay:

Schritte zur TypeScript-Integration

1. Zahlungssitzung erstellen (serverseitig in TypeScript)

Verwenden Sie Node.js/Express mit TypeScript, um die Zahlungssitzung mithilfe der Juspay-API zu erstellen.

Erstellen Sie eine TypeScript PaymentSession-Schnittstelle, um Ihre Antwort einzugeben:

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

TypeScript-Code zum Erstellen einer Sitzung:

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 diesem Code:

• Die PaymentSession-Schnittstelle gewährleistet Typsicherheit für die Sitzungsantwort.
• TypeScripts Typzusicherungen gewährleisten eine genaue Fehlerbehandlung (Fehler als Fehler).

2. Zahlung vom React-Client aus veranlassen (TypeScript)

Erstellen Sie im React-Client eine Komponente, die den Zahlungsprozess mithilfe eines useEffect-Hooks und Axios für API-Anfragen initiiert.

Definieren Sie eine Schnittstelle für die Sitzungsantwort:

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

Komponente 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 diesem Code:

• PaymentSession stellt die erwartete Struktur der Antwort vom Backend sicher.
• Die Funktion „initiatePayment“ sendet die Anfrage zum Einleiten der Zahlung und verarbeitet die Antwort.

3. Bearbeitung der Rückgabe-URL und Überprüfung des Zahlungsstatus

Wenn der Benutzer nach der Zahlung zurückgeleitet wird, müssen Sie den Zahlungsstatus überprüfen und anzeigen.

TypeScript-Schnittstelle für Zahlungsstatus:

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

Reagieren Sie auf die Komponente zur Bearbeitung des Zahlungsstatus:

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 dieser Komponente:

• Sie senden die Bestell-ID an Ihr Backend, um den Zahlungsstatus zu überprüfen.
• Das Backend sollte den Status basierend auf der Antwort von Juspays API zurückgeben.

4. Umgang mit Webhooks mit TypeScript (Backend)

Juspay sendet einen Webhook, um Sie über Änderungen des Zahlungsstatus zu informieren. Im Folgenden erfahren Sie, wie Sie damit in einer TypeScript-Umgebung umgehen.

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. Antworten Sie auf Juspay mit einem 200 OK (Backend)

Um den Empfang der Webhook-Benachrichtigung zu bestätigen, sollte Ihr Server den Status „200 OK“ zurückgeben:

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

---

Abschluss

Indem Sie diese Schritte befolgen und TypeScript sowohl für client- als auch serverseitigen Code nutzen, können Sie Juspay effizient und sicher in Ihre React-App integrieren. TypeScript bietet den Vorteil der Typsicherheit, reduziert Fehler und sorgt für eine reibungslose Integration.

• Client-Seite: Sie initiieren die Zahlung mithilfe von React-Komponenten und überprüfen den Status.
• Serverseitig: Ihr Node.js/Express-Backend verwaltet die Zahlungssitzung, den Status und die Webhook-Benachrichtigungen.

Diese Anleitung bietet einen vollständigen Überblick über die Integration von Juspay in einen modernen Web-Stack mithilfe von TypeScript.

Das obige ist der detaillierte Inhalt vonEinfache Anleitung zur Integration von Juspay in Ihre TypeScript React-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!