將 Juspay 整合到 TypeScript React 應用程式中的簡單指南

本指南提供了有關如何使用 TypeScript 將 Juspay 整合到 React 應用程式中的逐步說明，用於支付流程的前端和後端部分。

先決條件

確保您擁有 Juspay 的以下憑證：

• 商家ID
• 客戶端 ID
• API 金鑰

整合流程

以下是使用 Juspay 進行支付整合的流程：

TypeScript 整合的步驟

1. 建立支付會話（TypeScript 中的伺服器端）

使用 Node.js/Express 和 TypeScript 透過 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 掛鉤和 Axios 進行 API 請求來啟動付款流程。

定義會話回應的介面：

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 堆疊中。

以上是將 Juspay 整合到 TypeScript React 應用程式中的簡單指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！