useMomo là một hook tùy chỉnh không chính thức mà bạn có thể tự định nghĩa hoặc tìm thấy trong các thư viện để giúp quản lý trạng thái hoặc hiệu ứng liên quan đến thanh toán hoặc tích hợp Momo vào ứng dụng React. Dưới đây là một hướng dẫn chi tiết về cách sử dụng hook này và cách tích hợp Momo vào ứng dụng React của bạn.
Trước hết, bạn cần cài đặt các gói cần thiết cho Momo và React:
npm install axiosBạn có thể tạo một hook tùy chỉnh để quản lý trạng thái thanh toán với Momo. Dưới đây là một ví dụ cơ bản về useMomo:
import { useState } from 'react';
import axios from 'axios';
const useMomo = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [transactionData, setTransactionData] = useState(null);
const initiatePayment = async (paymentDetails) => {
setLoading(true);
setError(null);
try {
const response = await axios.post('/api/momo/initiate-payment', paymentDetails);
setTransactionData(response.data);
// Redirect hoặc xử lý thêm nếu cần
} catch (err) {
setError(err.response ? err.response.data : err.message);
} finally {
setLoading(false);
}
};
return { loading, error, transactionData, initiatePayment };
};
export default useMomo;Bây giờ bạn có thể sử dụng hook useMomo trong một component để thực hiện thanh toán:
import React from 'react';
import useMomo from './useMomo';
const PaymentComponent = () => {
const { loading, error, transactionData, initiatePayment } = useMomo();
const handlePayment = () => {
const paymentDetails = {
amount: 100000, // Số tiền cần thanh toán
orderId: 'ORDER123', // ID đơn hàng
// Các thông tin khác cần thiết
};
initiatePayment(paymentDetails);
};
return (
<div>
<h2>Thanh toán Momo</h2>
<button onClick={handlePayment} disabled={loading}>
{loading ? 'Đang xử lý...' : 'Thanh toán'}
</button>
{error && <p style={{ color: 'red' }}>{error}</p>}
{transactionData && <p>Giao dịch thành công: {transactionData.id}</p>}
</div>
);
};
export default PaymentComponent;Để sử dụng Momo, bạn cần một API backend để xử lý việc gửi yêu cầu thanh toán tới Momo. Dưới đây là một ví dụ đơn giản về cách bạn có thể tạo một route API trong Node.js:
const express = require('express');
const axios = require('axios');
const router = express.Router();
router.post('/initiate-payment', async (req, res) => {
const { amount, orderId } = req.body;
// Tạo yêu cầu tới Momo
const momoRequest = {
// Cấu hình yêu cầu của bạn tới Momo
// ...
};
try {
const response = await axios.post('https://sandbox.momo.vn/v1/payment', momoRequest);
res.status(200).json(response.data);
} catch (error) {
res.status(500).json({ message: 'Giao dịch không thành công', error: error.message });
}
});
module.exports = router;Sử dụng useMomo trong React giúp bạn dễ dàng quản lý trạng thái thanh toán với Momo. Đảm bảo bạn có một API backend để xử lý các yêu cầu và trả về thông tin cần thiết cho frontend. Việc quản lý trạng thái, xử lý lỗi và phản hồi từ server cũng rất quan trọng trong quá trình này.
