67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { SAAS_BACKEND_URL, STRIPE_PUBLISHABLE_KEY } from "../../config";
|
|
import { addEvent } from "../../lib/analytics";
|
|
import { Stripe, loadStripe } from "@stripe/stripe-js";
|
|
import { useAuthenticatedFetch } from "../hosted/useAuthenticatedFetch";
|
|
|
|
interface CreateCheckoutSessionResponse {
|
|
sessionId: string;
|
|
}
|
|
|
|
export default function useStripeCheckout() {
|
|
const authenticatedFetch = useAuthenticatedFetch();
|
|
|
|
const [stripe, setStripe] = useState<Stripe | null>(null);
|
|
const [isLoadingCheckout, setIsLoadingCheckout] = useState(false);
|
|
|
|
const checkout = async (priceLookupKey: string) => {
|
|
const rewardfulReferralId = "xxx"; // TODO: Use later with Rewardful
|
|
|
|
if (!stripe) {
|
|
addEvent("StripeNotLoaded");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsLoadingCheckout(true);
|
|
|
|
// Create a Checkout Session
|
|
const res: CreateCheckoutSessionResponse = await authenticatedFetch(
|
|
`${SAAS_BACKEND_URL}/payments/create_checkout_session` +
|
|
`?price_lookup_key=${priceLookupKey}` +
|
|
`&rewardful_referral_id=${rewardfulReferralId}`,
|
|
"POST"
|
|
);
|
|
|
|
// Redirect to Stripe Checkout
|
|
const { error } = await stripe.redirectToCheckout({
|
|
sessionId: res.sessionId,
|
|
});
|
|
if (error) {
|
|
throw new Error(error.message);
|
|
}
|
|
} catch (e) {
|
|
toast.error("Error directing you to checkout. Please contact support.");
|
|
addEvent("StripeCheckoutError");
|
|
} finally {
|
|
setIsLoadingCheckout(false);
|
|
}
|
|
};
|
|
|
|
// Load Stripe when the component mounts
|
|
useEffect(() => {
|
|
async function load() {
|
|
try {
|
|
setStripe(await loadStripe(STRIPE_PUBLISHABLE_KEY));
|
|
} catch (e) {
|
|
console.error(e);
|
|
addEvent("StripeFailedToLoad");
|
|
}
|
|
}
|
|
load();
|
|
}, []);
|
|
|
|
return { checkout, isLoadingCheckout };
|
|
}
|