@eventlook/sdk 1.7.3 → 1.7.4

package/src/form/TicketForm.tsx

@@ -63,6 +63,21 @@ 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;
@@ -98,12 +113,31 @@ 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);
@@ -390,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'), {
@@ -427,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 = [
@@ -482,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) {
@@ -577,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>
   );

package/src/form/payment/StripeCheckoutProvider.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import React, { MutableRefObject, useEffect, useMemo } from 'react';
+import { useTheme } from '@mui/material';
+import { loadStripe, Appearance } from '@stripe/stripe-js';
+import { Elements, useElements, useStripe } from '@stripe/react-stripe-js';
+
+/**
+ * Imperative handle the order form uses to drive the inline Stripe payment from
+ * its own submit handler (which lives outside the <Elements> tree).
+ */
+export interface StripeCheckoutApi {
+  ready: boolean;
+  /** Validate + collect the card fields. Returns an error message, or null. */
+  submit: () => Promise<string | null>;
+  /** Confirm the server-created PaymentIntent. */
+  confirm: (clientSecret: string, returnUrl: string) => Promise<{ ok: boolean; error?: string }>;
+}
+
+// Locales the Stripe Elements UI supports; anything else falls back to auto.
+const STRIPE_LOCALES = ['cs', 'de', 'en', 'es', 'fr', 'pl', 'sk', 'it'];
+
+// Bridges the Stripe/Elements instances (only available inside <Elements>) up to
+// a ref the form's submit handler can call.
+const Bridge: React.FC<{ apiRef: MutableRefObject<StripeCheckoutApi | null> }> = ({ apiRef }) => {
+  const stripe = useStripe();
+  const elements = useElements();
+
+  useEffect(() => {
+    apiRef.current = {
+      ready: !!stripe && !!elements,
+      submit: async () => {
+        if (!elements) return 'Stripe not ready';
+        const { error } = await elements.submit();
+        return error?.message ?? null;
+      },
+      confirm: async (clientSecret, returnUrl) => {
+        if (!stripe || !elements) return { ok: false, error: 'Stripe not ready' };
+        // Resolve in-page when possible (incl. the 3-D Secure modal); Stripe
+        // only does a full redirect when the method strictly requires it.
+        const confirmParams = { return_url: returnUrl };
+
+        // Free (0-amount) orders confirm a SetupIntent (seti_…) — card
+        // verification for bot protection, no charge; paid orders confirm a
+        // PaymentIntent (pi_…).
+        if (clientSecret.startsWith('seti_')) {
+          const { error, setupIntent } = await stripe.confirmSetup({
+            elements,
+            clientSecret,
+            confirmParams,
+            redirect: 'if_required',
+          });
+          if (error) return { ok: false, error: error.message };
+          return { ok: setupIntent?.status === 'succeeded' };
+        }
+
+        const { error, paymentIntent } = await stripe.confirmPayment({
+          elements,
+          clientSecret,
+          confirmParams,
+          redirect: 'if_required',
+        });
+        if (error) return { ok: false, error: error.message };
+        const ok =
+          !!paymentIntent &&
+          (paymentIntent.status === 'succeeded' || paymentIntent.status === 'processing');
+        return { ok };
+      },
+    };
+    return () => {
+      apiRef.current = null;
+    };
+  }, [stripe, elements, apiRef]);
+
+  return null;
+};
+
+interface Props {
+  /** Mount Elements only when a Stripe method is offered and the key is loaded. */
+  active: boolean;
+  publishableKey: string | null;
+  /** 'payment' for paid orders, 'setup' for free (0-amount) card verification. */
+  mode: 'payment' | 'setup';
+  /** Charge amount in minor units (used by Elements; the server intent is authoritative). */
+  amount: number;
+  currency: string;
+  locale: string;
+  apiRef: MutableRefObject<StripeCheckoutApi | null>;
+  children: React.ReactNode;
+}
+
+/**
+ * Wraps the order form in a deferred-mode <Elements> provider so the Payment
+ * Element can be shown inline (expanded under the selected method) before the
+ * order — and its PaymentIntent — exists. When no Stripe method is on offer it
+ * renders children untouched and loads nothing.
+ */
+const StripeCheckoutProvider: React.FC<Props> = ({
+  active,
+  publishableKey,
+  mode,
+  amount,
+  currency,
+  locale,
+  apiRef,
+  children,
+}) => {
+  const theme = useTheme();
+  const stripePromise = useMemo(
+    () => (active && publishableKey ? loadStripe(publishableKey) : null),
+    [active, publishableKey]
+  );
+
+  if (!active || !stripePromise) return <>{children}</>;
+
+  const stripeLocale = STRIPE_LOCALES.includes(locale) ? locale : 'auto';
+
+  // Drive the Stripe Element off the host MUI theme so it matches light/dark and
+  // the brand colors instead of Stripe's default white card.
+  const appearance: Appearance = {
+    theme: theme.palette.mode === 'dark' ? 'night' : 'stripe',
+    variables: {
+      colorPrimary: theme.palette.primary.main,
+      colorBackground: theme.palette.background.paper,
+      colorText: theme.palette.text.primary,
+      colorTextSecondary: theme.palette.text.secondary,
+      colorDanger: theme.palette.error.main,
+      fontFamily: String(theme.typography.fontFamily ?? 'inherit'),
+      borderRadius: `${Number(theme.shape.borderRadius) || 8}px`,
+    },
+  };
+
+  return (
+    <Elements
+      stripe={stripePromise}
+      options={{
+        // Free orders verify the card (SetupIntent, no charge); paid orders
+        // charge it (PaymentIntent, needs an amount).
+        ...(mode === 'setup'
+          ? { mode: 'setup' as const }
+          : { mode: 'payment' as const, amount: Math.max(1, Math.round(amount)) }),
+        currency: currency.toLowerCase(),
+        paymentMethodTypes: ['card'],
+        locale: stripeLocale as 'auto',
+        appearance,
+      }}
+    >
+      <Bridge apiRef={apiRef} />
+      {children}
+    </Elements>
+  );
+};
+
+export default StripeCheckoutProvider;

package/src/form/tickets/TicketSelectionMobile.tsx

@@ -174,7 +174,7 @@ const TicketSelectionMobile: React.FC<Props> = ({
               key={release.id}
               sx={{
                 pt: 1,
-                pr: 0.5,
+                pr: 1.5,
                 pb: 0.5,
                 pl: 2,
                 borderRadius: 1,