diff --git a/components/billing/topup-panel.tsx b/components/billing/topup-panel.tsx
index 254fe97..bd3a0ed 100644
--- a/components/billing/topup-panel.tsx
+++ b/components/billing/topup-panel.tsx
@@ -1,6 +1,7 @@
"use client";
import { useTranslations } from "next-intl";
+import { useState } from "react";
import { authClient } from "@/lib/auth-client";
import { TOPUP_PRODUCTS } from "@/lib/polar-products";
@@ -8,8 +9,10 @@ import { toast } from "@/lib/toast";
export function TopupPanel() {
const t = useTranslations('toasts');
+ const [liveMessage, setLiveMessage] = useState("");
async function handleTopup(polarProductId: string) {
+ setLiveMessage(t('billing.redirectingToCheckoutTitle'));
toast.info(
t('billing.redirectingToCheckoutTitle'),
t('billing.redirectingToCheckoutDesc'),
@@ -41,6 +44,9 @@ export function TopupPanel() {
Angezeigt werden nur kaufbare Top-up Pakete aus der serverseitigen Polar-Produktkonfiguration.
+
+ {liveMessage}
+