tf-checkout-react 1.6.6 → 1.7.1

package/src/components/billing-info-container/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './style.css'
 
 import { CircularProgress, ThemeOptions } from '@mui/material'
@@ -5,6 +6,7 @@ import Backdrop from '@mui/material/Backdrop'
 import Button from '@mui/material/Button'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { CSSProperties } from '@mui/styles'
+import { Stripe, StripeElementsOptions } from '@stripe/stripe-js'
 import axios, { AxiosError } from 'axios'
 import { Field, Form, Formik, FormikHelpers, FormikProps, FormikValues } from 'formik'
 import _find from 'lodash/find'
@@ -16,22 +18,25 @@ import _isEmpty from 'lodash/isEmpty'
 import _isEqual from 'lodash/isEqual'
 import _map from 'lodash/map'
 import { nanoid } from 'nanoid'
-import React, { FC, useEffect, useRef, useState } from 'react'
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
 
 import {
   AttributesConfig,
   getCart,
   getCheckoutPageConfigs,
   getCountries,
+  getPaymentData,
   getProfileData,
   getStates,
   postOnCheckout,
   register,
   setCustomHeader,
 } from '../../api'
+import { updateCheckout } from '../../api/checkout'
 import { withCustomFields } from '../../hoc'
 import { usePixel } from '../../hooks/usePixel'
 import { IBillingInfoData } from '../../types'
+import { ICheckoutResponseData } from '../../types/api/checkout'
 import {
   createCheckoutDataBodyWithDefaultHolder,
   deleteCookieByName,
@@ -40,21 +45,27 @@ import {
   setLoggedUserData,
 } from '../../utils'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
+import { AddonsContainter, IAddonContainterProps } from '../addonsContainer'
+import SimpleAddonsContainer from '../addonsContainer/SimpleAddonsContainer'
 import SnackbarAlert from '../common/SnackbarAlert'
 import { ForgotPasswordModal } from '../forgotPasswordModal'
 import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
 import { LoginModal } from '../loginModal'
+import { IPaymentPage, PaymentContainer } from '../paymentContainer'
 import { SignupModal } from '../signupModal'
 import TimerWidget from '../timerWidget'
+import { usePaymentRedirect, useStripePayment } from './hooks'
 import {
   assingUniqueIds,
   createCheckoutDataBody,
   createRegisterFormData,
+  filterBillingInfoFields,
   getFieldComponent,
   getFieldLabel,
   getInitialValues,
   getValidateFunctions,
   ICheckoutBody,
+  renderComponentWithProps,
 } from './utils'
 
 export interface IBillingInfoPage {
@@ -64,7 +75,9 @@ export interface IBillingInfoPage {
     values: FormikValues,
     formikHelpers: FormikHelpers<FormikValues>,
     eventId: any,
-    res: any
+    res: any,
+    checkoutUpdateResponse?: any,
+    paymentResponse?: any
   ) => void;
   onRegisterSuccess?: (value: any) => void;
   onRegisterError?: (e: AxiosError, email: string) => void;
@@ -82,8 +95,11 @@ export interface IBillingInfoPage {
   onLogin?: () => void;
   onLoginSuccess?: () => void;
   onErrorClose?: () => void;
+  onCheckoutUpdateSuccess?: (res: any) => void;
+  onCheckoutUpdateError?: (e: AxiosError) => void;
   initialValues?: FormikValues;
   buttonName?: string;
+  freeOrderButtonName?: string;
   theme?: 'light' | 'dark';
   isLoggedIn?: boolean;
   accountInfoTitle?: string | JSX.Element;
@@ -110,11 +126,18 @@ export interface IBillingInfoPage {
   customFieldsOrderKeys?: string[];
   customFieldsTicketHolderKeys?: string[];
   onPendingVerification?: () => void;
+  includeAddons?: boolean;
+  addonsProps?: IAddonContainterProps;
+  addOnDataWithCustomFields?: any;
+  isSinglePageCheckout?: boolean;
+  paymentProps?: Partial<IPaymentPage>;
+  paymentSectionAddon?: React.ReactNode;
 }
 
 const LogicRunner: FC<{
   brandOptIn?: boolean;
   values: any;
+  errors: any;
   setStates: React.Dispatch<any>;
   setFieldValue: any;
   setValues: any;
@@ -133,72 +156,72 @@ const LogicRunner: FC<{
   shouldFetchCountries,
   brandOptIn,
 }) => {
-    const prevCountry = useRef(values.country)
-    useEffect(() => {
-      const fetchStates = async () => {
-        try {
-          const res = await getStates(values.country)
-          const mappedStates = _map(res.data, (item, key) => ({
-            label: item,
-            value: key,
-          }))
-          setStates(mappedStates)
-          if (prevCountry.current !== values.country) {
-            const stateExists = mappedStates.find(
-              state => state.value === values.state
-            )?.value
-            setFieldValue('state', stateExists ?? mappedStates[0]?.value ?? '')
-            prevCountry.current = values.country
-          }
-          onGetStatesSuccess(res.data)
-        } catch (e) {
-          if (axios.isAxiosError(e)) {
-            onGetStatesError(e)
-          }
+  const prevCountry = useRef(values.country)
+  useEffect(() => {
+    const fetchStates = async () => {
+      try {
+        const res = await getStates(values.country)
+        const mappedStates = _map(res.data, (item, key) => ({
+          label: item,
+          value: key,
+        }))
+        setStates(mappedStates)
+        if (prevCountry.current !== values.country) {
+          const stateExists = mappedStates.find(
+            state => state.value === values.state
+          )?.value
+          setFieldValue('state', stateExists ?? mappedStates[0]?.value ?? '')
+          prevCountry.current = values.country
+        }
+        onGetStatesSuccess(res.data)
+      } catch (e) {
+        if (axios.isAxiosError(e)) {
+          onGetStatesError(e)
         }
       }
-      shouldFetchCountries && fetchStates()
-    }, [values.country, setStates, setFieldValue])
-    const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
-    useEffect(() => {
-      // set user data from local storage
-      const getStoredUserData = () => {
-        if (isBrowser) {
-          if (userDataEncoded) {
-            try {
-              const parsedData = JSON.parse(userDataEncoded)
-              const mappedValues = {
-                firstName: parsedData?.first_name || parsedData?.firstName || '',
-                lastName: parsedData?.last_name || parsedData?.lastName || '',
-                email: parsedData?.email || '',
-                phone: parsedData?.phone || '',
-                confirmEmail: parsedData?.email || '',
-                state: parsedData?.state || '',
-                street_address: parsedData?.street_address || '',
-                country: parsedData?.country || '1',
-                zip: parsedData?.zip || '',
-                brand_opt_in: brandOptIn ? brandOptIn : parsedData?.brand_opt_in || false,
-                city: parsedData?.city || '',
-                confirmPassword: '',
-                password: '',
-                'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
-                'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
-                'holderEmail-0': parsedData?.email || '',
-              }
+    }
+    shouldFetchCountries && fetchStates()
+  }, [values.country, setStates, setFieldValue])
+  const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
+  useEffect(() => {
+    // set user data from local storage
+    const getStoredUserData = () => {
+      if (isBrowser) {
+        if (userDataEncoded) {
+          try {
+            const parsedData = JSON.parse(userDataEncoded)
+            const mappedValues = {
+              firstName: parsedData?.first_name || parsedData?.firstName || '',
+              lastName: parsedData?.last_name || parsedData?.lastName || '',
+              email: parsedData?.email || '',
+              phone: parsedData?.phone || '',
+              confirmEmail: parsedData?.email || '',
+              state: parsedData?.state || '',
+              street_address: parsedData?.street_address || '',
+              country: parsedData?.country || '1',
+              zip: parsedData?.zip || '',
+              brand_opt_in: brandOptIn ? brandOptIn : parsedData?.brand_opt_in || false,
+              city: parsedData?.city || '',
+              confirmPassword: '',
+              password: '',
+              'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
+              'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
+              'holderEmail-0': parsedData?.email || '',
+            }
 
-              const extraDataJSON = window.localStorage.getItem('extraData')
-              const extraData = extraDataJSON ? JSON.parse(extraDataJSON) : null
+            const extraDataJSON = window.localStorage.getItem('extraData')
+            const extraData = extraDataJSON ? JSON.parse(extraDataJSON) : null
 
-              setValues({ ...values, ...mappedValues, ...(extraData ?? {}) })
-              setUserValues(mappedValues)
-            } catch (e) {}
-          }
+            setValues({ ...values, ...mappedValues, ...(extraData ?? {}) })
+            setUserValues(mappedValues)
+          } catch (e) {}
         }
       }
-      getStoredUserData()
-    }, [userDataEncoded, setValues, setUserValues])
-    return null
-  }
+    }
+    getStoredUserData()
+  }, [userDataEncoded, setValues, setUserValues, brandOptIn])
+  return null
+}
 
 const BillingInfoContainer = React.memo(
   ({
@@ -209,6 +232,7 @@ const BillingInfoContainer = React.memo(
     },
     initialValues = {},
     buttonName = 'Submit',
+    freeOrderButtonName = 'Complete Registration',
     handleSubmit = _identity,
     theme = 'light',
     onRegisterSuccess = _identity,
@@ -224,6 +248,8 @@ const BillingInfoContainer = React.memo(
     onGetProfileDataError = _identity,
     onLogin,
     onLoginSuccess = _identity,
+    onCheckoutUpdateSuccess = _identity,
+    onCheckoutUpdateError = _identity,
     isLoggedIn: pIsLoggedIn = false,
     accountInfoTitle = '',
     hideLogo,
@@ -249,12 +275,20 @@ const BillingInfoContainer = React.memo(
     onPendingVerification = _identity,
     onGetCheckoutConfigsSuccess = _identity,
     onGetCheckoutConfigsError = _identity,
+    includeAddons = false,
+    addonsProps,
+    addOnDataWithCustomFields,
+    isSinglePageCheckout = false,
+    paymentProps = {},
+    paymentSectionAddon,
   }: IBillingInfoPage) => {
     const [extraData, setExtraData] = useState(null)
     const [isConfigLoading, setIsConfigLoading] = useState(true)
     const [configs, setConfigs] = useState<null | AttributesConfig>(null)
     const [isNewUser, setIsNewUser] = useState(false)
     const themeMui = createTheme(themeOptions)
+    const elementsRef = useRef<any>(null)
+    const stripeRef = useRef<Stripe | null>(null)
 
     useEffect(() => {
       if (isBrowser) {
@@ -280,8 +314,15 @@ const BillingInfoContainer = React.memo(
     const defaultCountry = isBrowser ? window.localStorage.getItem('eventCountry') : ''
     const userData =
       isBrowser && window.localStorage.getItem('user_data')
-        ? JSON.parse(window.localStorage.getItem('user_data') || '')
+        ? JSON.parse(window.localStorage.getItem('user_data') || '{}')
         : {}
+    const additionalConfigs =
+      isBrowser && window.localStorage.getItem('checkoutAdditionalConfigs')
+        ? JSON.parse(
+            window.localStorage.getItem('checkoutAdditionalConfigs') ||
+              '{"resale": false, "resaleWithAddons": false}'
+          )
+        : { resale: false, resaleWithAddons: false }
     const [dataWithUniqueIds, setDataWithUniqueIds] = useState<IBillingInfoData[]>(
       assingUniqueIds(data)
     )
@@ -314,7 +355,7 @@ const BillingInfoContainer = React.memo(
     const [loading, setLoading] = useState(true)
     const [cardLoading, setCardLoading] = useState(false)
     const [isCountriesLoading, setIsCountriesLoading] = useState(true)
-    const [error, setError] = useState(null)
+    const [error, setError] = useState<string | null>(null)
     const [phoneValidationIsLoading, setPhoneValidationIsLoading] = useState(false)
     const emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '')
     const firstNameLogged =
@@ -349,18 +390,27 @@ const BillingInfoContainer = React.memo(
     const hideInstagramField = !collectMandatoryInstagram && !collectOptionalInstagram
     const collectMandatoryBusinessCategory = configs?.collect_mandatory_business_category
     const collectOptionalBusinessCategory = configs?.collect_optional_business_category
+    const eventHasAddons = configs?.has_add_on
     const hideBusinessCategoryField =
       !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory
 
-    const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
-
-    // Get prevProps
+    const [pendingVerificationMessage, setPendingVerificationMessage] = useState<string>()
+    const [reviewData, setReviewData] = useState<any>({})
+    const [checkoutData, setCheckoutData] = useState<any>({})
+    const [checkoutUpdateData, setCheckoutUpdateData] =
+      useState<ICheckoutResponseData | null>(null)
     const prevData = useRef(data)
 
-    const addAddOnsInAttributes = (checkoutBody: any) => {
+    const addAddOnsInAttributes = useCallback((checkoutBody: any) => {
       const selectedAddOns = window.localStorage.getItem('add_ons') || '{}'
+      const addOnDataCapture = window.localStorage.getItem('add_on_data_capture') || '{}'
+
       checkoutBody.attributes.add_ons = JSON.parse(selectedAddOns)
-    }
+      checkoutBody.attributes.add_on_data_capture = JSON.parse(addOnDataCapture)
+    }, [])
+    const [singleCheckoutAddons, setSingleCheckoutAddOns] = useState<any>({})
+
+    const orderIsFree = !Number(checkoutData?.total)
 
     useEffect(() => {
       const hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId')
@@ -373,13 +423,13 @@ const BillingInfoContainer = React.memo(
       }
     }, [dataWithUniqueIds, data])
 
-    const getQuantity = (cart: any = []) => {
+    const getQuantity = useCallback((cart: any = []) => {
       let qty = 0
       cart.forEach((item: any) => {
         qty += +item.quantity
       })
       return qty
-    }
+    }, [])
 
     useEffect(() => {
       if (pIsLoggedIn !== isLoggedIn || xtfCookie) {
@@ -407,10 +457,22 @@ const BillingInfoContainer = React.memo(
       shouldFetchCountries && fetchCountries()
       fetchCart()
 
+      // Initialize checkout with event_id on first load
+      if (isSinglePageCheckout && eventId) {
+        updateCheckoutWithAddOns()
+      }
+
       return () => {
         isBrowser && localStorage.removeItem('selectedTicketsQuantity')
       }
-    }, [])
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+      eventId,
+      isSinglePageCheckout,
+      shouldFetchCountries,
+      onGetCountriesSuccess,
+      onGetCountriesError,
+    ])
 
     // fetch cart data
     const fetchCart = async () => {
@@ -459,6 +521,45 @@ const BillingInfoContainer = React.memo(
       fetchCart()
     }, [isLoggedIn])
 
+    useEffect(() => {
+      const fetchCheckoutUpdate = async () => {
+        if (!eventId) return
+
+        try {
+          const checkoutUpdateResponse = await updateCheckout({
+            attributes: {
+              event_id: eventId,
+              is_from_resale: additionalConfigs?.resale,
+            },
+          })
+          console.log('Stripe in [useEffect] fetchCheckoutUpdate', checkoutUpdateResponse)
+
+          if (checkoutUpdateResponse.success) {
+            const checkoutAttributes = checkoutUpdateResponse.data.attributes
+            const cartPriceBreakdown = _get(
+              checkoutAttributes,
+              'cart_price_breakdown',
+              {}
+            )
+            localStorage.setItem(
+              'checkoutData',
+              JSON.stringify({ hash: '', total: _get(cartPriceBreakdown, 'total', 0) })
+            )
+            console.log(
+              'Stripe in [useEffect] fetchCheckoutUpdate | checkoutAttributes',
+              checkoutAttributes
+            )
+            setCheckoutUpdateData(checkoutAttributes)
+            onCheckoutUpdateSuccess({ expires_at: expirationTime, ...cartPriceBreakdown })
+          }
+        } catch (error) {
+          console.error('Failed to fetch checkout update:', error)
+        }
+      }
+
+      fetchCheckoutUpdate()
+    }, [eventId, additionalConfigs?.resale])
+
     useEffect(() => {
       const collectPaymentData = async () => {
         if (
@@ -481,12 +582,13 @@ const BillingInfoContainer = React.memo(
 
             const checkoutResponse = await postOnCheckout(checkoutBody, flagFreeTicket)
             removeReferralKey()
+            removeAdditionalConfigs()
             onSkipBillingPage(checkoutResponse.data.attributes)
             setLoading(false)
           } catch (e) {
-            onSubmitError(e)
-            if (e.response?.data?.data?.hasUnverifiedOrder) {
-              setPendingVerificationMessage(e.response?.data?.message)
+            onSubmitError(e as AxiosError)
+            if (_get(e, 'response.data.data.hasUnverifiedOrder')) {
+              setPendingVerificationMessage(_get(e, 'response.data.message'))
             }
           }
         } else {
@@ -496,91 +598,266 @@ const BillingInfoContainer = React.memo(
       collectPaymentData()
     }, [skipPage, ticketsQuantity])
 
-    const collectCheckoutBody = (
-      values: Record<string, any>,
-      profileData?: any
-    ): Record<string, any> => {
-      let checkoutBody = {} as ICheckoutBody
-
-      // Auto collect ticket holders name when it was skipped optionally
-      if (showDOB && !showTicketHolders && canSkipHolderNames) {
-        checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-          ticketsQuantity.length,
-          values,
-          true,
-          { emailLogged, firstNameLogged, lastNameLogged }
-        )
-      } else {
-        checkoutBody = createCheckoutDataBody(
-          ticketsQuantity.length,
-          values,
-          {
-            emailLogged: emailLogged || profileData.email,
-            firstNameLogged:
-              firstNameLogged || profileData.first_name || profileData.firstName,
-            lastNameLogged:
-              lastNameLogged || profileData.last_name || profileData.lastName,
-          },
-          showDOB
-        )
-      }
+    const collectCheckoutBody = useCallback(
+      (values: Record<string, any>, profileData?: any): Record<string, any> => {
+        let checkoutBody = {} as ICheckoutBody
 
-      // Collect data_capture for Order Custom Fields
-      const data_capture: Record<string, any> = {}
-      _forEach(customFieldsOrderKeys, (key: string) => {
-        data_capture[key] = values[key]
+        // Auto collect ticket holders name when it was skipped optionally
+        if (showDOB && !showTicketHolders && canSkipHolderNames) {
+          checkoutBody = createCheckoutDataBodyWithDefaultHolder(
+            ticketsQuantity.length,
+            values,
+            true,
+            { emailLogged, firstNameLogged, lastNameLogged }
+          )
+        } else {
+          checkoutBody = createCheckoutDataBody(
+            ticketsQuantity.length,
+            values,
+            {
+              emailLogged: emailLogged || profileData.email,
+              firstNameLogged:
+                firstNameLogged || profileData.first_name || profileData.firstName,
+              lastNameLogged:
+                lastNameLogged || profileData.last_name || profileData.lastName,
+            },
+            showDOB
+          )
+        }
 
-        // Delete from values list
-        delete checkoutBody.attributes[key]
-      })
+        // Collect data_capture for Order Custom Fields
+        const data_capture: Record<string, any> = {}
+        _forEach(customFieldsOrderKeys, (key: string) => {
+          data_capture[key] = values[key]
 
-      // Temp solution for hardcoded data capture values, to be deleted in the future
-      const captureKeys = [
-        'businessCategory',
-        'company',
-        'instagram',
-        'jobTitle',
-        'wallet_address',
-      ]
+          // Delete from values list
+          delete checkoutBody.attributes[key]
+        })
 
-      captureKeys.forEach(key => {
-        const path = `data_capture.${key}`
-        const value = _get(values, path, '')
+        // Temp solution for hardcoded data capture values, to be deleted in the future
+        const captureKeys = [
+          'businessCategory',
+          'company',
+          'instagram',
+          'jobTitle',
+          'wallet_address',
+        ]
 
-        if (value !== '') {
-          data_capture[key] = value
-        }
+        captureKeys.forEach(key => {
+          const path = `data_capture.${key}`
+          const value = _get(values, path, '')
 
-        const attributeKey = `data_capture[${key}]`
-        delete checkoutBody.attributes?.[attributeKey]
-      })
+          if (value !== '') {
+            data_capture[key] = value
+          }
+
+          const attributeKey = `data_capture[${key}]`
+          delete checkoutBody.attributes?.[attributeKey]
+        })
+
+        // Collect data_capture for Ticket Holders Fields
+        _forEach(checkoutBody.attributes.ticket_holders, (holder, holderIndex) => {
+          const holderDataCapture: Record<string, any> = {}
+
+          _forEach(customFieldsTicketHolderKeys, customFieldKey => {
+            const customFieldHolderName = `${customFieldKey}-${holderIndex}`
+            const customFieldHolderKey = values[customFieldHolderName] || ''
+            holderDataCapture[customFieldKey] = customFieldHolderKey
 
-      // Collect data_capture for Ticket Holders Fields
-      _forEach(checkoutBody.attributes.ticket_holders, (holder, holderIndex) => {
-        const holderDataCapture: Record<string, any> = {}
+            // Delete holder specific value from values list
+            delete checkoutBody.attributes[customFieldHolderName]
+          })
+
+          // Assign Ticket Holder data_capture final value
+          if (!_isEmpty(holderDataCapture)) {
+            holder.ticket_data_capture = holderDataCapture
+          }
+        })
+
+        // Collect add_on_data_capture for Add-on Custom Fields
+        const add_on_data_capture: Record<string, any> = {}
+        _forEach(values, (val: any, key: string) => {
+          // Matches keys like: `${addonId}-${groupId}-${fieldKey}` created in AddonComponent
+          const match = key.match(/^(\d+)-\d+-(.+)$/)
+          if (match) {
+            const addonId = match[1]
+            const fieldKey = match[2]
+
+            // Initialize addon bucket
+            if (!add_on_data_capture[addonId]) {
+              add_on_data_capture[addonId] = {}
+            }
 
-        _forEach(customFieldsTicketHolderKeys, customFieldKey => {
-          const customFieldHolderName = `${customFieldKey}-${holderIndex}`
-          const customFieldHolderKey = values[customFieldHolderName] || ''
-          holderDataCapture[customFieldKey] = customFieldHolderKey
+            add_on_data_capture[addonId][fieldKey] = val
 
-          // Delete holder specific value from values list
-          delete checkoutBody.attributes[customFieldHolderName]
+            // Remove the raw form key from attributes to avoid leaking internals
+            delete checkoutBody.attributes[key]
+          }
         })
 
-        // Assign Ticket Holder data_capture final value
-        if (!_isEmpty(holderDataCapture)) {
-          holder.ticket_data_capture = holderDataCapture
+        // Also include add_on_data_capture from localStorage for single-page checkout
+        if (isBrowser) {
+          const storedAddOnDataCapture = localStorage.getItem('add_on_data_capture')
+          if (storedAddOnDataCapture) {
+            const parsed = JSON.parse(storedAddOnDataCapture)
+            Object.keys(parsed).forEach(addonId => {
+              if (!add_on_data_capture[addonId]) {
+                add_on_data_capture[addonId] = {}
+              }
+              Object.keys(parsed[addonId]).forEach(fieldKey => {
+                add_on_data_capture[addonId][fieldKey] = parsed[addonId][fieldKey]
+              })
+            })
+          }
         }
-      })
 
-      return { attributes: { ...checkoutBody.attributes, data_capture } }
-    }
+        const mergedAttributes: Record<string, any> = {
+          ...checkoutBody.attributes,
+          data_capture,
+        }
+
+        if (!_isEmpty(add_on_data_capture)) {
+          mergedAttributes.add_on_data_capture = add_on_data_capture
+        }
+
+        return { attributes: mergedAttributes }
+      },
+      [
+        showDOB,
+        showTicketHolders,
+        canSkipHolderNames,
+        customFieldsOrderKeys,
+        ticketsQuantity.length,
+        emailLogged,
+        firstNameLogged,
+        lastNameLogged,
+        customFieldsTicketHolderKeys,
+      ]
+    )
 
-    const removeReferralKey = () => {
+    const removeReferralKey = useCallback(() => {
       localStorage.removeItem('referral_key')
-    }
+    }, [])
+
+    const removeAdditionalConfigs = useCallback(() => {
+      localStorage.removeItem('checkoutAdditionalConfigs')
+    }, [])
+
+    useEffect(() => {
+      onCheckoutUpdateSuccess({ expires_at: expirationTime, ...checkoutData })
+    }, [checkoutData, cartInfoData])
+
+    // Initialize payment hooks
+    usePaymentRedirect({
+      stripeRef,
+      setError,
+      setLoading,
+      removeReferralKey,
+      removeAdditionalConfigs,
+      handleSubmit,
+      isBrowser,
+    })
+
+    const { processPayment } = useStripePayment({
+      stripeRef,
+      elementsRef,
+      setError,
+      isBrowser,
+    })
+
+    const updateCheckoutWithAddOns = useCallback(
+      async (addOns: { [key: string]: number } = {}) => {
+        if (!isSinglePageCheckout) return
+
+        const mergedAddOns = { ...singleCheckoutAddons }
+
+        // Update existing entries and add new ones
+        Object.entries(addOns).forEach(([key, value]) => {
+          const amount = Number(value)
+          if (amount) {
+            mergedAddOns[key] = amount
+          } else {
+            delete mergedAddOns[key]
+          }
+        })
+
+        try {
+          const checkoutUpdateData = {
+            attributes: {
+              event_id: eventId,
+              add_ons: mergedAddOns,
+              is_from_resale: additionalConfigs?.resale,
+            },
+          }
+
+          const checkoutResponse = await updateCheckout(checkoutUpdateData)
+
+          if (checkoutResponse.success) {
+            const checkoutDataObj = _get(
+              checkoutResponse,
+              'data.attributes.cart_price_breakdown',
+              {}
+            )
+            setCheckoutData(checkoutDataObj)
+            setSingleCheckoutAddOns(mergedAddOns)
+          }
+        } catch (error) {
+          const errorMessage = _get(
+            error,
+            'response.data.message',
+            'Failed to update add-ons'
+          )
+          setError(errorMessage)
+          onCheckoutUpdateError(error as AxiosError)
+        }
+      },
+      [eventId, isSinglePageCheckout, onCheckoutUpdateError, onCheckoutUpdateSuccess]
+    )
+    console.log({ checkoutData })
+
+    const handleAddOnSelect = useCallback(
+      async (selectedAddOns: { [key: string]: number }) => {
+        await updateCheckoutWithAddOns(selectedAddOns)
+      },
+      [updateCheckoutWithAddOns]
+    )
+
+    const onAddOnSelect = useCallback(
+      (id: string, value: string, addon: any, fieldUpdates: Record<string, any> = {}) => {
+        const quantity = parseInt(value) || 0
+        const addonId = addon.id || id
+
+        // Get current add-ons and their custom fields
+        const currentAddOns = JSON.parse(localStorage.getItem('add_ons') || '{}')
+        const currentDataCapture = JSON.parse(
+          localStorage.getItem('add_on_data_capture') || '{}'
+        )
+
+        // Update quantities
+        const updatedAddOns = { ...currentAddOns }
+        updatedAddOns[addonId] = quantity
 
+        // Update custom fields if any
+        const updatedDataCapture = { ...currentDataCapture }
+        if (Object.keys(fieldUpdates).length > 0) {
+          updatedDataCapture[addonId] = {
+            ...(updatedDataCapture[addonId] || {}),
+            ...fieldUpdates,
+          }
+        }
+
+        if (quantity === 0 && updatedDataCapture[addonId]) {
+          delete updatedDataCapture[addonId]
+        }
+        // Save to localStorage
+        localStorage.setItem('add_ons', JSON.stringify(updatedAddOns))
+        localStorage.setItem('add_on_data_capture', JSON.stringify(updatedDataCapture))
+
+        // Call handleAddOnSelect with the updated addons object
+        handleAddOnSelect(updatedAddOns)
+      },
+      [handleAddOnSelect]
+    )
     if (loading || (enableTimer && !expirationTime && isBrowser)) {
       if (expirationTime === 0) {
         // Redirect to homepage (countdown finished and browser reloaded case)
@@ -597,20 +874,38 @@ const BillingInfoContainer = React.memo(
     if (isTable) {
       dataWithUniqueIds[0].label = 'Get Your Tables'
     }
+
+    const stripePublishableKey =
+      reviewData?.payment_method?.stripe_publishable_key ||
+      checkoutUpdateData?.additional_payment_information?.basic_config?.apiKey
+    const stripeAccountId =
+      reviewData?.payment_method?.stripe_connected_account ||
+      checkoutUpdateData?.additional_payment_information?.basic_config?.accountId
+    const addOnsIncludedOnInvitation =
+      additionalConfigs.resale && additionalConfigs.resaleWithAddons
+
+    const elementsOptions: StripeElementsOptions = {
+      ...checkoutUpdateData?.additional_payment_information?.elements_config,
+    }
+
+    if (loading || cardLoading || isCountriesLoading || isConfigLoading || !eventId) {
+      return (
+        <Backdrop
+          sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
+          open={true}
+        >
+          <CircularProgress color="inherit" />
+        </Backdrop>
+      )
+    }
+
     return (
       <ThemeProvider theme={themeMui}>
-        {(loading || cardLoading || isCountriesLoading || isConfigLoading) && (
-          <Backdrop
-            sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
-            open={true}
-          >
-            <CircularProgress color="inherit" />
-          </Backdrop>
-        )}
         {!!expirationTime && enableTimer && (
           <TimerWidget
             expires_at={expirationTime}
             onCountdownFinish={onCountdownFinish}
+            container={isSinglePageCheckout ? 'body' : ''}
           />
         )}
         {!isCountriesLoading && !isConfigLoading && (
@@ -619,8 +914,9 @@ const BillingInfoContainer = React.memo(
               dataWithUniqueIds,
               {
                 country: initialCountry,
-                state: _get(userData, 'stateId', '') || '1',
-                brand_opt_in: optedInFieldValue,
+                state:
+                  _get(userData, 'stateId', '') || _get(userData, 'state', '') || '1',
+                brand_opt_in: Boolean(optedInFieldValue),
                 ttf_opt_in: ttfOptIn,
                 data_capture: {
                   instagram: _get(extraData, 'data_capture.instagram', ''),
@@ -637,6 +933,16 @@ const BillingInfoContainer = React.memo(
             enableReinitialize={false}
             onSubmit={async (values, formikHelpers) => {
               try {
+                if ((!elementsRef.current || !stripeRef.current) && !orderIsFree) {
+                  setError('Fill in the payment details')
+                  return
+                }
+
+                if (isSinglePageCheckout && !orderIsFree) {
+                  // For PaymentElement, we'll use confirmPayment directly
+                  // No need to create payment method separately
+                }
+
                 if (isBrowser) {
                   window.localStorage.setItem(
                     'extraData',
@@ -654,124 +960,213 @@ const BillingInfoContainer = React.memo(
                     })
                   )
                 }
-                if (isLoggedIn) {
-                  const checkoutBody = collectCheckoutBody(values, userData)
-
-                  if (isBrowser) {
-                    addAddOnsInAttributes(checkoutBody)
-                  }
 
-                  const checkoutResponse = await postOnCheckout(
-                    checkoutBody,
+                if (!isLoggedIn) {
+                  const checkoutBodyForRegistration = createCheckoutDataBody(
+                    ticketsQuantity.length,
+                    values,
+                    { emailLogged, firstNameLogged, lastNameLogged },
+                    showDOB
+                  )
+                  const bodyFormData = createRegisterFormData(
+                    values,
+                    checkoutBodyForRegistration,
                     flagFreeTicket
                   )
-                  removeReferralKey()
-                  // After checkout is successful recover updated profile and store it on local storage if needed
-                  if (isBrowser) {
-                    const updatedUserData = await getProfileData()
-                    const profileSpecifiedData = _get(updatedUserData, 'data')
-                    const profileDataObj = setLoggedUserData(profileSpecifiedData)
-                    window.localStorage.setItem(
-                      'user_data',
-                      JSON.stringify(profileDataObj)
+                  try {
+                    setLoading(true)
+                    const resRegister = await register(bodyFormData)
+                    const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
+                    const refreshToken = _get(
+                      resRegister,
+                      'data.attributes.refresh_token'
                     )
-                  }
+                    const userProfile = _get(resRegister, 'data.attributes.user_profile')
 
-                  handleSubmit(
-                    values,
-                    formikHelpers as FormikHelpers<any>,
-                    eventId,
-                    checkoutResponse
-                  )
-                  return
-                }
-                const checkoutBodyForRegistration = createCheckoutDataBody(
-                  ticketsQuantity.length,
-                  values,
-                  { emailLogged, firstNameLogged, lastNameLogged },
-                  showDOB
-                )
-                const bodyFormData = createRegisterFormData(
-                  values,
-                  checkoutBodyForRegistration,
-                  flagFreeTicket
-                )
-                try {
-                  setLoading(true)
-                  const resRegister = await register(bodyFormData)
-                  const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
-                  const refreshToken = _get(resRegister, 'data.attributes.refresh_token')
-                  const userProfile = _get(resRegister, 'data.attributes.user_profile')
-
-                  setIsNewUser(true)
-                  onRegisterSuccess({
-                    xtfCookie,
-                    refreshToken,
-                    userProfile,
-                  })
-                } catch (e) {
-                  setLoading(false)
-
-                  if (e.response?.data?.data?.hasUnverifiedOrder) {
-                    setPendingVerificationMessage(e.response?.data?.message)
-                  } else if (axios.isAxiosError(e)) {
-                    const error = e?.response?.data?.message
-                    if (_includes(error, 'You must be aged')) {
-                      formikHelpers.setFieldError('holderAge', error)
-                    }
-                    if (error?.password) {
-                      formikHelpers.setFieldError('password', error.password)
-                      formikHelpers.setFieldError('confirmPassword', error.password)
-                    }
-                    if (error?.email && !onLogin) {
-                      // False will stand for outside controll
-                      setAlreadyHasUser(true)
-                      setShowModalLogin(true)
-                    }
+                    setIsNewUser(true)
+                    onRegisterSuccess({
+                      xtfCookie,
+                      refreshToken,
+                      userProfile,
+                    })
+                  } catch (e) {
+                    setLoading(false)
+                    const hasUnverifiedOrder = _get(
+                      e,
+                      'response.data.data.hasUnverifiedOrder'
+                    )
+                    const message = _get(e, 'response.data.message', {}) as
+                      | { password?: string | null, email?: string | null }
+                      | string
 
-                    if (
-                      _includes(error, 'The cart is expired') &&
-                      !hideErrorsAlertSection
-                    ) {
-                      setError(error)
-                    }
+                    if (hasUnverifiedOrder && typeof message === 'string') {
+                      setPendingVerificationMessage(message)
+                    } else if (axios.isAxiosError(e)) {
+                      if (
+                        _includes(message, 'You must be aged') &&
+                        typeof message === 'string'
+                      ) {
+                        formikHelpers.setFieldError('holderAge', message)
+                      }
+                      if (typeof message !== 'string' && message?.password) {
+                        formikHelpers.setFieldError('password', message.password)
+                        formikHelpers.setFieldError('confirmPassword', message.password)
+                      }
+                      if (typeof message !== 'string' && message?.email && !onLogin) {
+                        // False will stand for outside controll
+                        setAlreadyHasUser(true)
+                        setShowModalLogin(true)
+                      }
+
+                      if (
+                        _includes(error, 'The cart is expired') &&
+                        !hideErrorsAlertSection
+                      ) {
+                        setError(error)
+                      }
 
-                    onRegisterError(e, values.email)
+                      onRegisterError(e, values.email)
+                    }
+                    return
                   }
-                  return
                 }
+
                 const profileData = await getProfileData()
                 const profileSpecifiedData = _get(profileData, 'data')
                 const profileDataObj = setLoggedUserData(profileSpecifiedData)
+                const userDataObj = isLoggedIn ? userData : profileDataObj
+
                 if (isBrowser) {
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
+                  window.localStorage.setItem('user_data', JSON.stringify(userDataObj))
                 }
 
-                const checkoutBody = collectCheckoutBody(values, profileDataObj)
+                const checkoutBody = collectCheckoutBody(values, userDataObj)
 
-                if (isBrowser) {
+                if (isBrowser && !isSinglePageCheckout) {
                   addAddOnsInAttributes(checkoutBody)
                 }
 
+                if (isSinglePageCheckout) {
+                  checkoutBody.attributes.add_ons = singleCheckoutAddons
+                  // Include add_on_data_capture for single-page checkout
+                  const storedAddOnDataCapture =
+                    localStorage.getItem('add_on_data_capture')
+                  if (storedAddOnDataCapture) {
+                    checkoutBody.attributes.add_on_data_capture =
+                      JSON.parse(storedAddOnDataCapture)
+                  }
+                }
+
                 const checkoutResponse = await postOnCheckout(
                   checkoutBody,
                   flagFreeTicket
                 )
+
+                const checkoutUpdateResponse = await updateCheckout({
+                  attributes: {
+                    event_id: eventId,
+                    add_ons: checkoutBody?.attributes?.add_ons ?? [],
+                    is_from_resale: additionalConfigs?.resale,
+                  },
+                })
+                console.log(
+                  'Stripe checkoutUpdateResponse in billing-info-container',
+                  checkoutUpdateResponse
+                )
+
+                setCheckoutUpdateData(checkoutUpdateResponse.data.attributes)
+
+                let paymentResponse = null
+
+                if (isSinglePageCheckout) {
+                  const { hash, total } = checkoutResponse.data.attributes
+                  localStorage.setItem('checkoutData', JSON.stringify({ hash, total }))
+
+                  const paymentDataResponse = await getPaymentData(String(hash))
+
+                  if (paymentDataResponse.success) {
+                    const { attributes } = paymentDataResponse.data
+                    console.log('Stripe confirmPayment success in billing-info-container')
+                    setReviewData(attributes)
+
+                    const { order_details, cart } = attributes
+                    const {
+                      tickets: [ticket],
+                    } = order_details
+
+                    const updatedOrderData = {
+                      add_ons: order_details.add_ons || [],
+                      total: order_details.total,
+                      subtotal: order_details.subtotal,
+                      fees: order_details.fees,
+                      pay_now: order_details.pay_now || '',
+
+                      id: order_details?.id,
+                      product_name: cart[0]?.product_name,
+                      ticketType: ticket?.name,
+                      quantity: ticket?.quantity,
+                      price: ticket?.price,
+                      currency: order_details?.currency,
+                      guest_count: order_details?.guest_count || '',
+                      debt: order_details?.debt || null,
+                      cost: ticket?.cost,
+                    }
+
+                    const isFreeTickets =
+                      (!Number(total) && !Number(updatedOrderData.total)) ||
+                      !Number(updatedOrderData?.pay_now || 0)
+                    const paymentMethod = attributes.payment_method || {}
+                    const paymentPlanAvailable = paymentMethod.stripe_payment_plan_enabled
+                    console.log({ paymentPlanAvailable })
+                    // Process payment using the hook
+                    paymentResponse = await processPayment(
+                      paymentDataResponse,
+                      values,
+                      formikHelpers,
+                      checkoutResponse,
+                      checkoutUpdateResponse,
+                      {
+                        attributes,
+                        isFreeTickets,
+                        updatedOrderData,
+                        eventId,
+                      }
+                    )
+
+                    if (!paymentResponse && !isFreeTickets) {
+                      // Payment failed or redirected, don't continue
+                      return
+                    }
+                  }
+                }
+
                 removeReferralKey()
+                removeAdditionalConfigs()
                 handleSubmit(
                   values,
                   formikHelpers as FormikHelpers<any>,
                   eventId,
-                  checkoutResponse
+                  checkoutResponse,
+                  checkoutUpdateResponse,
+                  paymentResponse
                 )
               } catch (e) {
                 setLoading(false)
-                if (e.response?.data?.data?.hasUnverifiedOrder) {
-                  setPendingVerificationMessage(e.response?.data?.message)
+                onSubmitError(e as AxiosError)
+                const hasUnverifiedOrder = _get(
+                  e,
+                  'response.data.data.hasUnverifiedOrder'
+                )
+                const message = _get(e, 'response.data.message', {}) as
+                  | { password?: string | null, email?: string | null }
+                  | string
+
+                if (hasUnverifiedOrder && typeof message === 'string') {
+                  setPendingVerificationMessage(message)
                 } else if (axios.isAxiosError(e)) {
                   if (
-                    e.response?.status === 401 ||
-                    e.response?.data?.error === 'invalid_token'
+                    (e as any).response?.status === 401 ||
+                    _get(e, 'response.data.error') === 'invalid_token'
                   ) {
                     if (isBrowser) {
                       window.localStorage.removeItem('user_data')
@@ -785,8 +1180,8 @@ const BillingInfoContainer = React.memo(
                       window.document.dispatchEvent(event)
                     }
                   }
-                  if (e.response?.data.message && !hideErrorsAlertSection) {
-                    setError(_get(e, 'response.data.message'))
+                  if (message && !hideErrorsAlertSection && typeof message === 'string') {
+                    setError(message)
                   }
                   onSubmitError(e)
                 }
@@ -801,6 +1196,7 @@ const BillingInfoContainer = React.memo(
                 <LogicRunner
                   brandOptIn={brandOptIn}
                   values={props.values}
+                  errors={props.errors}
                   setStates={setStates}
                   setFieldValue={props.setFieldValue}
                   setValues={props.setValues}
@@ -810,16 +1206,18 @@ const BillingInfoContainer = React.memo(
                   shouldFetchCountries={shouldFetchCountries}
                 />
                 <div className={`billing-info-container ${theme}`}>
-                  <SnackbarAlert
-                    type="error"
-                    isOpen={!!error}
-                    message={error || ''}
-                    onClose={() => {
-                      setError(null)
-                      onErrorClose()
-                    }}
-                  />
-                  {!isLoggedIn && (
+                  {!!error && (
+                    <SnackbarAlert
+                      type="error"
+                      isOpen={!!error}
+                      message={error || ''}
+                      onClose={() => {
+                        setError(null)
+                        onErrorClose()
+                      }}
+                    />
+                  )}
+                  {!isLoggedIn && !isSinglePageCheckout && (
                     <div className="account-actions-block">
                       <div className="action-item">
                         <div>{accountInfoTitle}</div>
@@ -855,178 +1253,151 @@ const BillingInfoContainer = React.memo(
                       </div>
                     </div>
                   )}
+                  {isSinglePageCheckout &&
+                  !addOnsIncludedOnInvitation &&
+                  eventHasAddons &&
+                  eventId ? (
+                    <SimpleAddonsContainer
+                      {...(addonsProps ?? {})}
+                      eventId={eventId}
+                      addOnDataWithCustomFields={addOnDataWithCustomFields}
+                      configs={configs}
+                      onAddOnSelect={onAddOnSelect}
+                    />
+                  ) : !addOnsIncludedOnInvitation &&
+                    includeAddons &&
+                    !isSinglePageCheckout ? (
+                    <AddonsContainter
+                      {...(addonsProps ?? {})}
+                      addOnDataWithCustomFields={addOnDataWithCustomFields}
+                      configs={configs}
+                      onAddOnSelect={onAddOnSelect}
+                    />
+                  ) : null}
                   {!cardLoading &&
                     _map(dataWithUniqueIds, item => {
                       const { label, labelClassName, fields } = item
                       return (
-                        <React.Fragment key={item.uniqueId}>
+                        <div key={item.uniqueId} className="billing-info-fields">
                           <p className={labelClassName}>{label}</p>
                           {_map(fields, group => {
                             const { groupClassname, groupItems } = group
+                            const filteredGroupItems = filterBillingInfoFields(
+                              groupItems,
+                              {
+                                showDOB: Boolean(showDOB),
+                                hideTtfOptIn: Boolean(hideTtfOptIn),
+                                hidePhoneField: Boolean(hidePhoneField),
+                                flagRequirePhone: Boolean(flagRequirePhone),
+                                collectMandatoryWalletAddress: Boolean(
+                                  collectMandatoryWalletAddress
+                                ),
+                                collectMandatoryJobTitle: Boolean(
+                                  collectMandatoryJobTitle
+                                ),
+                                collectMandatoryBusinessCategory: Boolean(
+                                  collectMandatoryBusinessCategory
+                                ),
+                                collectMandatoryCompany: Boolean(collectMandatoryCompany),
+                                collectMandatoryInstagram: Boolean(
+                                  collectMandatoryInstagram
+                                ),
+                                flagFreeTicket: Boolean(flagFreeTicket),
+                                hideWalletAddressField: Boolean(hideWalletAddressField),
+                                hideJobTitleField: Boolean(hideJobTitleField),
+                                hideBusinessCategoryField: Boolean(
+                                  hideBusinessCategoryField
+                                ),
+                                hideCompanyField: Boolean(hideCompanyField),
+                                hideInstagramField,
+                              }
+                            )
                             return (
                               <React.Fragment key={group.uniqueId}>
                                 <div className={groupClassname}>
-                                  {_map(
-                                    groupItems.filter(el => {
-                                      if (el.name === 'holderAge' && !showDOB) {
-                                        return false
-                                      }
-                                      if (el.name === 'ttf_opt_in' && hideTtfOptIn) {
-                                        return false
-                                      }
-                                      if (el.name === 'phone') {
-                                        if (!hidePhoneField) {
-                                          el.required = flagRequirePhone
-                                        } else {
-                                          return false
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[wallet_address]') {
-                                        if (collectMandatoryWalletAddress) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[jobTitle]') {
-                                        if (collectMandatoryJobTitle) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[businessCategory]') {
-                                        if (collectMandatoryBusinessCategory) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[company]') {
-                                        if (collectMandatoryCompany) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[instagram]') {
-                                        if (collectMandatoryInstagram) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (
-                                        [
-                                          'street_address',
-                                          'country',
-                                          'state',
-                                          'city',
-                                        ].includes(el.name)
-                                      ) {
-                                        if (flagFreeTicket) {
-                                          el.required = false
-                                          return false
-                                        }
-                                      }
-                                      if (
-                                        hideWalletAddressField &&
-                                        (el.name === 'wallet-address-info' ||
-                                          el.name === 'data_capture[wallet_address]')
-                                      ) {
-                                        return false
-                                      }
-                                      if (
-                                        hideJobTitleField &&
-                                        el.name === 'data_capture[jobTitle]'
-                                      ) {
-                                        return false
-                                      }
-                                      if (
-                                        hideBusinessCategoryField &&
-                                        el.name === 'data_capture[businessCategory]'
-                                      ) {
-                                        return false
-                                      }
-                                      if (
-                                        hideCompanyField &&
-                                        el.name === 'data_capture[company]'
-                                      ) {
-                                        return false
-                                      }
-                                      if (
-                                        hideInstagramField &&
-                                        (el.name === 'data_capture[instagram]' ||
-                                          el.name === 'instagram-info')
-                                      ) {
-                                        return false
-                                      }
-                                      return true
-                                    }),
-                                    element =>
-                                      [
-                                        'password',
-                                        'confirmPassword',
-                                        'password-info',
-                                      ].includes(element.name) && isLoggedIn ? null : (
-                                        <React.Fragment key={element.uniqueId}>
-                                          <div
-                                            className={`${element.className} ${
-                                              props?.errors[element.name] || ''
-                                              }`}
-                                          >
-                                            {element.component ? (
-                                              element.component
+                                  {_map(filteredGroupItems, element =>
+                                    [
+                                      'password',
+                                      'confirmPassword',
+                                      'password-info',
+                                    ].includes(element.name) && isLoggedIn ? null : (
+                                      <React.Fragment key={element.uniqueId}>
+                                        <div
+                                          className={`${element.className} ${
+                                            props?.errors[element.name] || ''
+                                          }`}
+                                        >
+                                          {element.component ? (
+                                            typeof element.component === 'function' ? (
+                                              renderComponentWithProps(
+                                                element.component as React.ComponentType<any>,
+                                                element.name === 'payment_info'
+                                                  ? { reviewData }
+                                                  : {}
+                                              )
                                             ) : (
-                                              <Field
-                                                {...element}
-                                                type={
-                                                  element.type === 'radio' ||
-                                                    element.type === 'checkbox'
-                                                    ? undefined
-                                                    : element.type
-                                                }
-                                                setPhoneValidationIsLoading={
-                                                  element.type === 'phone'
-                                                    ? setPhoneValidationIsLoading
-                                                    : undefined
-                                                }
-                                                label={getFieldLabel(element, configs)}
-                                                validate={getValidateFunctions(
-                                                  element,
-                                                  states,
-                                                  props.values,
-                                                  props.errors
-                                                )}
-                                                setFieldValue={props.setFieldValue}
-                                                onBlur={props.handleBlur}
-                                                component={getFieldComponent(element)}
-                                                selectOptions={
-                                                  element.name === 'country'
-                                                    ? _map(countries, item => ({
+                                              element.component
+                                            )
+                                          ) : (
+                                            <Field
+                                              {...element}
+                                              type={
+                                                element.type === 'radio' ||
+                                                element.type === 'checkbox'
+                                                  ? undefined
+                                                  : element.type
+                                              }
+                                              setPhoneValidationIsLoading={
+                                                element.type === 'phone'
+                                                  ? setPhoneValidationIsLoading
+                                                  : undefined
+                                              }
+                                              label={getFieldLabel(element, configs)}
+                                              validate={getValidateFunctions(
+                                                element,
+                                                states,
+                                                props.values,
+                                                props.errors
+                                              )}
+                                              setFieldValue={props.setFieldValue}
+                                              onBlur={props.handleBlur}
+                                              component={getFieldComponent(element)}
+                                              selectOptions={
+                                                element.name === 'country'
+                                                  ? _map(countries, item => ({
                                                       value: item.id,
                                                       label: item.name,
                                                     }))
-                                                    : element.name === 'state'
-                                                      ? [
-                                                        {
-                                                          label: element.label,
-                                                          value: '',
-                                                          disabled: true,
-                                                        },
-                                                        ...states,
-                                                      ]
-                                                      : element.selectOptions || []
-                                                }
-                                                theme={theme}
-                                                defaultCountry={
-                                                  defaultCountry || element.defaultCountry
-                                                }
-                                                dateFormat={element.format}
-                                                isCountryCodeEditable={
-                                                  isCountryCodeEditable
-                                                }
-                                              />
-                                            )}
-                                          </div>
-                                        </React.Fragment>
-                                      )
+                                                  : element.name === 'state'
+                                                  ? [
+                                                      {
+                                                        label: element.label,
+                                                        value: '',
+                                                        disabled: true,
+                                                      },
+                                                      ...states,
+                                                    ]
+                                                  : element.selectOptions || []
+                                              }
+                                              theme={theme}
+                                              defaultCountry={
+                                                defaultCountry || element.defaultCountry
+                                              }
+                                              dateFormat={element.format}
+                                              isCountryCodeEditable={
+                                                isCountryCodeEditable
+                                              }
+                                            />
+                                          )}
+                                        </div>
+                                      </React.Fragment>
+                                    )
                                   )}
                                 </div>
                               </React.Fragment>
                             )
                           })}
-                        </React.Fragment>
+                        </div>
                       )
                     })}
                   {!_isEmpty(ticketHoldersFields.fields) && (
@@ -1046,7 +1417,7 @@ const BillingInfoContainer = React.memo(
                                         {...element}
                                         type={
                                           element.type === 'radio' ||
-                                            element.type === 'checkbox'
+                                          element.type === 'checkbox'
                                             ? undefined
                                             : element.type
                                         }
@@ -1077,6 +1448,49 @@ const BillingInfoContainer = React.memo(
                       ))}
                     </div>
                   )}
+                  <div className="payment-section">
+                    {isSinglePageCheckout && !orderIsFree && stripePublishableKey && (
+                      <PaymentContainer
+                        stripePublishableKey={stripePublishableKey}
+                        stripeAccountId={stripeAccountId}
+                        formTitle="Payment Information"
+                        orderInfoLabel=""
+                        enableTimer={false}
+                        checkoutData={checkoutData}
+                        elementsOptions={elementsOptions}
+                        paymentElementOptions={{
+                          wallets: {
+                            applePay:
+                              checkoutUpdateData?.additional_payment_information
+                                ?.stripe_wallets?.applePay || 'never',
+                            googlePay:
+                              checkoutUpdateData?.additional_payment_information
+                                ?.stripe_wallets?.googlePay || 'never',
+                          },
+                        }}
+                        onStripeReady={(stripe, elements) => {
+                          stripeRef.current = stripe
+                          elementsRef.current = elements
+                        }}
+                        paymentFields={paymentProps.paymentFields || []}
+                        onPaymentError={paymentProps.onPaymentError || _identity}
+                        handlePayment={paymentProps.handlePayment || _identity}
+                        onGetPaymentDataSuccess={
+                          paymentProps.onGetPaymentDataSuccess || _identity
+                        }
+                        onGetPaymentDataError={
+                          paymentProps.onGetPaymentDataError || _identity
+                        }
+                        themeOptions={themeOptions}
+                        paymentInfoLabel=""
+                        displayPaymentButton={false}
+                        hidePaymentForm={false}
+                        hideFieldsBlock={true}
+                        isSinglePageCheckout={true}
+                      />
+                    )}
+                    {paymentSectionAddon}
+                  </div>
                   <div className="button-container">
                     <Button
                       type="submit"
@@ -1084,7 +1498,13 @@ const BillingInfoContainer = React.memo(
                       className="login-register-button"
                       disabled={props.isSubmitting || phoneValidationIsLoading}
                     >
-                      {props.isSubmitting ? <CircularProgress size={26} /> : buttonName}
+                      {props.isSubmitting ? (
+                        <CircularProgress size={26} />
+                      ) : orderIsFree ? (
+                        freeOrderButtonName
+                      ) : (
+                        buttonName
+                      )}
                     </Button>
                   </div>
                 </div>
@@ -1149,6 +1569,7 @@ const BillingInfoContainer = React.memo(
             onForgotPasswordSuccess={onForgotPasswordSuccess}
             onForgotPasswordError={onForgotPasswordError}
             showPoweredByImage={showPoweredByImage}
+            displaySuccessMessage
           />
         )}
         <VerificationPendingModal