108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import type { Stripe } from "@stripe/stripe-js";
|
|
import {
|
|
EmbeddedCheckoutProvider,
|
|
EmbeddedCheckout,
|
|
} from "@stripe/react-stripe-js";
|
|
|
|
//! Unsure whether this component is used/needed in the project
|
|
// export const Return: React.FC = () => {
|
|
// const [status, setStatus] = useState<string | null>(null);
|
|
// const [customerEmail, setCustomerEmail] = useState("");
|
|
|
|
// useEffect(() => {
|
|
// const queryString = window.location.search;
|
|
// const urlParams = new URLSearchParams(queryString);
|
|
// const sessionId = urlParams.get("session_id");
|
|
|
|
// if (sessionId) {
|
|
// console.log("1");
|
|
// fetch(`/api/session-status?session_id=${sessionId}`)
|
|
// .then((res) => res.json())
|
|
// .then((data) => {
|
|
// console.log("Response Data:", data);
|
|
// setStatus(data.status);
|
|
// setCustomerEmail(data.customer_email);
|
|
// });
|
|
// }
|
|
// }, []);
|
|
|
|
// if (status === "open") {
|
|
// return <Navigate to="/checkout" />;
|
|
// }
|
|
|
|
// if (status === "complete") {
|
|
// return (
|
|
// <section id="success">
|
|
// <p>
|
|
// We appreciate your business! A confirmation email will be sent to{" "}
|
|
// {customerEmail}. If you have any questions, please email{" "}
|
|
// <a href="mailto:orders@example.com">orders@example.com</a>.
|
|
// </p>
|
|
// </section>
|
|
// );
|
|
// }
|
|
|
|
// return null;
|
|
// };
|
|
|
|
interface CheckoutFormProps {
|
|
streamerID: number;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const CheckoutForm: React.FC<CheckoutFormProps> = ({ streamerID, onClose }) => {
|
|
const [stripePromise, setStripePromise] =
|
|
useState<Promise<Stripe | null> | null>(null);
|
|
|
|
useEffect(() => {
|
|
const initializeStripe = async () => {
|
|
const { loadStripe } = await import("@stripe/stripe-js");
|
|
setStripePromise(loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY));
|
|
};
|
|
initializeStripe();
|
|
}, []);
|
|
|
|
const fetchClientSecret = () => {
|
|
return fetch(`/api/create-checkout-session?streamer_id=${streamerID}`, {
|
|
method: "POST",
|
|
})
|
|
.then((res) => res.json())
|
|
.then((data) => data.clientSecret);
|
|
};
|
|
|
|
const options = { fetchClientSecret };
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
id="blurring-layer"
|
|
className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm"
|
|
></div>
|
|
<div
|
|
id="modal-container"
|
|
className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 h-[70vh] m-auto w-fit py-[50px] px-[100px] rounded-[2rem]"
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-[1rem] right-[3rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
|
|
>
|
|
✕
|
|
</button>
|
|
<div
|
|
className="bg-white p-6 w-full max-w-2xl relative h-full rounded-[2rem]"
|
|
style={{ width: "clamp(300px, 60vw, 800px)" }}
|
|
>
|
|
<div id="checkout" className="h-full overflow-auto min-w-[30vw]">
|
|
<EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
|
|
<EmbeddedCheckout />
|
|
</EmbeddedCheckoutProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CheckoutForm;
|