TypeScript React アプリに Juspay を統合するための簡単なガイド

このガイドでは、支払いプロセスのフロントエンド部分とバックエンド部分の両方で TypeScript を使用して Juspay を React アプリに統合する方法について段階的に説明します。

前提条件

Juspay の次の資格情報があることを確認してください:

• 販売者 ID
• クライアント ID
• API キー

統合フロー

Juspay を使用した決済統合の流れは次のとおりです:

TypeScript 統合の手順

1. 支払いセッションの作成 (TypeScript のサーバー側)

TypeScript で Node.js/Express を使用し、Juspay の API を使用して支払いセッションを作成します。

TypeScript PaymentSession インターフェイスを作成して、応答を入力します。

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

セッションを作成するための TypeScript コード:

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;

このコード内:

• PaymentSession インターフェイスは、セッション応答の型安全性を保証します。
• TypeScript の型アサーションにより、正確なエラー処理 (エラーはエラーとして) が保証されます。

2. React クライアントからの支払いの開始 (TypeScript)

React クライアントで、useEffect フックと API リクエストの Axios を使用して支払いプロセスを開始するコンポーネントを作成します。

セッション応答のインターフェイスを定義します。

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

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;

このコード内:

• PaymentSession は、バックエンドからの応答の予想される構造を保証します。
• initiatePayment 関数は、支払いを開始するリクエストを送信し、応答を処理します。

3. 戻りURLの処理と支払い状況の確認

支払い後にユーザーがリダイレクトされた場合、支払いステータスを確認して表示する必要があります。

支払いステータス用の TypeScript インターフェイス:

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

支払いステータスを処理するための React コンポーネント:

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;

このコンポーネント内:

• 支払いステータスを確認するには、order_id をバックエンドに送信します。
• バックエンドは、Juspay の API からの応答に基づいてステータスを返す必要があります。

4. TypeScript による Webhook の処理 (バックエンド)

Juspay は Webhook を送信して、支払いステータスの変更を通知します。以下は、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. Juspay に 200 OK で応答する (バックエンド)

Webhook 通知の受信を確認するには、サーバーは 200 OK ステータスを返す必要があります。

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

---

結論

これらの手順に従い、クライアント側コードとサーバー側コードの両方で TypeScript を活用することで、Juspay を React アプリに効率的かつ安全に統合できます。 TypeScript はタイプ セーフの利点を追加し、エラーを減らし、統合をスムーズにします。

• クライアント側: React コンポーネントを使用して支払いを開始し、ステータスを確認します。
• サーバー側: Node.js/Express バックエンドは、支払いセッション、ステータス、Webhook 通知を処理します。

このガイドでは、TypeScript を使用して Juspay を最新の Web スタックに統合する方法の完全な概要を説明します。

以上がTypeScript React アプリに Juspay を統合するための簡単なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。