Guide simple pour intégrer Juspay dans votre application TypeScript React

Ce guide fournit des instructions étape par étape sur la façon d'intégrer Juspay dans une application React à l'aide de TypeScript pour les parties front-end et back-end du processus de paiement.

Conditions préalables

Assurez-vous d'avoir les informations d'identification suivantes pour Juspay :

• Identifiant du marchand
• ID client
• Clé API

Flux d'intégration

Voici le flux d'intégration du paiement via Juspay :

Étapes pour l'intégration de TypeScript

1. Créer une session de paiement (côté serveur dans TypeScript)

Utilisez Node.js/Express avec TypeScript pour créer la session de paiement à l'aide de l'API de Juspay.

Créez une interface TypeScript PaymentSession pour saisir votre réponse :

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

Code TypeScript pour créer une 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;

Dans ce code :

• L'interface PaymentSession garantit la sécurité du type pour la réponse de session.
• Les assertions de type de TypeScript garantissent une gestion précise des erreurs (erreur en tant qu'erreur).

2. Initier le paiement à partir de React Client (TypeScript)

Dans le client React, créez un composant qui lance le processus de paiement à l'aide d'un hook useEffect et d'Axios pour les requêtes API.

Définissez une interface pour la réponse de session :

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

Composant en 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;

Dans ce code :

• PaymentSession garantit la structure attendue de la réponse du backend.
• La fonction initiatePayment envoie la demande d'initiation du paiement et gère la réponse.

3. Gestion de l'URL de retour et vérification de l'état du paiement

Lorsque l'utilisateur est redirigé après le paiement, vous devez vérifier l'état du paiement et l'afficher.

Interface TypeScript pour le statut du paiement :

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

Composant React pour gérer l'état du paiement :

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;

Dans ce composant :

• Vous envoyez le order_id à votre backend pour vérifier l'état du paiement.
• Le backend doit renvoyer le statut en fonction de la réponse de l'API de Juspay.

4. Gestion des Webhooks avec TypeScript (Backend)

Juspay enverra un webhook pour vous informer des changements de statut de paiement. Vous trouverez ci-dessous comment gérer cela dans un environnement TypeScript.

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. Répondez à Juspay avec un 200 OK (Backend)

Pour confirmer la réception de la notification du webhook, votre serveur doit renvoyer un statut 200 OK :

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

---

Conclusion

En suivant ces étapes et en exploitant TypeScript pour le code côté client et côté serveur, vous pouvez intégrer Juspay dans votre application React de manière efficace et sûre. TypeScript ajoute l'avantage de la sécurité des types, réduisant les erreurs et garantissant la fluidité de votre intégration.

• Côté client : vous initiez le paiement à l'aide des composants React et vérifiez le statut.
• Côté serveur : votre backend Node.js/Express gère la session de paiement, le statut et les notifications de webhook.

Ce guide fournit un aperçu complet de la façon d'intégrer Juspay dans une pile Web moderne à l'aide de TypeScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!