将 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中文网其他相关文章！