@bigz-app/booking-widget 0.1.25 → 0.2.0

package/dist/booking-widget.js

@@ -629,6 +629,13 @@
 			direction: ltr;
 			isolation: isolate;
 		}
+        .print-only {
+            display: none;
+        }
+        .print-hidden {
+            display: block;
+        }
+        @media print {
 	`;
       // Inject CSS reset styles
       y$1(() => {
@@ -974,6 +981,26 @@
           organizationId: config.organizationId,
       };
   };
+  // Helper function to detect Stripe return parameters in URL
+  const detectStripeReturn = () => {
+      if (typeof window === "undefined") {
+          return null;
+      }
+      const urlParams = new URLSearchParams(window.location.search);
+      // Check for Stripe return parameters
+      const paymentIntent = urlParams.get("payment_intent");
+      const paymentIntentClientSecret = urlParams.get("payment_intent_client_secret");
+      const redirectStatus = urlParams.get("redirect_status");
+      if (paymentIntent && paymentIntentClientSecret && redirectStatus) {
+          return {
+              isStripeReturn: true,
+              paymentIntent,
+              paymentIntentClientSecret,
+              redirectStatus,
+          };
+      }
+      return null;
+  };
 
   var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -9183,7 +9210,7 @@
               borderRadius: "50%",
           } }) }));
   // Inner component that uses the Stripe hooks
-  function PaymentFormInner({ config, eventDetails, formData, totalAmount, discountCode, onSuccess, onError, systemConfig, clientSecret, }) {
+  function PaymentFormInner({ config, eventDetails, formData, totalAmount, discountCode, onSuccess, onError, }) {
       const stripe = reactStripe_umdExports.useStripe();
       const elements = reactStripe_umdExports.useElements();
       const [isLoading, setIsLoading] = d$1(false);
@@ -9209,26 +9236,12 @@
                   return;
               }
               // First, confirm the payment with Stripe
+              // Build return URL for Stripe redirect
+              const baseUrl = window !== undefined ? window.location.href : `${config.bookingSystemUrl}/booking-success`;
+              const returnUrl = new URL(baseUrl);
               const confirmParams = {
-                  return_url: "https://bigz.surfschule-zingst.de/booking/success",
+                  return_url: returnUrl.toString(),
               };
-              // Ensure return_url is properly formatted and doesn't contain fragment identifiers
-              try {
-                  const url = new URL(confirmParams.return_url);
-                  // Remove any fragment identifiers that might cause issues
-                  url.hash = "";
-                  confirmParams.return_url = url.toString();
-              }
-              catch (e) {
-                  console.warn("[PAYMENT_FORM] Invalid return_url, using fallback:", confirmParams.return_url);
-                  // Fallback to current origin if URL parsing fails
-                  confirmParams.return_url = window.location.origin + window.location.pathname;
-              }
-              console.log("[PAYMENT_FORM] Confirming payment with params:", {
-                  paymentIntentId: clientSecret.split("_secret_")[0],
-                  return_url: confirmParams.return_url,
-                  redirect: "if_required",
-              });
               const { error, paymentIntent } = await stripe.confirmPayment({
                   elements,
                   confirmParams,
@@ -9246,91 +9259,15 @@
                       setPaymentError(error.message || "Zahlungsfehler");
                   }
                   else {
-                      setPaymentError("Ein unerwarteter Fehler ist aufgetreten.");
+                      setPaymentError("Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es nochmal.");
                   }
                   return;
               }
               // Payment succeeded, now create the booking
               if (paymentIntent && paymentIntent.status === "succeeded") {
-                  // Check if we have system configuration
-                  if (!systemConfig) {
-                      throw new Error("System-Konfiguration nicht verfügbar. Bitte lade die Seite neu.");
-                  }
-                  // Determine which endpoint to use based on system mode
-                  const isConnectMode = systemConfig.systemMode === "connect";
-                  const endpoint = isConnectMode
-                      ? "/booking/create-from-payment"
-                      : "/booking-proxy/create-booking";
-                  // Calculate if this is a deposit payment
-                  const fullAmount = eventDetails.price * formData.participants.filter((p) => p.name.trim()).length;
-                  const isDepositPayment = eventDetails.deposit > 0;
-                  // Build request body based on mode
-                  const requestData = {
-                      // Payment info
-                      paymentIntentId: paymentIntent.id,
-                      paymentMethod: "card",
-                      paymentStatus: isDepositPayment ? "deposit_paid" : "paid",
-                      totalAmount,
-                      depositAmount: isDepositPayment ? totalAmount : undefined,
-                      fullAmount: fullAmount,
-                      // Customer info
-                      customerEmail: formData.customerEmail,
-                      customerName: formData.customerName,
-                      customerPhone: formData.customerPhone,
-                      // Booking info
-                      participants: formData.participants.filter((p) => p.name.trim()),
-                      eventInstanceId: config.eventInstanceId || eventDetails.id,
-                      organizationId: config.organizationId, // Ensure organization ID is always included
-                      discountCode: discountCode?.code,
-                      notes: "",
-                  };
-                  // Add mode-specific fields
-                  if (isConnectMode) {
-                      Object.assign(requestData, {
-                          source: "connect",
-                          stripeAccountType: "connect",
-                      });
-                  }
-                  else {
-                      // ApiKey mode - include required proxy fields
-                      Object.assign(requestData, {
-                          bookingSystemApiUrl: config.apiBaseUrl,
-                          // apiKey would be added here if required
-                      });
-                  }
-                  console.log(`[PAYMENT_FORM] Attempting booking creation via ${endpoint}`, {
-                      mode: isConnectMode ? "connect" : "apikey",
-                      paymentIntentId: paymentIntent.id,
-                      eventInstanceId: requestData.eventInstanceId,
-                      organizationId: requestData.organizationId,
-                      participantCount: requestData.participants.length,
-                  });
-                  const bookingResponse = await fetch(getApiUrl(config.apiBaseUrl, endpoint), {
-                      method: "POST",
-                      headers: createApiHeaders(config),
-                      body: JSON.stringify(createRequestBody(config, requestData)),
-                  });
-                  const bookingData = await bookingResponse.json();
-                  if (!bookingResponse.ok) {
-                      console.error(`[PAYMENT_FORM] Booking creation failed:`, {
-                          status: bookingResponse.status,
-                          error: bookingData.error,
-                          details: bookingData.details,
-                          paymentIntentId: paymentIntent.id,
-                      });
-                      throw new Error(bookingData.error || "Fehler beim Erstellen der Buchung");
-                  }
-                  console.log(`[PAYMENT_FORM] Booking created successfully:`, {
-                      bookingId: bookingData.booking?.id,
-                      orderId: bookingData.order?.id,
-                      paymentIntentId: paymentIntent.id,
-                  });
                   // Booking created successfully
                   onSuccess({
-                      booking: bookingData.booking,
-                      payment: "succeeded",
                       paymentIntent: paymentIntent,
-                      formData: formData,
                   });
               }
               else {
@@ -9433,11 +9370,6 @@
               setIsCreatingPaymentIntent(true);
               setPaymentError(null);
               try {
-                  // Determine endpoint based on system mode
-                  const isConnectMode = systemConfig.systemMode === "connect";
-                  const endpoint = isConnectMode
-                      ? "/booking/create-payment-intent"
-                      : "/booking-proxy/create-payment-intent";
                   // Build request data with validation
                   const requestData = {
                       eventInstanceId: config.eventInstanceId || eventDetails.id,
@@ -9446,7 +9378,10 @@
                       currency: "eur",
                       participants: formData.participants.filter((p) => p.name?.trim()),
                       discountCode: discountCode?.code,
+                      customerName: formData.customerName?.trim(),
                       customerEmail: formData.customerEmail?.trim(),
+                      customerPhone: formData.customerPhone?.trim(),
+                      comment: formData.comment?.trim(),
                   };
                   // Validate required fields
                   if (!requestData.eventInstanceId) {
@@ -9464,34 +9399,13 @@
                   if (!requestData.customerEmail) {
                       throw new Error("Customer email is required");
                   }
-                  console.log("[PAYMENT_FORM] Creating payment intent:", {
-                      endpoint,
-                      mode: isConnectMode ? "connect" : "apikey",
-                      amount: requestData.amount,
-                      currency: requestData.currency,
-                      participantCount: requestData.participants.length,
-                      organizationId: requestData.organizationId,
-                      eventInstanceId: requestData.eventInstanceId,
-                  });
-                  // Add mode-specific fields
-                  if (!isConnectMode) {
-                      // ApiKey mode needs additional fields
-                      Object.assign(requestData, {
-                          bookingSystemApiUrl: config.apiBaseUrl,
-                          // apiKey would be added here if required
-                      });
-                  }
-                  const response = await fetch(getApiUrl(config.apiBaseUrl, endpoint), {
+                  const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/create-payment-intent"), {
                       method: "POST",
                       headers: createApiHeaders(config),
                       body: JSON.stringify(createRequestBody(config, requestData)),
                   });
                   const data = await response.json();
                   if (response.ok) {
-                      console.log("[PAYMENT_FORM] Payment intent created successfully:", {
-                          hasClientSecret: !!data.clientSecret,
-                          clientSecretPrefix: `${data.clientSecret?.substring(0, 20)}...`,
-                      });
                       setClientSecret(data.clientSecret);
                   }
                   else {
@@ -10341,162 +10255,339 @@
                 ` })] }) }));
   }
 
-  const BookingSuccessModal = ({ isOpen, onClose, bookingData, eventDetails, formData, config, }) => {
-      if (!isOpen || !bookingData)
+  const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, }) => {
+      const [bookingData, setBookingData] = d$1(null);
+      const [eventDetails, setEventDetails] = d$1(null);
+      const [formData, setFormData] = d$1(null);
+      const [isLoading, setIsLoading] = d$1(false);
+      const [paymentStatus, setPaymentStatus] = d$1(null);
+      const fetchBookingData = async (intentId) => {
+          const targetPaymentIntentId = paymentIntentId;
+          // If we have payment intent ID, fetch from API
+          if (targetPaymentIntentId) {
+              setIsLoading(true);
+              try {
+                  const response = await fetch(getApiUrl(config.apiBaseUrl, "/booking/get-booking-by-payment-intent"), {
+                      method: "POST",
+                      headers: createApiHeaders(config),
+                      body: JSON.stringify(createRequestBody(config, {
+                          paymentIntentId: targetPaymentIntentId,
+                      })),
+                  });
+                  const data = await response.json();
+                  if (response.ok) {
+                      setBookingData({
+                          booking: data.booking,
+                          order: data.order,
+                          payments: data.payments,
+                          orderItems: data.orderItems,
+                          stripePaymentIntent: data.stripePaymentIntent,
+                      });
+                      setEventDetails({
+                          id: data.booking.eventInstance.id,
+                          name: data.booking.eventInstance.eventType.name,
+                          description: data.booking.eventInstance.eventType.description,
+                          startTime: data.booking.eventInstance.startTime,
+                          endTime: data.booking.eventInstance.endTime,
+                          price: data.order.total / data.booking.participantCount,
+                      });
+                      setFormData({
+                          customerEmail: data.booking.customerEmail,
+                          customerName: data.booking.customerName,
+                          customerPhone: data.booking.customerPhone,
+                          participants: data.booking.participants || [],
+                      });
+                      // Set payment status from Stripe data or order status
+                      setPaymentStatus(data.stripePaymentIntent?.status || data.order.status);
+                  }
+                  else {
+                      onError?.(data.error || "Fehler beim Abrufen der Buchungsdaten");
+                  }
+              }
+              catch (err) {
+                  console.error("[BookingSuccessModal] Error fetching booking data:", err);
+                  onError?.("Ein Fehler ist bei der Verarbeitung aufgetreten.");
+              }
+              finally {
+                  setIsLoading(false);
+              }
+              return;
+          }
+      };
+      y$1(() => {
+          if (isOpen) {
+              fetchBookingData();
+          }
+      }, [isOpen, paymentIntentId, config, onError]);
+      if (!isOpen)
           return null;
+      // Show loading state while fetching data
+      if (isLoading || !bookingData) {
+          return (u$2(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: u$2("div", { style: {
+                      padding: "var(--bw-spacing-large)",
+                      textAlign: "center",
+                      minHeight: "200px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                  }, children: u$2("div", { style: {
+                          color: "var(--bw-text-muted)",
+                          fontFamily: "var(--bw-font-family)",
+                          fontSize: "var(--bw-font-size-large)",
+                      }, children: "Buchungsdaten werden geladen..." }) }) }));
+      }
       const booking = bookingData.booking;
-      return (u$2(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: u$2("div", { style: { padding: "var(--bw-spacing-large)" }, children: [u$2("div", { style: {
-                          textAlign: "center",
-                          marginBottom: "var(--bw-spacing-large)",
-                      }, children: [u$2("div", { style: {
-                                  width: "64px",
-                                  height: "64px",
-                                  backgroundColor: "var(--bw-success-color, #10B981)",
-                                  borderRadius: "50%",
-                                  margin: "0 auto var(--bw-spacing)",
-                                  display: "flex",
-                                  alignItems: "center",
-                                  justifyContent: "center",
-                                  fontSize: "32px",
-                                  color: "white",
-                              }, children: "\u2713" }), u$2("h2", { style: {
-                                  fontSize: "var(--bw-font-size-xl)",
-                                  fontWeight: "700",
-                                  color: "var(--bw-text-color)",
-                                  margin: "0 0 var(--bw-spacing-small) 0",
-                                  fontFamily: "var(--bw-font-family)",
-                              }, children: "Buchung erfolgreich!" }), u$2("p", { style: {
-                                  color: "var(--bw-text-muted)",
-                                  fontFamily: "var(--bw-font-family)",
-                                  margin: 0,
-                              }, children: "Deine Buchung wurde erfolgreich abgeschlossen." })] }), u$2("div", { style: {
-                          backgroundColor: "var(--bw-surface-color)",
-                          border: `1px solid var(--bw-border-color)`,
-                          borderRadius: "var(--bw-border-radius)",
-                          padding: "var(--bw-spacing)",
+      new Date(eventDetails.startTime);
+      new Date(eventDetails.endTime);
+      const handlePrint = () => {
+          window.print();
+      };
+      const formatTime12 = (dateString) => {
+          return formatTime(dateString, "Europe/Berlin", "de");
+      };
+      const formatDate12 = (dateString) => {
+          return formatEventDate(dateString);
+      };
+      return (u$2(DialogWrapper, { isOpen: isOpen, onClose: onClose, maxWidth: "700px", children: u$2("div", { style: {
+                  fontFamily: "var(--bw-font-family)",
+                  padding: "var(--bw-spacing-large)",
+                  maxWidth: "100%",
+              }, children: [u$2("div", { className: "flex justify-between items-center print-hidden", style: {
                           marginBottom: "var(--bw-spacing-large)",
-                      }, children: [u$2("h3", { style: {
-                                  fontSize: "var(--bw-font-size-large)",
-                                  fontWeight: "600",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                      }, children: [u$2("h1", { className: "font-bold text-3xl flex items-center gap-2", style: {
                                   color: "var(--bw-text-color)",
-                                  margin: "0 0 var(--bw-spacing) 0",
                                   fontFamily: "var(--bw-font-family)",
-                              }, children: "Buchungsdetails" }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing)" }, children: [booking.bookingHash && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Buchungs-ID:" }), u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: "500",
-                                                  fontFamily: "monospace",
-                                                  fontSize: "var(--bw-font-size-small)",
-                                                  backgroundColor: "var(--bw-background-color)",
-                                                  padding: "4px 8px",
-                                                  borderRadius: "var(--bw-border-radius-small)",
-                                              }, children: booking.bookingHash })] })), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Event:" }), u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: "500",
-                                                  fontFamily: "var(--bw-font-family)",
-                                                  textAlign: "right",
-                                                  maxWidth: "60%",
-                                              }, children: eventDetails.name })] }), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Datum:" }), u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: "500",
-                                                  fontFamily: "var(--bw-font-family)",
-                                                  textAlign: "right",
-                                                  maxWidth: "60%",
-                                              }, children: formatEventDate(eventDetails.startTime) })] }), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Uhrzeit:" }), u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: "500",
-                                                  fontFamily: "var(--bw-font-family)",
-                                                  textAlign: "right",
-                                                  maxWidth: "60%",
-                                              }, children: formatTime(eventDetails.startTime, "Europe/Berlin", "de") })] }), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Teilnehmer:" }), u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: "500",
-                                                  fontFamily: "var(--bw-font-family)",
-                                              }, children: booking.participantCount })] }), u$2("div", { style: {
+                                  marginBottom: "var(--bw-spacing-large)",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "var(--bw-spacing-small)",
+                              }, children: [u$2("div", { style: {
+                                          width: "32px",
+                                          height: "32px",
+                                          backgroundColor: "var(--bw-highlight-color, #10B981)",
+                                          borderRadius: "50%",
                                           display: "flex",
-                                          justifyContent: "space-between",
                                           alignItems: "center",
-                                          borderTop: `1px solid var(--bw-border-color)`,
-                                          paddingTop: "var(--bw-spacing)",
-                                          marginTop: "var(--bw-spacing)",
-                                      }, children: [u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: "600",
-                                                  fontFamily: "var(--bw-font-family)",
-                                              }, children: "Gesamtbetrag:" }), u$2("span", { style: {
-                                                  color: "var(--bw-text-color)",
-                                                  fontWeight: "600",
-                                                  fontSize: "var(--bw-font-size-large)",
-                                                  fontFamily: "var(--bw-font-family)",
-                                              }, children: formatCurrency(booking.total) })] })] })] }), formData.participants && formData.participants.length > 0 && (u$2("div", { style: {
-                          border: `1px solid var(--bw-border-color)`,
-                          borderRadius: "var(--bw-border-radius)",
-                          padding: "var(--bw-spacing)",
-                          marginBottom: "var(--bw-spacing-large)",
-                      }, children: [u$2("h3", { style: {
-                                  fontSize: "var(--bw-font-size-large)",
-                                  fontWeight: "600",
+                                          justifyContent: "center",
+                                          color: "white",
+                                      }, children: "\u2713" }), u$2("p", { style: {
+                                          fontSize: "var(--bw-font-size-large)",
+                                          fontWeight: "600",
+                                          color: "var(--bw-highlight-color)",
+                                          margin: "0px 10px",
+                                      }, children: "Buchung erfolgreich erstellt!" })] }), u$2("button", { onClick: handlePrint, style: {
+                                  backgroundColor: "transparent",
+                                  border: `1px solid var(--bw-border-color)`,
                                   color: "var(--bw-text-color)",
-                                  margin: "0 0 var(--bw-spacing) 0",
+                                  padding: "8px 16px",
+                                  borderRadius: "var(--bw-border-radius)",
+                                  cursor: "pointer",
                                   fontFamily: "var(--bw-font-family)",
-                              }, children: "Teilnehmer" }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: formData.participants
-                                  .filter((p) => p.name.trim())
-                                  .map((participant, index) => (u$2("div", { style: {
-                                      display: "flex",
-                                      justifyContent: "space-between",
-                                      alignItems: "center",
-                                      padding: "var(--bw-spacing-small)",
-                                      borderRadius: "var(--bw-border-radius-small)",
-                                  }, children: [u$2("span", { style: {
+                                  fontSize: "var(--bw-font-size-small)",
+                              }, children: "Drucken" })] }), u$2("div", { className: "print-only print-booking-header", children: [u$2("h1", { children: "Buchungsbest\u00E4tigung" }), u$2("div", { className: "subtitle", children: "Vielen Dank f\u00FCr deine Buchung! Hier sind deine Buchungsdetails." })] }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-large)" }, children: [u$2("div", { className: "print-booking-card", style: {
+                                  backgroundColor: "var(--bw-surface-color)",
+                                  border: `1px solid var(--bw-border-color)`,
+                                  borderRadius: "var(--bw-border-radius)",
+                                  padding: "var(--bw-spacing)",
+                                  marginBottom: "var(--bw-spacing-large)",
+                              }, children: [u$2("div", { className: "print-hidden", style: { marginBottom: "var(--bw-spacing)" }, children: u$2("h3", { style: {
+                                              fontSize: "var(--bw-font-size-large)",
+                                              fontWeight: "600",
                                               color: "var(--bw-text-color)",
+                                              margin: "0",
                                               fontFamily: "var(--bw-font-family)",
-                                          }, children: participant.name }), participant.age && (u$2("span", { style: {
-                                              color: "var(--bw-text-muted)",
-                                              fontSize: "var(--bw-font-size-small)",
+                                          }, children: "Buchungsdetails" }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: "Buchungsdetails" }) }), u$2("div", { className: "space-y-4 print-only:space-y-2 print-only:p-0", children: [u$2("div", { className: "gap-4 grid grid-cols-2 print-detail-grid", style: {
+                                                  display: "grid",
+                                                  gridTemplateColumns: "1fr 1fr",
+                                                  gap: "var(--bw-spacing)",
+                                              }, children: [u$2("div", { className: "print-detail-item", style: { marginBottom: "span 2" }, children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                  color: "var(--bw-text-muted)",
+                                                                  fontSize: "var(--bw-font-size-small)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                              }, children: "Buchungs-ID" }), u$2("p", { className: "font-semibold print-detail-value", style: {
+                                                                  fontWeight: "600",
+                                                                  color: "var(--bw-text-color)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  fontSize: "var(--bw-font-size-medium)",
+                                                                  margin: "0px 0px 6px 0",
+                                                              }, children: booking.bookingHash })] }), u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                  color: "var(--bw-text-muted)",
+                                                                  fontSize: "var(--bw-font-size-small)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                              }, children: "Bezahl-Status" }), u$2("div", { children: [u$2("span", { className: "print-hidden", style: {
+                                                                          backgroundColor: "var(--bw-success-color, #10B981)",
+                                                                          color: "white",
+                                                                          padding: "2px 8px",
+                                                                          borderRadius: "var(--bw-border-radius-small)",
+                                                                          fontSize: "var(--bw-font-size-small)",
+                                                                          fontFamily: "var(--bw-font-family)",
+                                                                          width: "fit-content",
+                                                                      }, children: paymentStatus === "succeeded"
+                                                                          ? "erfolgreich"
+                                                                          : paymentStatus === "canceled" || paymentStatus === "failed"
+                                                                              ? "fehlgeschlagen"
+                                                                              : "in Bearbeitung" }), u$2("span", { className: "print-only print-status-badge print-status-paid", children: "Bezahlt" })] })] })] }), u$2("div", { className: "print-detail-item print-only:col-span-2", children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                          color: "var(--bw-text-muted)",
+                                                          fontSize: "var(--bw-font-size-small)",
+                                                          fontFamily: "var(--bw-font-family)",
+                                                      }, children: "Event" }), u$2("p", { className: "font-semibold print-detail-value", style: {
+                                                          fontWeight: "600",
+                                                          color: "var(--bw-text-color)",
+                                                          fontFamily: "var(--bw-font-family)",
+                                                          fontSize: "var(--bw-font-size-large)",
+                                                          margin: "0 0 6px 0",
+                                                      }, children: eventDetails.name })] }), u$2("div", { className: "gap-4 grid grid-cols-2 print-detail-grid", style: {
+                                                  display: "grid",
+                                                  gridTemplateColumns: "1fr 1fr",
+                                                  gap: "var(--bw-spacing)",
+                                              }, children: [u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                  color: "var(--bw-text-muted)",
+                                                                  fontSize: "var(--bw-font-size-small)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                              }, children: "Datum" }), u$2("p", { className: "print-detail-value", style: {
+                                                                  fontWeight: "600",
+                                                                  color: "var(--bw-text-color)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  fontSize: "var(--bw-font-size-large)",
+                                                                  margin: "0 0 6px 0",
+                                                              }, children: formatDate12(eventDetails.startTime) })] }), u$2("div", { className: "print-detail-item", children: [u$2("div", { className: "font-medium text-muted-foreground text-sm print-detail-label", style: {
+                                                                  color: "var(--bw-text-muted)",
+                                                                  fontSize: "var(--bw-font-size-small)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                              }, children: "Zeit" }), u$2("p", { className: "print-detail-value", style: {
+                                                                  fontWeight: "600",
+                                                                  color: "var(--bw-text-color)",
+                                                                  fontFamily: "var(--bw-font-family)",
+                                                                  fontSize: "var(--bw-font-size-large)",
+                                                                  margin: "0 0 6px 0",
+                                                              }, children: [formatTime12(eventDetails.startTime), " - ", formatTime12(eventDetails.endTime)] })] })] })] })] }), formData.participants && formData.participants.length > 0 && (u$2("div", { className: "print-booking-card", style: {
+                                  border: `1px solid var(--bw-border-color)`,
+                                  borderRadius: "var(--bw-border-radius)",
+                                  padding: "var(--bw-spacing)",
+                                  marginBottom: "var(--bw-spacing-large)",
+                              }, children: [u$2("div", { className: "print-hidden", style: { marginBottom: "var(--bw-spacing)" }, children: u$2("h3", { style: {
+                                              fontSize: "var(--bw-font-size-large)",
+                                              fontWeight: "600",
+                                              color: "var(--bw-text-color)",
+                                              margin: "0",
                                               fontFamily: "var(--bw-font-family)",
-                                          }, children: [participant.age, " Jahre"] }))] }, index))) })] })), u$2("div", { style: {
-                          backgroundColor: "var(--bw-surface-color)",
-                          border: `1px solid var(--bw-border-color)`,
-                          borderRadius: "var(--bw-border-radius)",
-                          padding: "var(--bw-spacing)",
-                          marginBottom: "var(--bw-spacing-large)",
-                      }, children: [u$2("h3", { style: {
-                                  fontSize: "var(--bw-font-size-large)",
-                                  fontWeight: "600",
-                                  color: "var(--bw-text-color)",
-                                  margin: "0 0 var(--bw-spacing) 0",
-                                  fontFamily: "var(--bw-font-family)",
-                              }, children: "Kontaktdaten" }), u$2("div", { style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Name:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerName })] }), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "E-Mail:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerEmail })] }), formData.customerPhone && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Telefon:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerPhone })] }))] })] }), u$2("div", { style: {
-                          backgroundColor: "var(--bw-surface-muted-bg, rgba(59, 130, 246, 0.05))",
-                          border: `1px solid var(--bw-border-color)`,
-                          borderRadius: "var(--bw-border-radius)",
-                          padding: "var(--bw-spacing)",
-                          marginBottom: "var(--bw-spacing-large)",
-                          textAlign: "center",
-                      }, children: [u$2("div", { style: {
-                                  color: "var(--bw-highlight-color)",
-                                  fontSize: "24px",
-                                  marginBottom: "var(--bw-spacing-small)",
-                              }, children: "\uD83D\uDCE7" }), u$2("p", { style: {
-                                  color: "var(--bw-text-muted)",
-                                  margin: 0,
-                                  fontFamily: "var(--bw-font-family)",
-                                  fontSize: "var(--bw-font-size-small)",
-                              }, children: ["Eine Best\u00E4tigungs-E-Mail wird in K\u00FCrze an ", formData.customerEmail, " gesendet."] })] }), u$2("div", { style: { textAlign: "center" }, children: u$2("button", { onClick: onClose, style: {
-                              backgroundColor: "var(--bw-highlight-color)",
-                              color: "white",
-                              padding: "12px 32px",
-                              border: "none",
-                              borderRadius: "var(--bw-border-radius)",
-                              fontSize: "var(--bw-font-size)",
-                              fontWeight: "600",
-                              cursor: "pointer",
-                              fontFamily: "var(--bw-font-family)",
-                              transition: "all 0.2s ease",
-                          }, onMouseEnter: (e) => {
-                              e.currentTarget.style.opacity = "0.9";
-                          }, onMouseLeave: (e) => {
-                              e.currentTarget.style.opacity = "1";
-                          }, children: "Schlie\u00DFen" }) })] }) }));
+                                          }, children: ["Teilnehmer (", formData.participants.length, ")"] }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: ["Teilnehmer (", formData.participants.length, ")"] }) }), u$2("div", { className: "print-only:p-0", children: u$2("div", { className: "space-y-3 print-only:space-y-1", style: {
+                                              display: "flex",
+                                              flexDirection: "column",
+                                              gap: "var(--bw-spacing-small)",
+                                          }, children: formData.participants
+                                              .filter((p) => p.name.trim())
+                                              .map((participant, index) => (u$2("div", { className: "flex justify-between items-center bg-muted p-3 rounded-lg print-participant", style: {
+                                                  display: "flex",
+                                                  justifyContent: "space-between",
+                                                  alignItems: "center",
+                                                  backgroundColor: "var(--bw-surface-color, #f9fafb)",
+                                                  padding: "var(--bw-spacing-small)",
+                                                  borderRadius: "var(--bw-border-radius-small)",
+                                              }, children: u$2("div", { className: "print-participant-info", children: [u$2("div", { className: "print-participant-name", style: {
+                                                              color: "var(--bw-text-color)",
+                                                              fontFamily: "var(--bw-font-family)",
+                                                          }, children: participant.name }), participant.age && (u$2("div", { className: "text-muted-foreground text-sm print-participant-age", style: {
+                                                              color: "var(--bw-text-muted)",
+                                                              fontSize: "var(--bw-font-size-small)",
+                                                              fontFamily: "var(--bw-font-family)",
+                                                          }, children: [participant.age, " Jahre"] }))] }) }, index))) }) })] })), u$2("div", { className: "print-booking-card", style: {
+                                  backgroundColor: "var(--bw-surface-color)",
+                                  border: `1px solid var(--bw-border-color)`,
+                                  borderRadius: "var(--bw-border-radius)",
+                                  padding: "var(--bw-spacing)",
+                                  marginBottom: "var(--bw-spacing-large)",
+                              }, children: [u$2("div", { className: "print-hidden", style: { marginBottom: "var(--bw-spacing)" }, children: u$2("h3", { style: {
+                                              fontSize: "var(--bw-font-size-large)",
+                                              fontWeight: "600",
+                                              color: "var(--bw-text-color)",
+                                              margin: "0",
+                                              fontFamily: "var(--bw-font-family)",
+                                          }, children: "Zahlungs\u00FCbersicht" }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: "Zahlungs\u00FCbersicht" }) }), u$2("div", { className: "space-y-2 print-only:p-0 print-only:space-y-1", children: [u$2("div", { className: "print-payment-summary print-only", children: [u$2("div", { className: "print-payment-row", children: [u$2("span", { children: "Gesamtbetrag" }), u$2("span", { children: formatCurrency(booking.total) })] }), u$2("div", { className: "print-payment-row", children: [u$2("span", { children: "Bezahlt" }), u$2("span", { children: formatCurrency(booking.total) })] })] }), u$2("div", { className: "print-hidden space-y-2", style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Gesamtbetrag" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(booking.total) })] }), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: "Bezahlt" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formatCurrency(booking.total) })] })] })] })] }), u$2("div", { className: "print-booking-card", style: {
+                                  backgroundColor: "var(--bw-surface-color)",
+                                  border: `1px solid var(--bw-border-color)`,
+                                  borderRadius: "var(--bw-border-radius)",
+                                  padding: "var(--bw-spacing)",
+                                  marginBottom: "var(--bw-spacing-large)",
+                              }, children: [u$2("div", { className: "print-hidden", style: { marginBottom: "var(--bw-spacing)" }, children: u$2("h3", { style: {
+                                              fontSize: "var(--bw-font-size-large)",
+                                              fontWeight: "600",
+                                              color: "var(--bw-text-color)",
+                                              margin: "0",
+                                              fontFamily: "var(--bw-font-family)",
+                                          }, children: "Kontaktdaten" }) }), u$2("div", { className: "print-only", children: u$2("div", { className: "print-section-title", children: "Kontaktdaten" }) }), u$2("div", { className: "space-y-2 print-only:p-0 print-only:space-y-1", style: { display: "flex", flexDirection: "column", gap: "var(--bw-spacing-small)" }, children: [u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Name:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerName })] }), u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "E-Mail:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerEmail })] }), formData.customerPhone && (u$2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [u$2("span", { style: { color: "var(--bw-text-muted)", fontFamily: "var(--bw-font-family)" }, children: "Telefon:" }), u$2("span", { style: { color: "var(--bw-text-color)", fontFamily: "var(--bw-font-family)" }, children: formData.customerPhone })] }))] })] }), u$2("div", { className: "print-booking-card", style: {
+                                  backgroundColor: "var(--bw-surface-color)",
+                                  border: `1px solid var(--bw-border-color)`,
+                                  borderRadius: "var(--bw-border-radius)",
+                                  padding: "var(--bw-spacing)",
+                                  marginBottom: "var(--bw-spacing-large)",
+                                  textAlign: "center",
+                              }, children: u$2("p", { style: {
+                                      color: "var(--bw-text-muted)",
+                                      margin: 0,
+                                      fontFamily: "var(--bw-font-family)",
+                                      fontSize: "var(--bw-font-size-small)",
+                                      textAlign: "center",
+                                  }, children: ["Eine Best\u00E4tigungs-E-Mail wird in K\u00FCrze an ", formData.customerEmail, " gesendet."] }) }), paymentStatus && paymentStatus !== "succeeded" && (u$2("div", { style: {
+                                  backgroundColor: "var(--bw-warning-bg, #FEF3C7)",
+                                  border: "1px solid var(--bw-warning-border, #F59E0B)",
+                                  borderRadius: "var(--bw-border-radius)",
+                                  padding: "var(--bw-spacing)",
+                                  marginBottom: "var(--bw-spacing-large)",
+                                  textAlign: "center",
+                              }, children: [u$2("p", { style: {
+                                          color: "var(--bw-warning-text, #92400E)",
+                                          margin: "0 0 var(--bw-spacing) 0",
+                                          fontFamily: "var(--bw-font-family)",
+                                          fontWeight: "600",
+                                      }, children: "Zahlung wird noch verarbeitet" }), u$2("p", { style: {
+                                          color: "var(--bw-warning-text, #92400E)",
+                                          margin: "0 0 var(--bw-spacing) 0",
+                                          fontFamily: "var(--bw-font-family)",
+                                          fontSize: "var(--bw-font-size-small)",
+                                      }, children: ["Status: ", paymentStatus] }), u$2("button", { onClick: () => fetchBookingData(), disabled: isLoading, style: {
+                                          backgroundColor: "var(--bw-warning-text, #92400E)",
+                                          color: "white",
+                                          padding: "8px 16px",
+                                          border: "none",
+                                          borderRadius: "var(--bw-border-radius)",
+                                          fontSize: "var(--bw-font-size-small)",
+                                          fontWeight: "600",
+                                          cursor: isLoading ? "not-allowed" : "pointer",
+                                          fontFamily: "var(--bw-font-family)",
+                                          opacity: isLoading ? 0.6 : 1,
+                                          transition: "all 0.2s ease",
+                                      }, children: isLoading ? "Aktualisiere..." : "Status aktualisieren" })] })), u$2("div", { style: {
+                                  textAlign: "center",
+                                  marginTop: "var(--bw-spacing-large)",
+                                  paddingTop: "var(--bw-spacing)",
+                                  borderTop: `1px solid var(--bw-border-color)`,
+                              }, children: u$2("button", { onClick: onClose, style: {
+                                      backgroundColor: "var(--bw-highlight-color)",
+                                      color: "white",
+                                      padding: "12px 32px",
+                                      border: "none",
+                                      borderRadius: "var(--bw-border-radius)",
+                                      fontSize: "var(--bw-font-size)",
+                                      fontWeight: "600",
+                                      cursor: "pointer",
+                                      fontFamily: "var(--bw-font-family)",
+                                      transition: "all 0.2s ease",
+                                  }, onMouseEnter: (e) => {
+                                      e.currentTarget.style.opacity = "0.9";
+                                  }, onMouseLeave: (e) => {
+                                      e.currentTarget.style.opacity = "1";
+                                  }, children: "Schlie\u00DFen" }) }), u$2("div", { className: "print-only print-footer", children: [u$2("p", { children: ["Diese Buchungsbest\u00E4tigung wurde am", " ", new Date().toLocaleString("de-DE", {
+                                              day: "2-digit",
+                                              month: "2-digit",
+                                              year: "numeric",
+                                              hour: "2-digit",
+                                              minute: "2-digit",
+                                              timeZone: "Europe/Berlin",
+                                          }), " ", "erstellt."] }), u$2("p", { children: "Bei Fragen zu deiner Buchung kontaktiere uns gerne." })] })] })] }) }));
   };
 
   const months = [
@@ -11612,7 +11703,7 @@
       const [isLoadingShowAll, setIsLoadingShowAll] = d$1(false); // For "show all events" operation
       const [error, setError] = d$1(null);
       const [isSuccess, setIsSuccess] = d$1(false);
-      const [successData, setSuccessData] = d$1(null);
+      const [successPaymentIntentId, setSuccessPaymentIntentId] = d$1(null);
       const [systemConfig, setSystemConfig] = d$1(null);
       // PERFORMANCE OPTIMIZATION: Lazy component loading
       const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = d$1(false);
@@ -11659,6 +11750,29 @@
           initializeWidget();
           // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [config]);
+      // Handle Stripe payment return
+      y$1(() => {
+          const handleStripeReturn = () => {
+              const stripeReturn = detectStripeReturn();
+              if (stripeReturn) {
+                  if (stripeReturn.redirectStatus === "succeeded") {
+                      // Store payment intent ID and show success modal
+                      setSuccessPaymentIntentId(stripeReturn.paymentIntent);
+                      setIsSuccess(true);
+                  }
+                  else if (stripeReturn.redirectStatus === "failed") {
+                      setError("Die Zahlung war nicht erfolgreich. Bitte versuche es erneut.");
+                  }
+                  else {
+                      setError("Die Zahlung konnte nicht abgeschlossen werden. Bitte versuche es erneut.");
+                  }
+              }
+          };
+          // Only run on mount to avoid running multiple times
+          if (!isLoading) {
+              handleStripeReturn();
+          }
+      }, [isLoading]); // Only depend on isLoading to run after initial load
       // PERFORMANCE OPTIMIZATION: Lazy load components when needed
       y$1(() => {
           if (currentStep === "eventInstances" && !shouldRenderInstanceSelection) {
@@ -11901,7 +12015,7 @@
       };
       const handleBookingSuccess = (result) => {
           setIsSuccess(true);
-          setSuccessData(result);
+          setSuccessPaymentIntentId(result.paymentIntent.id);
           config.onSuccess?.(result);
       };
       const handleBookingError = (errorMessage) => {
@@ -12084,10 +12198,18 @@
                           setIsSuccess(false);
                           setCurrentStep("eventTypes");
                           setShowingPreview(true);
+                          // Reset state
+                          setSuccessPaymentIntentId(null);
                           // Reset lazy loading flags
                           setShouldRenderInstanceSelection(false);
                           setShouldRenderBookingForm(false);
-                      }, bookingData: successData, eventDetails: eventDetails, formData: successData?.formData, config: config })] }));
+                          // Clean up URL to remove Stripe parameters
+                          const url = new URL(window.location.href);
+                          url.searchParams.delete("payment_intent");
+                          url.searchParams.delete("payment_intent_client_secret");
+                          url.searchParams.delete("redirect_status");
+                          window.history.replaceState({}, "", url.toString());
+                      }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
       }
       if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
           // Show all events for the single event type
@@ -12101,10 +12223,18 @@
                           setIsSuccess(false);
                           setCurrentStep("eventTypes");
                           setShowingPreview(true);
+                          // Reset state
+                          setSuccessPaymentIntentId(null);
                           // Reset lazy loading flags
                           setShouldRenderInstanceSelection(false);
                           setShouldRenderBookingForm(false);
-                      }, bookingData: successData, eventDetails: eventDetails, formData: successData?.formData, config: config })] }));
+                          // Clean up URL to remove Stripe parameters
+                          const url = new URL(window.location.href);
+                          url.searchParams.delete("payment_intent");
+                          url.searchParams.delete("payment_intent_client_secret");
+                          url.searchParams.delete("redirect_status");
+                          window.history.replaceState({}, "", url.toString());
+                      }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
       }
       if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
           // Button mode - show button that opens sidebar/booking directly
@@ -12138,10 +12268,18 @@
                               setIsSuccess(false);
                               setCurrentStep("eventTypes");
                               setSidebarOpen(false);
+                              // Reset state
+                              setSuccessPaymentIntentId(null);
                               // Reset lazy loading flags
                               setShouldRenderInstanceSelection(false);
                               setShouldRenderBookingForm(false);
-                          }, bookingData: successData, eventDetails: eventDetails, formData: successData?.formData, config: config })] }) }));
+                              // Clean up URL to remove Stripe parameters
+                              const url = new URL(window.location.href);
+                              url.searchParams.delete("payment_intent");
+                              url.searchParams.delete("payment_intent_client_secret");
+                              url.searchParams.delete("redirect_status");
+                              window.history.replaceState({}, "", url.toString());
+                          }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }) }));
       }
       // Cards mode (default) - show event type selection
       const cardsView = (u$2(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, isLoading: isLoading, skeletonCount: getSkeletonCount() }));
@@ -12177,10 +12315,18 @@
       return (u$2(StyleProvider, { config: config, children: [cardsView, shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: handleBackToEventTypes, isOpen: currentStep === "eventInstances", onClose: handleBackToEventTypes, isLoadingEventInstances: isLoadingEventInstances, isLoadingEventDetails: isLoadingEventDetails })), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: backHandlers.onBackToEventInstances, onBackToEventTypes: backHandlers.onBackToEventTypes, selectedEventType: selectedEventType, selectedEventInstance: selectedEventInstance, isOpen: currentStep === "booking" && !!eventDetails, onClose: backHandlers.onClose, systemConfig: systemConfig })), u$2(BookingSuccessModal, { isOpen: isSuccess, onClose: () => {
                       setIsSuccess(false);
                       setCurrentStep("eventTypes");
+                      // Reset state
+                      setSuccessPaymentIntentId(null);
                       // Reset lazy loading flags
                       setShouldRenderInstanceSelection(false);
                       setShouldRenderBookingForm(false);
-                  }, bookingData: successData, eventDetails: eventDetails, formData: successData?.formData, config: config })] }));
+                      // Clean up URL to remove Stripe parameters
+                      const url = new URL(window.location.href);
+                      url.searchParams.delete("payment_intent");
+                      url.searchParams.delete("payment_intent_client_secret");
+                      url.searchParams.delete("redirect_status");
+                      window.history.replaceState({}, "", url.toString());
+                  }, config: config, onError: setError, paymentIntentId: successPaymentIntentId })] }));
   }
 
   // Export init function for vanilla JS usage with Preact