Cách sử dụng useMomo hợp lý trong React?

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.

1. Cài đặt và cấu hình

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 axios

2. Tạo hook useMomo

Bạ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;

3. Sử dụng useMomo trong Component

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;

4. Xử lý API

Để 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;

5. Kết luận

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.