@eventlook/sdk 1.7.2 → 1.7.3-beta.0

package/src/form/PaymentOverviewBox.tsx

@@ -42,6 +42,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
   const insuranceAvailable = isInsuranceAvailable(event.currency);
   const { data: eventProducts } = useActiveEventProducts(event.id, true);
   const [shippingFee, setShippingFee] = useState(0);
+  const [paymentMethodFee, setPaymentMethodFee] = useState(0);
   const { setValue, watch } = useFormContext<ITicketForm>();
   const values = watch();
   const {
@@ -135,6 +136,10 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
   }, [event, flatProducts]);
 
   const getFee = useMemo(() => fCurrency(totalFee ?? 0, lang, event.currency), [totalFee]);
+  const getPaymentMethodFee = useMemo(
+    () => fCurrency(paymentMethodFee ?? 0, lang, event.currency),
+    [paymentMethodFee]
+  );
 
   const shoppingCartBody = useMemo<ICalculateShoppingCartDto>(
     () => ({
@@ -253,8 +258,10 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
     setValue('originalPrice', data.originalPrice);
     setValue('total', data.totalPrice || 0);
 
-    const feeTotal = (data.serviceFee ?? 0) + (data.paymentMethodFee ?? 0);
-    setValue('totalFee', feeTotal);
+    // The Stripe processing surcharge is shown as its own line, so keep the
+    // service fee and the payment-method fee separate.
+    setValue('totalFee', data.serviceFee ?? 0);
+    setPaymentMethodFee(data.paymentMethodFee ?? 0);
 
     setShippingFee(data.shippingFee);
     setValue('ticketInsurance', data.ticketInsurance.enabled);
@@ -482,13 +489,13 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
         className="overview-card__order-info"
         sx={{ p: { xs: withoutPadding ? 0 : 2, md: 2 } }}
         pt={{ xs: 0, sm: 2 }}
-        spacing={0.75}
+        spacing={1.25}
         useFlexGap
       >
-        {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed' }} />}
+        {!!selectedTickets.length && !isMobile && <Divider sx={{ borderStyle: 'dashed', my: 1 }} />}
 
         {!!selectedTickets.length && (
-          <Stack spacing={0.5}>
+          <Stack spacing={1}>
             {insuranceAvailable && (
               <PaymentOverviewCheckbox
                 checkboxName="ticketInsurance"
@@ -515,7 +522,7 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
                 </>
               }
             />
-            <Divider sx={{ borderStyle: 'dashed' }} />
+            <Divider sx={{ borderStyle: 'dashed', mt: 0.5 }} />
           </Stack>
         )}
         {selectedTickets.map((ticket, index) => (
@@ -600,8 +607,14 @@ const PaymentOverviewBox: React.FC<Props> = ({ event, withoutPadding, hideBuyBut
             <Typography variant="body2">{getFee}</Typography>
           </Stack>
         )}
+        {!!total && !!paymentMethodFee && (
+          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+            <Typography variant="body2">{t('form.labels.payment_processing_fee')}</Typography>
+            <Typography variant="body2">{getPaymentMethodFee}</Typography>
+          </Stack>
+        )}
         {((!!selectedTickets.length && isMobile) || !isMobile) && (
-          <Divider sx={{ borderStyle: 'dashed' }} />
+          <Divider sx={{ borderStyle: 'dashed', my: 1 }} />
         )}
         {!hideBuyButton && (
           <>

package/src/form/PaymentSuccess.tsx

@@ -1,5 +1,6 @@
 import { Iconify, Image, MotionContainer, varBounce } from '@components';
 import { Box, Button, Card, Grid, LinearProgress, Link, Typography } from '@mui/material';
+import PaydroidCashlessSection from '@form/paydroid/PaydroidCashlessSection';
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { getSearchParamsInObject } from '@utils/url';
 import { postOrderPaid } from '@modules/order';
@@ -17,6 +18,7 @@ import useGlobal from '@hooks/useGlobal';
 import { Trans } from '@components/Trans';
 import { getGtmPurchasePaid, gtmPurchasePaid, mapUserToUserData } from '@utils/gtm';
 import { IPixels } from '@utils/types/gtm.type';
+import { IOrderPaid } from '@utils/types/order.type';
 
 interface Props {
   setIsPaying: Dispatch<SetStateAction<boolean>>;
@@ -31,6 +33,7 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
   const errorState = 'ERROR';
   const [tickets, setTickets] = useState<IPaidTicket[]>([]);
   const [products, setProducts] = useState<IPaidProduct[]>([]);
+  const [data, setData] = useState<IOrderPaid | null>(null);
   const [state, setState] = useState<string>(defaultState);
   const [title, setTitle] = useState<string>(t('event.tickets.payment_success.loading'));
   const [description, setDescription] = useState<string | null>(null);
@@ -50,12 +53,12 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
       const { data } = await postOrderPaid({
         gopayId: Number(paymentId),
       });
-      const { tickets } = data;
+      const { tickets, products } = data;
       setTickets(tickets);
-      const { products } = data;
       setProducts(products);
       setState(data.state);
       setGwUrl(data.gwUrl);
+      setData(data);
 
       const items = [
         ...data.tickets.map((ticket) => ({
@@ -329,6 +332,7 @@ const PaymentSuccess: React.FC<Props> = ({ setIsPaying, isIframe, pixels }) => {
               </Grid>
             </>
           )}
+          {data?.paydroidEventId && <PaydroidCashlessSection data={data} />}
           {!isIframe && (
             <Box textAlign="center">
               <CustomButton

package/src/form/TicketForm.tsx

@@ -61,6 +61,23 @@ import TicketSelectionMap from '@form/tickets/TicketSelectionMap';
 import PaymentOverviewDrawer from './PaymentOverviewDrawer';
 import { getPlaceAsString } from '@utils/place';
 import Services from '@form/services';
+import PaydroidPage from './paydroid/PaydroidPage';
+import { isPaydroidPage } from '@utils/page';
+import StripeCheckoutProvider, { StripeCheckoutApi } from '@form/payment/StripeCheckoutProvider';
+import useAllowedPaymentMethods from '@hooks/data/useAllowedPaymentMethods';
+import useStripeConfig from '@hooks/data/useStripeConfig';
+
+// Append the order number so the post-payment confirmation poll (PaymentSuccess)
+// can resolve the order — same ?id contract the hosted-gateway return used.
+const withOrderId = (url: string, orderNumber: number) => {
+  try {
+    const u = new URL(url);
+    u.searchParams.set('id', String(orderNumber));
+    return u.toString();
+  } catch {
+    return url;
+  }
+};
 
 interface Props {
   event: IEvent;
@@ -96,12 +113,32 @@ const TicketForm: React.FC<Props> = ({
   isInline,
   headerSlot,
 }) => {
-  const { t, setGlobal, callbacks, links, user, options, showSnackbar, content, seatingIframeUrl } =
-    useGlobal();
+  const {
+    t,
+    lang,
+    setGlobal,
+    callbacks,
+    links,
+    user,
+    options,
+    showSnackbar,
+    content,
+    seatingIframeUrl,
+  } = useGlobal();
   const { transformErrors } = useErrors(t('event.tickets.error.order'));
   const { data: eventProducts, isLoading } = useActiveEventProducts(event.id);
   const [paymentRedirect, setPaymentRedirect] = useState<string | null>(null);
   const [hasGopayId, setHasGopayId] = useState<boolean>(hasGopayIdSsr);
+
+  // Inline Stripe (Payment Element, expand-on-select). The Elements provider is
+  // mounted up front when a Stripe method is on offer and the publishable key is
+  // loaded; the form's submit handler drives confirmation via this ref.
+  const { data: allowedPaymentMethods } = useAllowedPaymentMethods(event.currency, event.id);
+  const stripeMethod = allowedPaymentMethods?.find((m) => m.provider === 'STRIPE');
+  const { publishableKey } = useStripeConfig(!!stripeMethod);
+  const stripeOffered = !!stripeMethod && !!publishableKey;
+  const stripeCheckoutRef = useRef<StripeCheckoutApi | null>(null);
+  const [page, setPage] = useState<string | null>(null);
   const [isPaying, setIsPaying] = useState<boolean>(false);
   const [formStep, setFormStep] = useState<number>(1);
   const [isPaymentOverviewDrawerOpen, setIsPaymentOverviewDrawerOpen] = useState<boolean>(false);
@@ -387,6 +424,14 @@ const TicketForm: React.FC<Props> = ({
   const cartItemCount = getCartUniqueItemCount(values);
   const onInvalid = useScrollToFirstError(methods);
 
+  // Stripe deferred Elements rejects amounts below the per-currency minimum, so
+  // only mount it once there's a real, positive cart total (in minor units).
+  // Free orders with items verify the card instead (SetupIntent, no charge).
+  const stripeAmountMinor = Math.round((Number(values.total) || 0) * 100);
+  const isStripeVerification = stripeAmountMinor === 0 && cartItemCount > 0;
+  const stripeMode: 'payment' | 'setup' = isStripeVerification ? 'setup' : 'payment';
+  const stripeReady = stripeOffered && (stripeAmountMinor > 0 || isStripeVerification);
+
   const onSubmit = async (values: ITicketForm) => {
     if (cartItemCount <= 0) {
       showSnackbar(t('form.validation.count_tickets_or_products'), {
@@ -424,6 +469,21 @@ const TicketForm: React.FC<Props> = ({
           },
           {} as Record<number, ITicketFormTicket[]>
         );
+        // Inline Stripe (expand-on-select): validate + collect the card fields
+        // before creating the order, so a card error never leaves a dangling
+        // order/reservation behind.
+        const selectedMethod = allowedPaymentMethods?.find(
+          (m) => m.id === Number(values.paymentMethodId)
+        );
+        const isStripeSelected = selectedMethod?.provider === 'STRIPE';
+        if (isStripeSelected) {
+          const cardError = await stripeCheckoutRef.current?.submit();
+          if (cardError) {
+            showSnackbar(cardError, { variant: 'error' });
+            return;
+          }
+        }
+
         const { data: orderData } = await postOrder(data);
         localStorage.removeItem('cartToken');
         const items = [
@@ -479,6 +539,32 @@ const TicketForm: React.FC<Props> = ({
           gtmPurchase(null);
           gtmPurchase(item, pixels, userData);
         }
+        // Inline Stripe: confirm the PaymentIntent in-page (no redirect). On
+        // success land on the order page with ?id=<orderNumber> so the existing
+        // PaymentSuccess poll + webhook finalize the order.
+        if (orderData.clientSecret) {
+          const returnUrl = withOrderId(
+            data.callback || window.location.href,
+            orderData.orderEntity.number
+          );
+          const result = await stripeCheckoutRef.current?.confirm(
+            orderData.clientSecret,
+            returnUrl
+          );
+          if (!result?.ok) {
+            showSnackbar(result?.error || t('form.labels.card_payment_error'), {
+              variant: 'error',
+            });
+            return;
+          }
+          if (!isInline && isIframe) {
+            parent.postMessage({ type: 'eventlookFrameGopayRedirect', gwUrl: returnUrl }, '*');
+          } else {
+            window.location.replace(returnUrl);
+          }
+          return;
+        }
+
         setPaymentRedirect(orderData.gwUrl);
         methods.reset();
       } catch (err: any) {
@@ -513,6 +599,7 @@ const TicketForm: React.FC<Props> = ({
     const paymentId = searchParams.id;
     const iframeCampaignId = Number(searchParams.iframeCampaignId);
     setHasGopayId(!!paymentId);
+    setPage(searchParams.page || null);
     if (!isNaN(iframeCampaignId)) {
       methods.setValue('iframeCampaignId', iframeCampaignId);
     }
@@ -559,7 +646,9 @@ const TicketForm: React.FC<Props> = ({
 
   return (
     <Box id={EVENTLOOK_ORDER_FORM_CONTAINER_ID}>
-      {hasGopayId ? (
+      {isPaydroidPage(page) ? (
+        <PaydroidPage page={page} />
+      ) : hasGopayId ? (
         <PaymentSuccess setIsPaying={setIsPaying} isIframe={isIframe} pixels={pixels} />
       ) : isPaying ? (
         <PaymentPending />
@@ -571,204 +660,216 @@ const TicketForm: React.FC<Props> = ({
           isInline={isInline}
         />
       ) : (
-        <FormProvider
-          methods={methods}
-          // @ts-ignore -- handleSubmit type mismatch with FormProvider onSubmit prop
-          onSubmit={methods.handleSubmit(onSubmit, onInvalid)}
-          formId={EVENTLOOK_ORDER_FORM_ID}
+        <StripeCheckoutProvider
+          active={stripeReady}
+          publishableKey={publishableKey}
+          mode={stripeMode}
+          amount={stripeAmountMinor}
+          currency={event.currency}
+          locale={lang}
+          apiRef={stripeCheckoutRef}
         >
-          <Stack
-            className="overview-card__event-info"
-            display={{ md: 'none' }}
-            sx={{
-              mb: 2,
-            }}
+          <FormProvider
+            methods={methods}
+            // @ts-ignore -- handleSubmit type mismatch with FormProvider onSubmit prop
+            onSubmit={methods.handleSubmit(onSubmit, onInvalid)}
+            formId={EVENTLOOK_ORDER_FORM_ID}
           >
-            <Typography variant="h3" component="h1">
-              {event.name}
-            </Typography>
-            <Typography variant="h5" component="h2">
-              {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
-            </Typography>
-            <Typography variant="body2" mt={1}>
-              {getPlaceAsString(event.place)}
-            </Typography>
-            {headerSlot ? <>{headerSlot}</> : null}
-          </Stack>
-          <Grid
-            container
-            spacing={2}
-            sx={{
-              pb: {
-                xs: isPaymentOverviewDrawerOpen ? cartItemCount * 4 + 18 : 0,
-                md: 0,
-              },
-            }}
-          >
-            <Grid size={{ xs: 12, md: 8 }}>
-              <Stepper
-                orientation="vertical"
-                sx={(theme) => ({
-                  [theme.breakpoints.down('sm')]: {
-                    '& .MuiStepContent-root': {
-                      borderLeftWidth: 0,
-                      paddingLeft: 0,
-                      marginLeft: 0,
+            <Stack
+              className="overview-card__event-info"
+              display={{ md: 'none' }}
+              sx={{
+                mb: 2,
+              }}
+            >
+              <Typography variant="h3" component="h1">
+                {event.name}
+              </Typography>
+              <Typography variant="h5" component="h2">
+                {dayjs(event.startDate).format('DD.MM.YYYY HH:mm')}
+              </Typography>
+              <Typography variant="body2" mt={1}>
+                {getPlaceAsString(event.place)}
+              </Typography>
+              {headerSlot ? <>{headerSlot}</> : null}
+            </Stack>
+            <Grid
+              container
+              spacing={2}
+              sx={{
+                pb: {
+                  xs: isPaymentOverviewDrawerOpen ? cartItemCount * 4 + 18 : 0,
+                  md: 0,
+                },
+              }}
+            >
+              <Grid size={{ xs: 12, md: 8 }}>
+                <Stepper
+                  orientation="vertical"
+                  sx={(theme) => ({
+                    [theme.breakpoints.down('sm')]: {
+                      '& .MuiStepContent-root': {
+                        borderLeftWidth: 0,
+                        paddingLeft: 0,
+                        marginLeft: 0,
+                      },
+                      '& .MuiStepConnector-line': { borderLeftWidth: 0 },
                     },
-                    '& .MuiStepConnector-line': { borderLeftWidth: 0 },
-                  },
-                })}
-              >
-                {event.type === EventType.RECURRING && (
+                  })}
+                >
+                  {event.type === EventType.RECURRING && (
+                    <Step active>
+                      <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
+                      <StepContent sx={{ pr: { xs: 0 } }}>
+                        <TimeslotSelection event={event} />
+                      </StepContent>
+                    </Step>
+                  )}
                   <Step active>
-                    <StepLabel>{t('event.tickets.stepper.6.title')}</StepLabel>
+                    <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
                     <StepContent sx={{ pr: { xs: 0 } }}>
-                      <TimeslotSelection event={event} />
+                      {event.mapId && seatingIframeUrl ? (
+                        <TicketSelectionMap event={event} />
+                      ) : event.hasMerchandise ? (
+                        <TicketWithMerchandiseSelection event={event} />
+                      ) : (
+                        <TicketSelection event={event} />
+                      )}
                     </StepContent>
                   </Step>
-                )}
-                <Step active>
-                  <StepLabel>{t('event.tickets.stepper.1.title')}</StepLabel>
-                  <StepContent sx={{ pr: { xs: 0 } }}>
-                    {event.mapId && seatingIframeUrl ? (
-                      <TicketSelectionMap event={event} />
-                    ) : event.hasMerchandise ? (
-                      <TicketWithMerchandiseSelection event={event} />
-                    ) : (
-                      <TicketSelection event={event} />
-                    )}
-                  </StepContent>
-                </Step>
-                {event.hasMerchandise && eventProducts.length && (
+                  {event.hasMerchandise && eventProducts.length && (
+                    <Step active>
+                      <StepLabel>{t('event.tickets.stepper.4.title')}</StepLabel>
+                      <StepContent sx={{ pr: { xs: 0 } }}>
+                        <MerchandiseSelection
+                          eventProducts={eventProducts}
+                          eventId={event.id}
+                          isLoading={isLoading}
+                        />
+                      </StepContent>
+                    </Step>
+                  )}
                   <Step active>
-                    <StepLabel>{t('event.tickets.stepper.4.title')}</StepLabel>
+                    <StepLabel>{t('event.tickets.stepper.8.title')}</StepLabel>
                     <StepContent sx={{ pr: { xs: 0 } }}>
-                      <MerchandiseSelection
-                        eventProducts={eventProducts}
-                        eventId={event.id}
-                        isLoading={isLoading}
-                      />
+                      <Services event={event} />
                     </StepContent>
                   </Step>
-                )}
-                <Step active>
-                  <StepLabel>{t('event.tickets.stepper.8.title')}</StepLabel>
-                  <StepContent sx={{ pr: { xs: 0 } }}>
-                    <Services event={event} />
-                  </StepContent>
-                </Step>
-                {event.children.length && (
+                  {event.children.length && (
+                    <Step active>
+                      <StepLabel>{t('event.tickets.stepper.7.title')}</StepLabel>
+                      <StepContent sx={{ pr: { xs: 0 } }}>
+                        <ChildEventSection events={event.children} />
+                      </StepContent>
+                    </Step>
+                  )}
                   <Step active>
-                    <StepLabel>{t('event.tickets.stepper.7.title')}</StepLabel>
+                    <StepLabel>{t('event.tickets.stepper.2.title')}</StepLabel>
                     <StepContent sx={{ pr: { xs: 0 } }}>
-                      <ChildEventSection events={event.children} />
+                      <ContactPerson event={event} />
                     </StepContent>
                   </Step>
-                )}
-                <Step active>
-                  <StepLabel>{t('event.tickets.stepper.2.title')}</StepLabel>
-                  <StepContent sx={{ pr: { xs: 0 } }}>
-                    <ContactPerson event={event} />
-                  </StepContent>
-                </Step>
-                {event.hasMerchandise && showShippingMethods() && (
+                  {event.hasMerchandise && showShippingMethods() && (
+                    <Step active>
+                      <StepLabel>{t('event.tickets.stepper.5.title')}</StepLabel>
+                      <StepContent sx={{ pr: { xs: 0 } }}>
+                        <Shipping event={event} />
+                      </StepContent>
+                    </Step>
+                  )}
                   <Step active>
-                    <StepLabel>{t('event.tickets.stepper.5.title')}</StepLabel>
+                    <StepLabel>
+                      {t(
+                        `event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`
+                      )}
+                    </StepLabel>
                     <StepContent sx={{ pr: { xs: 0 } }}>
-                      <Shipping event={event} />
+                      <Payment event={event} stripeReady={stripeReady} />
                     </StepContent>
                   </Step>
-                )}
-                <Step active>
-                  <StepLabel>
-                    {t(
-                      `event.tickets.stepper.3.${values.isPaymentVerify ? 'title_verify' : 'title'}`
-                    )}
-                  </StepLabel>
-                  <StepContent sx={{ pr: { xs: 0 } }}>
-                    <Payment event={event} />
-                  </StepContent>
-                </Step>
-              </Stepper>
-              <Stack
-                ref={termsAndConditionsRef}
-                mt={2}
-                ml={{ xs: 1, md: 4 }}
-                sx={{ scrollMarginBottom: { xs: 220, md: 0 } }}
-              >
-                <RHFCheckbox
-                  name="termsAndConditions"
-                  label={
-                    <>
-                      <Trans
-                        text="event.tickets.terms_and_conditions"
-                        values={{
-                          termsAndConditionsCompanies: options?.termsAndConditionsCompanies
-                            ? options.termsAndConditionsCompanies.join(t('and'))
-                            : ['Eventlook', 'GoPay'].join(` ${t('and')} `),
-                        }}
-                        components={{
-                          0: <CustomLink key={2} href={links.termsAndConditions} target="_blank" />,
-                          1: <CustomLink key={1} href={links.gdpr} target="_blank" />,
-                        }}
-                      />
-                    </>
-                  }
-                />
-                {values.ticketInsurance && (
+                </Stepper>
+                <Stack
+                  ref={termsAndConditionsRef}
+                  mt={2}
+                  ml={{ xs: 1, md: 4 }}
+                  sx={{ scrollMarginBottom: { xs: 220, md: 0 } }}
+                >
                   <RHFCheckbox
-                    name="insuranceTermsAndConditions"
+                    name="termsAndConditions"
                     label={
                       <>
                         <Trans
-                          text="event.tickets.insurance.checkbox"
+                          text="event.tickets.terms_and_conditions"
+                          values={{
+                            termsAndConditionsCompanies: options?.termsAndConditionsCompanies
+                              ? options.termsAndConditionsCompanies.join(t('and'))
+                              : ['Eventlook', 'GoPay'].join(` ${t('and')} `),
+                          }}
                           components={{
                             0: (
-                              <CustomLink
-                                key={2}
-                                href="https://eventigo.s3-central.vshosting.cloud/production/colonnade/pp-storno-cz-eventlook-012026.pdf"
-                                target="_blank"
-                              />
-                            ),
-                            1: (
-                              <CustomLink
-                                key={1}
-                                href="https://eventigo.s3-central.vshosting.cloud/production/colonnade/ipid-storno-cz-112025.pdf"
-                                target="_blank"
-                              />
+                              <CustomLink key={2} href={links.termsAndConditions} target="_blank" />
                             ),
+                            1: <CustomLink key={1} href={links.gdpr} target="_blank" />,
                           }}
                         />
                       </>
                     }
                   />
-                )}
-              </Stack>
-            </Grid>
-            <Grid size={12} sx={{ display: { xs: 'block', md: 'none' } }}>
-              <Divider sx={{ borderStyle: 'dashed' }} />
+                  {values.ticketInsurance && (
+                    <RHFCheckbox
+                      name="insuranceTermsAndConditions"
+                      label={
+                        <>
+                          <Trans
+                            text="event.tickets.insurance.checkbox"
+                            components={{
+                              0: (
+                                <CustomLink
+                                  key={2}
+                                  href="https://eventigo.s3-central.vshosting.cloud/production/colonnade/pp-storno-cz-eventlook-012026.pdf"
+                                  target="_blank"
+                                />
+                              ),
+                              1: (
+                                <CustomLink
+                                  key={1}
+                                  href="https://eventigo.s3-central.vshosting.cloud/production/colonnade/ipid-storno-cz-112025.pdf"
+                                  target="_blank"
+                                />
+                              ),
+                            }}
+                          />
+                        </>
+                      }
+                    />
+                  )}
+                </Stack>
+              </Grid>
+              <Grid size={12} sx={{ display: { xs: 'block', md: 'none' } }}>
+                <Divider sx={{ borderStyle: 'dashed' }} />
+              </Grid>
+              <Grid size={{ xs: 12, md: 4 }} sx={{ mt: { xs: 0, md: 0 } }}>
+                <PaymentOverviewBox event={event} withoutPadding />
+              </Grid>
             </Grid>
-            <Grid size={{ xs: 12, md: 4 }} sx={{ mt: { xs: 0, md: 0 } }}>
-              <PaymentOverviewBox event={event} withoutPadding />
-            </Grid>
-          </Grid>
-
-          {!isIframe && (
-            <PaymentOverviewDrawer
-              event={event}
-              totalPrice={values.total}
-              termsAndConditionsRef={termsAndConditionsRef}
-              onOpenChange={setIsPaymentOverviewDrawerOpen}
+
+            {!isIframe && (
+              <PaymentOverviewDrawer
+                event={event}
+                totalPrice={values.total}
+                termsAndConditionsRef={termsAndConditionsRef}
+                onOpenChange={setIsPaymentOverviewDrawerOpen}
+              />
+            )}
+
+            <EmailConfirmation
+              open={formStep === 2 && !isIframe}
+              onClose={() => setFormStep(1)}
+              // @ts-ignore -- handleSubmit type mismatch with onConfirm prop
+              onConfirm={methods.handleSubmit(onSubmit, onInvalid)}
             />
-          )}
-
-          <EmailConfirmation
-            open={formStep === 2 && !isIframe}
-            onClose={() => setFormStep(1)}
-            // @ts-ignore -- handleSubmit type mismatch with onConfirm prop
-            onConfirm={methods.handleSubmit(onSubmit, onInvalid)}
-          />
-        </FormProvider>
+          </FormProvider>
+        </StripeCheckoutProvider>
       )}
     </Box>
   );