Untitled

import React, { useState } from 'react';

const FlutterwavePaymentForm = () => {
  const [paymentStatus, setPaymentStatus] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Fetch API or Axios can be used here to submit the form data
    try {
      const response = await fetch('https://checkout.flutterwave.com/v3/hosted/pay', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          public_key: 'FLWPUBK_TEST-SANDBOXDEMOKEY-X',
          tx_ref: 'bitethtx-019203',
          amount: 3400,
          currency: 'NGN',
          payment_options: 'card, ussd',
          redirect_url: 'https://demoredirect.localhost.me/',
          meta: {
            token: 54,
          },
          customer: {
            name: 'Jesse Pinkman',
            email: 'jessepinkman@walterwhite.org',
          },
        }),
      });

      const result = await response.json();

      // Handle the payment response, you might want to redirect to a success page or show a confirmation message
      console.log(result);
      setPaymentStatus(result.status);
    } catch (error) {
      console.error('Error submitting payment:', error);
      setPaymentStatus('error');
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="hidden" name="public_key" value="FLWPUBK_TEST-SANDBOXDEMOKEY-X" />
        <input type="hidden" name="tx_ref" value="bitethtx-019203" />
        <input type="hidden" name="amount" value="3400" />
        <input type="hidden" name="currency" value="NGN" />
        <input type="hidden" name="payment_options" value="card, ussd" />
        <input type="hidden" name="redirect_url" value="https://demoredirect.localhost.me/" />
        <input type="hidden" name="meta[token]" value="54" />
        <input type="hidden" name="customer[name]" value="Jesse Pinkman" />
        <input type="hidden" name="customer[email]" value="jessepinkman@walterwhite.org" />

        <button type="submit">Pay Now</button>
      </form>

      {paymentStatus && (
        <div>
          {paymentStatus === 'success' ? (
            <p>Payment successful! Redirect or show success message here.</p>
          ) : (
            <p>Payment failed. Please try again.</p>
          )}
        </div>
      )}
    </div>
  );
};

export default FlutterwavePaymentForm;