Post request on stripe success

Question

i'm trying making a donation app and i need the donors to be shown on stripe success. I'm following this docs https://vercel.com/guides/getting-started-with-nextjs-typescript-stripe and here i write the file that maybe have to be manipulated to do a post request, believing in your help.

/actions/stripe.ts

'use server'

import type { Stripe } from 'stripe'

import { redirect } from 'next/navigation'
import { headers } from 'next/headers'

import { CURRENCY } from '../config'
import { formatAmountForStripe } from '../utils/stripe-helpers'
import { stripe } from '../lib/stripe'

export async function createCheckoutSession(data: FormData): Promise<void> {
  const checkoutSession: Stripe.Checkout.Session =
    await stripe.checkout.sessions.create({
      mode: 'payment',
      submit_type: 'donate',
      line_items: [
        {
          quantity: 1,
          price_data: {
            currency: CURRENCY,
            product_data: {
              name: 'Custom amount donation',
            },
            unit_amount: formatAmountForStripe(
              Number(data.get('customDonation') as string),
              CURRENCY
            ),
          },
        },
      ],
      success_url: `${headers().get(
        'origin'
      )}/donate-with-checkout/result?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${headers().get('origin')}/donate-with-checkout`,
    })

  redirect(checkoutSession.url as string)
}

export async function createPaymentIntent(
  data: FormData
): Promise<{ client_secret: string }> {
  const paymentIntent: Stripe.PaymentIntent =
    await stripe.paymentIntents.create({
      amount: formatAmountForStripe(
        Number(data.get('customDonation') as string),
        CURRENCY
      ),
      automatic_payment_methods: { enabled: true },
      currency: CURRENCY,
    })

  return { client_secret: paymentIntent.client_secret as string }
}

EDIT: I fixed my frontend component startind from donate/page.tsx this way:

import type { Metadata } from "next";
import sfondo from "../../../public/assets/sfondo.jpg";

import CheckoutForm from "../../../components/CheckoutForm";

export const metadata: Metadata = {
  title: "Donate us - Orphanage Center",
};

export default function DonatePage(): JSX.Element {
  return (
    <div
      className="h-screen bg-cover"
      style={{ backgroundImage: `url(${sfondo.src})` }}
    >
      <div className="bg-yellow-100 p-14 mb-28">
        <p className="text-2xl text-center">Donate to our center </p>
      </div>
      <CheckoutForm />
    </div>
  );
}

and in my components/CheckoutForm.tsx i did so:

"use client";

import React, { useState } from "react";

import CustomDonationInput from "./CustomDonationInput";

import { formatAmountForDisplay } from "../utils/stripe-helpers";
import * as config from "../config";
import { createCheckoutSession } from "../actions/stripe";

export default function CheckoutForm(): JSX.Element {
  const [loading] = useState<boolean>(false);
  const [input, setInput] = useState<{ customDonation: number }>({
    customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
  });
 
  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (
    e
  ): void =>
    setInput({
      ...input,
      [e.currentTarget.name]: e.currentTarget.value,
    });
async function submitForm(postPrompt: PostPrompt) {
      return await fetch("/api/donations", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(postPrompt),
      });
    }
 
  return (
    <form action={createCheckoutSession}>
      <CustomDonationInput
        className="checkout-style"
        name="customDonation"
        min={config.MIN_AMOUNT}
        max={config.MAX_AMOUNT}
        step={config.AMOUNT_STEP}
        currency={config.CURRENCY}
        onChange={handleInputChange}
        value={input.customDonation}
      />

      <button
        className="checkout-style-background"
        type="submit"
        disabled={loading}
        onClick={submitForm}
      >
        Donate {formatAmountForDisplay(input.customDonation, config.CURRENCY)}
      </button>
    </form>
  );
}

but the button give me the error on onClick function: Type '(postPrompt: PostPrompt) => Promise' is not assignable to type 'MouseEventHandler'. Types of parameters 'postPrompt' and 'event' are incompatible. Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is missing the following properties from type 'PostPrompt': donator, donationts(2322)

Can you give me a hint on how to solve it?