feat: implement finalize checkout endpoint and update purchase success handling

- Added a new endpoint `/stripe/finalize-checkout` to synchronously fulfill a checkout session, addressing the webhook-vs-redirect race condition.
- Updated the `PurchaseSuccessPage` component to handle various states of the checkout process, including loading, completed, pending, and failed states.
- Introduced a new response model `FinalizeCheckoutResponse` to provide immediate feedback on the purchase status.
- Enhanced the Stripe API service to include the new finalize checkout functionality.

surfsense_web/lib/apis/stripe-api.service.ts

@@ -5,6 +5,8 @@ import {
 	type CreateTokenCheckoutSessionResponse,
 	createCheckoutSessionResponse,
 	createTokenCheckoutSessionResponse,
+	type FinalizeCheckoutResponse,
+	finalizeCheckoutResponse,
 	type GetPagePurchasesResponse,
 	type GetTokenPurchasesResponse,
 	getPagePurchasesResponse,
@@ -54,6 +56,20 @@ class StripeApiService {
 	getTokenPurchases = async (): Promise<GetTokenPurchasesResponse> => {
 		return baseApiService.get("/api/v1/stripe/token-purchases", getTokenPurchasesResponse);
 	};
+
+	/**
+	 * Synchronously fulfil a checkout session from the success page.
+	 *
+	 * Solves the race where the user lands on /purchase-success before
+	 * Stripe's checkout.session.completed webhook arrives. Idempotent —
+	 * safe to call concurrently with the webhook.
+	 */
+	finalizeCheckout = async (sessionId: string): Promise<FinalizeCheckoutResponse> => {
+		return baseApiService.get(
+			`/api/v1/stripe/finalize-checkout?session_id=${encodeURIComponent(sessionId)}`,
+			finalizeCheckoutResponse
+		);
+	};
 }
 
 export const stripeApiService = new StripeApiService();