Make a row in DB everytime the successfull data is returned

'use client'
export default function Pay() {
    async function handlePayment() {
       user = //get user information
      await fetch('/api/makePayment', {method: "POST", body: JSON.stringify(user)})
    }
    return (
      <button onClick={() => {handlePayment()}}>Pay here</button
    )
  }

const makePayment = async () => {
    const orderData = await orderAPI({ totalAmount });
    const orderId = orderData.id;
    console.log('Amount Due: ', orderData.amount_due);
    if (!orderId) return;
    await supabase.from("orders").insert([
      {
        user_id: user,
        amount: orderData.amount,
        razor_orderId: orderId,
      },
    ]);

    const loadRazorpayScript = async () => {
      const script = document.createElement("script");
      script.src = "https://checkout.razorpay.com/v1/checkout.js";
      script.async = true;
      script.onload = initializeRazorpay;
      document.body.appendChild(script);

      return () => {
        document.body.removeChild(script);
      };
    };

    const initializeRazorpay = async () => {

      const rzp1 = new window.Razorpay({
        key: "rzp_test_G89RkM1qXUS2OF",
        amount: orderData.amount * 100,
        currency: "INR",
        order_id: orderId,
        prefill: {
          name: "",
          email: "",
          contact: "",
        },
        callback_url: "http://localhost:3000/orders",
      });
      rzp1.open();
    };

    loadRazorpayScript();
  };

import logo from './logo.svg';
import './App.css';

function App() {

async function displayRazorpay () {

    const res = await loadScript('https://checkout.razorpay.com/v1/checkout.js')

      if (!res){
        alert('Razropay failed to load!!')
        return 
      }

      const data = await fetch('http://localhost:1769/razorpay', {method: 'POST'}).then((t) => 
        t.json()
      ) 

      console.log(data)

    const options = {
      "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
      "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
      "currency": "INR",
      "name": "Acme Corp",
      "description": "Test Transaction",
      "image": "https://example.com/your_logo",
      "order_id": "order_IluGWxBm9U8zJ8", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
      "callback_url":"http://localhost:1769/verify",
      "notes": {
          "address": "Razorpay Corporate Office"
      },
      "theme": {
          "color": "#3399cc"
      }
  };
  const paymentObject = new window.Razorpay(options); 
  paymentObject.open();
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />   
        <button
        onClick={displayRazorpay}
        >
          Pay now 
        </button>
      </header>
    </div>
  );
}

export default App;