本指南提供了有关如何使用 TypeScript 将 Juspay 集成到 React 应用程序中的分步说明，用于支付流程的前端和后端部分。
确保您拥有 Juspay 的以下凭据：
以下是使用 Juspay 进行支付集成的流程：
使用 Node.js/Express 和 TypeScript 通过 Juspay 的 API 创建支付会话。
interface PaymentSession {
payment_link: string;
order_id: string;
status: string;
}
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;
在此代码中：
在 React 客户端中，创建一个组件，使用 useEffect 挂钩和 Axios 进行 API 请求来启动支付流程。
interface PaymentSession {
payment_link: string;
order_id: string;
}
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;
在此代码中：
当用户付款后重定向回来时，需要检查付款状态并显示。
interface PaymentStatus {
status: string;
order_id: string;
amount: number;
}
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;
在此组件中：
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;
要确认收到 Webhook 通知，您的服务器应返回 200 OK 状态：
app.post('/api/webhook', (req: Request, res: Response) => {
// Acknowledge the webhook
res.status(200).send('OK');
});
通过遵循这些步骤并在客户端和服务器端代码中利用 TypeScript，您可以高效、安全地将 Juspay 集成到您的 React 应用程序中。 TypeScript 增加了类型安全的好处，减少了错误并确保您的集成顺利进行。
本指南全面概述了如何使用 TypeScript 将 Juspay 集成到现代 Web 堆栈中。
以上是将 Juspay 集成到 TypeScript React 应用程序中的简单指南的详细内容。更多信息请关注PHP中文网其他相关文章！
