### Install Moneroo React SDK via npm

Source: https://github.com/nemesisx1/moneroo-react-sdk/blob/main/README.md

Command to install the Moneroo React SDK package using the npm package manager.

```Bash
npm install moneroo-react-sdk
```

--------------------------------

### Initiate Moneroo Payment in React

Source: https://github.com/nemesisx1/moneroo-react-sdk/blob/main/README.md

Example React component demonstrating how to use the `initiatePayment` function from the Moneroo React SDK to start a payment process. It defines a button that, when clicked, calls `initiatePayment` with payment details and a secret key.

```jsx
import React from 'react';
import { initiatePayment, checkTransactionStatus } from 'moneroo-react-sdk';

function PaymentButton() {
  const handlePayment = async () => {
    try {
      await initiatePayment(
        {
          amount: 1000, // Amount in smallest currency unit
          currency: 'XOF', // Currency code
          description: 'Premium subscription',
          email: 'customer@example.com',
          firstName: 'John',
          lastName: 'Doe',
          returnUrl: 'https://your-app.com/payment-callback',
          methods: ['mtn_bj', 'moov_bj'], // Optional payment methods
        },
        'YOUR_SECRET_KEY' // Your Moneroo secret key
      );
      // The SDK will automatically redirect to the Moneroo checkout page
    } catch (error) {
      console.error('Payment initiation failed:', error);
    }
  };

  return (
    <button onClick={handlePayment}>
      Pay Now
    </button>
  );
}

export default PaymentButton;
```

--------------------------------

### Install Moneroo React SDK via pnpm

Source: https://github.com/nemesisx1/moneroo-react-sdk/blob/main/README.md

Command to install the Moneroo React SDK package using the pnpm package manager.

```Bash
pnpm add moneroo-react-sdk
```

--------------------------------

### Install Moneroo React SDK via yarn

Source: https://github.com/nemesisx1/moneroo-react-sdk/blob/main/README.md

Command to install the Moneroo React SDK package using the yarn package manager.

```Bash
yarn add moneroo-react-sdk
```

--------------------------------

### Check Moneroo Transaction Status in React

Source: https://github.com/nemesisx1/moneroo-react-sdk/blob/main/README.md

Example React component demonstrating how to use the `checkTransactionStatus` function from the Moneroo React SDK to retrieve and display the status of a specific transaction based on its ID. It uses `useEffect` to fetch the status when the component mounts or the transaction ID changes.

```jsx
import React, { useState, useEffect } from 'react';
import { checkTransactionStatus } from 'moneroo-react-sdk';

function PaymentStatus({ transactionId }) {
  const [status, setStatus] = useState('pending');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const checkStatus = async () => {
      try {
        const result = await checkTransactionStatus(
          transactionId,
          'YOUR_SECRET_KEY' // Your Moneroo secret key
        );
        setStatus(result.status);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    checkStatus();
  }, [transactionId]);

  if (loading) return <p>Checking payment status...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>Payment Status</h2>
      <p>Status: {status}</p>
      {status === 'success' && <p>Thank you for your payment!</p>}
      {status === 'failed' && <p>Payment failed. Please try again.</p>}
      {status === 'pending' && <p>Payment is being processed...</p>}
    </div>
  );
}

export default PaymentStatus;
```

--------------------------------

### Handling Moneroo Payment Errors (JSX)

Source: https://github.com/nemesisx1/moneroo-react-sdk/blob/main/README.md

Demonstrates how to catch and handle errors that occur during the `initiatePayment` call using a try-catch block. It shows logging the error and alerting the user.

```JSX
try {
  await initiatePayment(
    {
      // payment parameters
    },
    'YOUR_SECRET_KEY'
  );
} catch (error) {
  // Log the error details
  console.error('Moneroo Error:', error.message);
  
  // Show appropriate message to the user
  alert('Payment failed: ' + error.message);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.