tf-checkout-react 1.6.6 → 1.7.1

package/src/components/paymentContainer/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable max-len */
 import './style.css'
 
@@ -7,28 +8,23 @@ import CircularProgress from '@mui/material/CircularProgress'
 import Container from '@mui/material/Container'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { CSSProperties } from '@mui/styles'
-import { Elements } from '@stripe/react-stripe-js'
+import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
 import {
   loadStripe,
-  StripeCardNumberElementOptions,
   StripeConstructorOptions,
   StripeElementsOptions,
 } from '@stripe/stripe-js'
+import { StripePaymentElementOptions } from '@stripe/stripe-js'
 import { AxiosError } from 'axios'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'
 import _map from 'lodash/map'
 import { nanoid } from 'nanoid'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
-import {
-  createPaymentPlan,
-  getConditions,
-  getPaymentData,
-  handleFreeSuccess,
-  handlePaymentSuccess,
-} from '../../api'
+import { getConditions, getPaymentData } from '../../api'
+import { FEES_STYLES } from '../../constants'
 import { usePixel } from '../../hooks/usePixel'
 import { createFixedFloatNormalizer, currencyNormalizerCreator } from '../../normalizers'
 import { IAddOn, IOrderData, IPaymentField } from '../../types'
@@ -39,24 +35,30 @@ import {
 import { CONFIGS, isBrowser } from '../../utils'
 import { getQueryVariable } from '../../utils/getQueryVariable'
 import { Checkbox, Loader } from '../common/index'
-import StripePayment from '../stripePayment'
 import TimerWidget from '../timerWidget'
+import { handlePaymentMiddleWare } from './handlePayment'
 import { PaymentPlanSection } from './PaymentPlanSection'
 
-const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
-
-const getStripePromise = (reviewData: any) => {
-  const stripePublishableKey =
-    _get(reviewData, 'payment_method.stripe_publishable_key') || publishableKey
-  const stripeAccount = _get(reviewData, 'payment_method.stripe_connected_account')
+// Wrapper component to access Stripe hooks inside Elements context
+const StripeWrapper = ({
+  options,
+  onStripeReady,
+}: {
+  options?: StripePaymentElementOptions;
+  onStripeReady: (stripe: any, elements: any) => void;
+}) => {
+  const stripe = useStripe()
+  const elements = useElements()
 
-  const options: StripeConstructorOptions = {}
-  if (stripeAccount) {
-    options.stripeAccount = stripeAccount
-  }
+  useEffect(() => {
+    if (stripe && elements) {
+      onStripeReady(stripe, elements)
+    }
+  }, [stripe, elements, onStripeReady])
 
-  return loadStripe(stripePublishableKey, options)
+  return <PaymentElement options={options} />
 }
+
 export interface IPaymentPage {
   paymentFields: IPaymentField[];
   handlePayment: any;
@@ -67,19 +69,24 @@ export interface IPaymentPage {
   onGetPaymentDataSuccess: (value: any) => void;
   onGetPaymentDataError: (value: AxiosError) => void;
   onPaymentError: (value: AxiosError, slug?: string) => void;
-  stripeCardOptions?: StripeCardNumberElementOptions;
-  disableZipSection: boolean;
   themeOptions?: ThemeOptions & {
     input?: CSSProperties;
     checkbox?: CSSProperties;
   };
   elementsOptions?: StripeElementsOptions;
+  paymentElementOptions?: StripePaymentElementOptions;
   onCountdownFinish?: () => void;
   enableTimer?: boolean;
-  enablePaymentPlan?: boolean;
-  paymentButtonText?: string;
   paymentInfoLabel?: string;
   orderInfoLabel?: string;
+  displayPaymentButton?: boolean;
+  hidePaymentForm?: boolean;
+  hideFieldsBlock?: boolean;
+  isSinglePageCheckout?: boolean;
+  stripePublishableKey?: string;
+  stripeAccountId?: string;
+  onStripeReady?: (stripe: any, elements: any) => void;
+  enablePaymentPlan?: boolean;
 }
 
 const initialPaymentPlanConfiguration: IPaymentPlanConfig = {
@@ -107,10 +114,11 @@ const initialOrderValues: IOrderData = {
   quantity: '',
   price: '',
   total: '',
-  currency: '',
+  currency: 'USD',
   guest_count: '',
   pay_now: '',
   add_ons: [] as IAddOn[],
+  cost: '',
 }
 
 const initialReviewValues = {
@@ -122,11 +130,15 @@ const initialReviewValues = {
     stripe_client_secret: '',
     stripe_payment_plan_enabled: false,
     stripe_payment_plan_configuration: {} as any,
+    stripe_publishable_key: '',
+    id: '',
+    name: '',
+    stripeConnectedAccount: '',
   },
   billing_info: {},
   event_details: {
     flagSeatMapAllowed: false,
-    slug: ''
+    slug: '',
   },
 }
 
@@ -140,30 +152,36 @@ export const PaymentContainer = ({
   onGetPaymentDataSuccess = _identity,
   onGetPaymentDataError = _identity,
   onPaymentError = _identity,
-  stripeCardOptions = {},
-  disableZipSection = false,
   themeOptions,
   elementsOptions,
+  paymentElementOptions,
   onCountdownFinish = _identity,
   enableTimer = false,
-  enablePaymentPlan = true,
-  paymentButtonText,
   orderInfoLabel = 'Order Review',
   paymentInfoLabel = 'Order Confirmation',
+  displayPaymentButton = true,
+  hidePaymentForm = false,
+  hideFieldsBlock = false,
+  isSinglePageCheckout = false,
+  stripePublishableKey,
+  stripeAccountId,
+  onStripeReady = _identity,
+  enablePaymentPlan = true,
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
   const [error, setError] = useState(null)
-  const [showPaymentPlanSection, setShowPaymentPlanSection] = useState(false)
   const [paymentIsLoading, setPaymentIsLoading] = useState(false)
   const [paymentDataIsLoading, setPaymentDataIsLoading] = useState(true)
   const [conditions, setConditions] = useState<{ id: string, text: string }[]>([])
+  const [currency, setCurrency] = useState('')
+  const [showPaymentPlanSection, setShowPaymentPlanSection] = useState(false)
+
   const [paymentPlanIsAvailable, setPaymentPlanIsAvailable] = useState(false)
   const [paymentPlanConfig, setPaymentPlanConfig] = useState(
     initialPaymentPlanConfiguration
   )
   const [paymentPlanUseSavedCard, setPaymentPlanUseSavedCard] = useState(true)
-  const [currency, setCurrency] = useState('')
 
   const showFormTitle = Boolean(formTitle)
   const showErrorText = Boolean(errorText)
@@ -171,40 +189,18 @@ export const PaymentContainer = ({
   const eventId =
     getQueryVariable('event_id') || _get(reviewData, 'cart[0].product_id') || ''
   const { hash, total } = checkoutData
-  const isFreeTickets =
-    (!Number(total) && !Number(orderData.total)) || !Number(orderData.pay_now)
+  const isFreeTickets = useMemo(
+    () => (!Number(total) && !Number(orderData.total)) || !Number(orderData.pay_now),
+    [total, orderData]
+  )
 
   const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
   usePixel(eventId, { page: 'review', pageUrl })
 
-  useEffect(() => {
-    const paymentMethod = reviewData.payment_method || {}
-    const paymentPlanAvailable =
-      paymentMethod.stripe_payment_plan_enabled && enablePaymentPlan
-    setPaymentPlanIsAvailable(paymentPlanAvailable)
-
-    if (paymentPlanAvailable) {
-      const paymentPlanConfig =
-        paymentMethod.stripe_payment_plan_configuration || initialPaymentPlanConfiguration
-      setPaymentPlanConfig(paymentPlanConfig)
-      setPaymentPlanUseSavedCard(!!paymentPlanConfig.saved_card?.stripe_payment_method_id)
-      if (isBrowser) {
-        const sessionData = window.localStorage.getItem('paymentConfiguration')
-        const session = sessionData ? JSON.parse(sessionData) : {}
-        if (!!session && session?.orderId == reviewData.order_details?.id) {
-          setPaymentPlanUseSavedCard(session.paymentPlanUseSavedCard ?? false)
-          setShowPaymentPlanSection(session.showPaymentPlanSection ?? false)
-        }
-      }
-    }
-  }, [enablePaymentPlan, reviewData])
+  console.log({ conditions })
 
   useEffect(() => {
-    updateSessionInformation()
-  }, [showPaymentPlanSection, paymentPlanUseSavedCard])
-
-  useEffect(() => {
-    (async () => {
+    const fetchPaymentData = async () => {
       try {
         const paymentDataResponse = await getPaymentData(hash)
         if (paymentDataResponse.success) {
@@ -220,6 +216,7 @@ export const PaymentContainer = ({
             ticketType: item?.name,
             quantity: item?.guest_count,
             price: item?.price,
+            cost: item?.cost,
             id: item.id,
             count: item?.quantity,
           }))
@@ -237,19 +234,37 @@ export const PaymentContainer = ({
             guest_count: order_details?.guest_count || '',
             debt: order_details?.debt || null,
             tableTypes: orderDataArray,
+            cost: ticket?.cost,
+            subtotal: order_details?.subtotal,
+            fees: order_details?.fees,
           }
           setOrderData(orderData)
           setCurrency(order_details?.currency)
           onGetPaymentDataSuccess(paymentDataResponse.data)
         }
       } catch (e) {
-        setError(_get(e, 'response.data.message'))
-        onGetPaymentDataError(e.response)
+        setError(_get(e, 'response.data.message', null))
+        onGetPaymentDataError((e as Record<string, unknown>).response as AxiosError)
       } finally {
         setPaymentDataIsLoading(false)
       }
-    })()
-  }, [checkoutData])
+    }
+
+    if (isSinglePageCheckout) {
+      if (!orderData?.total) {
+        setOrderData(current => ({ ...current, pay_now: 1, total: 1 }))
+        setPaymentDataIsLoading(false)
+      }
+    } else {
+      fetchPaymentData()
+    }
+  }, [
+    orderData,
+    hash,
+    isSinglePageCheckout,
+    onGetPaymentDataError,
+    onGetPaymentDataSuccess,
+  ])
 
   //just once
   useEffect(() => {
@@ -258,10 +273,6 @@ export const PaymentContainer = ({
       if (eventId) {
         const conditionsResponse = await getConditions(eventId)
         const conditionsInfo = conditionsResponse.data.attributes
-        console.log(
-          '🚀 ~ file: index.tsx:258 ~ fetchConditions ~ conditionsInfo:',
-          conditionsResponse
-        )
         setConditions(
           conditionsInfo
             ? conditionsInfo.map((item: { text: any }) => ({
@@ -274,60 +285,13 @@ export const PaymentContainer = ({
       }
     }
     fetchConditions()
-  }, [])
-
-  // 1. get payment data   ---> v1/order/${hash}/review/ done
-  // 2. handle payment     ---> v1/order/${orderHash}/pay/
-  // 3. redirect to confirmation page
-  const handlePaymentMiddleWare = async (error: any, data?: object) => {
-    try {
-      if (error) {
-        throw error
-      }
-      const {
-        order_details: { order_hash },
-      } = reviewData
-
-      let paymentSuccessResponse
-
-      if (isFreeTickets) {
-        paymentSuccessResponse = await handleFreeSuccess(order_hash)
-      } else if (paymentPlanIsAvailable && showPaymentPlanSection) {
-        paymentSuccessResponse = await createPaymentPlan(
-          order_hash,
-          _get(data, 'paymentMethodId', '')
-        )
-      } else {
-        paymentSuccessResponse = await handlePaymentSuccess(order_hash)
-      }
+  }, [eventId])
 
-      if (paymentSuccessResponse.status === 200) {
-        handlePayment(paymentSuccessResponse)
-        setPaymentIsLoading(false)
-
-        // clear seat-map related data from localStorage
-        localStorage.removeItem('reservationData')
-        localStorage.removeItem(`reservationStart-${eventId}`)
-        localStorage.removeItem('ownReservations')
-        localStorage.removeItem('tierId')
-
-        if (isBrowser) {
-          (window as any)?.dataLayer?.push({
-            event: 'Purchase',
-            orderValue: orderData.total,
-            orderCurrency: orderData.currency,
-            orderId: orderData.id,
-          })
-        }
-      }
-    } catch (e) {
-      setError(_get(e, 'response.data.message'))
-      setPaymentIsLoading(false)
-      onPaymentError(e.response || e, reviewData.event_details.slug)
+  const showPaymentForm = () => {
+    if (hidePaymentForm) {
+      return false
     }
-  }
 
-  const showPaymentForm = () => {
     let showPaymentForm = !isFreeTickets
 
     if (
@@ -340,18 +304,23 @@ export const PaymentContainer = ({
 
     return showPaymentForm
   }
-  const updateSessionInformation = () => {
-    if (isBrowser && !!orderData?.id) {
-      window.localStorage.setItem(
-        'paymentConfiguration',
-        JSON.stringify({
-          paymentPlanUseSavedCard,
-          showPaymentPlanSection,
-          orderId: orderData?.id,
-        })
-      )
+
+  const getPublishableKey = () =>
+    stripePublishableKey || _get(reviewData, 'payment_method.stripe_publishable_key')
+
+  const getStripePromise = useCallback(() => {
+    const stripePublishableKey = getPublishableKey()
+    const stripeAccount =
+      stripeAccountId || _get(reviewData, 'payment_method.stripe_connected_account')
+
+    const options: StripeConstructorOptions = {}
+
+    if (stripeAccount) {
+      options.stripeAccount = stripeAccount
     }
-  }
+
+    return loadStripe(stripePublishableKey, options)
+  }, [reviewData, stripePublishableKey])
 
   const themeMui = createTheme(themeOptions)
   const hasTableTypes = Boolean(Number(orderData.guest_count))
@@ -365,6 +334,10 @@ export const PaymentContainer = ({
           label: '',
           id: 'tableTypes',
         },
+        {
+          label: 'Add-ons',
+          id: 'add_ons',
+        },
         {
           label: 'Total (incl. fees, card processing and taxes)',
           id: 'total',
@@ -395,9 +368,51 @@ export const PaymentContainer = ({
       ]
     : paymentFields
   const isTable = orderData?.guest_count
+
+  useEffect(() => {
+    const paymentMethod = reviewData.payment_method || {}
+    console.log({
+      paymentMethod,
+      enablePaymentPlan,
+    })
+    const paymentPlanAvailable =
+      paymentMethod.stripe_payment_plan_enabled && enablePaymentPlan
+    setPaymentPlanIsAvailable(paymentPlanAvailable)
+
+    if (paymentPlanAvailable) {
+      const paymentPlanConfig =
+        paymentMethod.stripe_payment_plan_configuration || initialPaymentPlanConfiguration
+      setPaymentPlanConfig(paymentPlanConfig)
+      setPaymentPlanUseSavedCard(!!paymentPlanConfig.saved_card?.stripe_payment_method_id)
+      if (isBrowser) {
+        const sessionData = window.localStorage.getItem('paymentConfiguration')
+        const session = sessionData ? JSON.parse(sessionData) : {}
+        if (!!session && session?.orderId == reviewData.order_details?.id) {
+          setPaymentPlanUseSavedCard(session.paymentPlanUseSavedCard ?? false)
+          setShowPaymentPlanSection(session.showPaymentPlanSection ?? false)
+        }
+      }
+    }
+  }, [enablePaymentPlan, reviewData])
+
+  useEffect(() => {
+    if (isBrowser && !!orderData?.id) {
+      window.localStorage.setItem(
+        'paymentConfiguration',
+        JSON.stringify({
+          paymentPlanUseSavedCard,
+          showPaymentPlanSection,
+          orderId: orderData?.id,
+        })
+      )
+    }
+  }, [showPaymentPlanSection, paymentPlanUseSavedCard, orderData?.id])
+
   return (
     <ThemeProvider theme={themeMui}>
-      <div className="payment_page">
+      <div
+        className={`payment_page ${isSinglePageCheckout ? 'payment_page_single' : ''}`}
+      >
         {enableTimer && (
           <TimerWidget
             expires_at={_get(reviewData, 'expires_at', 0)}
@@ -405,113 +420,139 @@ export const PaymentContainer = ({
             onCountdownFinish={onCountdownFinish}
           />
         )}
-        {error && (
-          <Alert severity="error" onClose={onErrorClose} variant="filled">
-            {error}
-          </Alert>
-        )}
+        {isSinglePageCheckout
+          ? null
+          : error && (
+              <Alert severity="error" onClose={onErrorClose} variant="filled">
+                {error}
+              </Alert>
+            )}
         {paymentDataIsLoading && <Loader />}
         {!paymentDataIsLoading && (
           <Container maxWidth="md">
             {showFormTitle && <h1>{isTable ? 'Get Your Tables' : formTitle}</h1>}
             <div className="order_info_text">{orderInfoLabel}</div>
-            <div
-              className="order_info_section"
-              style={{ display: hasTableTypes ? 'block' : 'grid' }}
-            >
-              {_map(paymentFieldsData, field => {
-                const { id, label, className = '', normalizer = _identity } = field
-                let value = orderData[id as keyof IOrderData]
-                let component = null
-
-                if (field.id === 'add_ons' && _isEmpty(value)) {
-                  return false
-                }
-
-                if (
-                  field.id === 'total' &&
-                  paymentPlanIsAvailable &&
-                  showPaymentPlanSection
-                ) {
-                  value = '' + paymentPlanConfig.total
-                }
-
-                if (field.id === 'tableTypes') {
-                  const valueArray = value as Array<any>
-
-                  component = (
-                    <div
-                      key={id}
-                      className="order_info_block"
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                      }}
-                    >
-                      {_map(valueArray, tableTypeItem => (
-                        <div
-                          key={tableTypeItem.id}
-                          style={{
-                            display: 'grid',
-                            gridTemplateColumns: '33% 33% 33%',
-                            gridColumnGap: '10%',
-                          }}
-                        >
-                          <div className="order_info_block">
-                            <div className="order_info_title">Table Type</div>
-                            <div className={`${className} order_info_text`}>
-                              {tableTypeItem.ticketType}
+            {!hideFieldsBlock && (
+              <div
+                className="order_info_section"
+                style={{ display: hasTableTypes ? 'block' : 'grid' }}
+              >
+                {_map(paymentFieldsData, field => {
+                  const { id, label, className = '', normalizer = _identity } = field
+                  let value = orderData[id as keyof IOrderData] || ''
+                  let component = null
+
+                  if (field.id === 'add_ons' && _isEmpty(value)) {
+                    return false
+                  }
+
+                  if (
+                    field.id === 'total' &&
+                    paymentPlanIsAvailable &&
+                    showPaymentPlanSection
+                  ) {
+                    value = '' + paymentPlanConfig.total
+                  }
+
+                  if (field.id === 'tableTypes') {
+                    const valueArray = value as Array<any>
+
+                    component = (
+                      <div
+                        key={id}
+                        className="order_info_block"
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                        }}
+                      >
+                        {_map(valueArray, tableTypeItem => (
+                          <div
+                            key={tableTypeItem.id}
+                            style={{
+                              display: 'grid',
+                              gridTemplateColumns: '33% 33% 33%',
+                              gridColumnGap: '10%',
+                            }}
+                          >
+                            <div className="order_info_block">
+                              <div className="order_info_title">Table Type</div>
+                              <div className={`${className} order_info_text`}>
+                                {tableTypeItem.ticketType}
+                              </div>
                             </div>
-                          </div>
-                          <div className="order_info_block">
-                            <div className="order_info_title">Number of Tables</div>
-                            <div className={`${className} order_info_text`}>
-                              {tableTypeItem.count}
+                            <div className="order_info_block">
+                              <div className="order_info_title">Number of Tables</div>
+                              <div className={`${className} order_info_text`}>
+                                {tableTypeItem.count}
+                              </div>
                             </div>
-                          </div>
-                          <div className="order_info_block">
-                            <div className="order_info_title">Guest Count</div>
-                            <div className={`${className} order_info_text`}>
-                              {tableTypeItem.quantity}
+                            <div className="order_info_block">
+                              <div className="order_info_title">Guest Count</div>
+                              <div className={`${className} order_info_text`}>
+                                {tableTypeItem.quantity}
+                              </div>
                             </div>
                           </div>
-                        </div>
-                      ))}
-                    </div>
-                  )
-                }
-
-                return (
-                  component || (
-                    <div key={id} className="order_info_block">
-                      <div className="order_info_title">{label}</div>
-                      <div className={`${className} order_info_text`}>
-                        {typeof value === 'string' || typeof value === 'number'
-                          ? normalizer(value, currency)
-                          : _map(value, item => (
-                              <div key={item.id} className="add-on-container">
-                                <span>{item.quantity}</span>
-                                <span className="add-on-x">{' x '}</span>
-                                <span>
-                                  {item.groupName ? item.groupName + ' - ' : ''}
-                                </span>
-                                <span>{item.name}</span>
-                                <span>{' - '}</span>
-                                <span>
-                                  {currencyNormalizerCreator(
-                                    createFixedFloatNormalizer(2)(parseFloat(item.price)),
-                                    currency
+                        ))}
+                      </div>
+                    )
+                  }
+
+                  return (
+                    component || (
+                      <div key={id} className={`order_info_block ${className}`}>
+                        <div className="order_info_title">{label}</div>
+                        <div className={`${className} order_info_text`}>
+                          {typeof value === 'string' || typeof value === 'number'
+                            ? normalizer(value, currency, orderData)
+                            : _map(value, item => (
+                                <div>
+                                  <div key={item.id} className="add-on-container">
+                                    <span>{item.quantity}</span>
+                                    <span className="add-on-x">{' x '}</span>
+                                    <span>
+                                      {item.groupName ? item.groupName + ' - ' : ''}
+                                    </span>
+                                    <span>{item.name}</span>
+                                    <span>{' - '}</span>
+                                    <span>
+                                      {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
+                                        currencyNormalizerCreator(
+                                          createFixedFloatNormalizer(2)(
+                                            parseFloat(item.price)
+                                          ),
+                                          currency
+                                        ) + ' (incl. fees)'}
+                                      {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
+                                        currencyNormalizerCreator(
+                                          createFixedFloatNormalizer(2)(
+                                            parseFloat(item.cost)
+                                          ),
+                                          currency
+                                        )}
+                                    </span>
+                                    <span className="add-on-each">{' each'}</span>
+                                  </div>
+                                  {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
+                                    <p className="fees">
+                                      {`(${currencyNormalizerCreator(
+                                        createFixedFloatNormalizer(2)(
+                                          parseFloat(String(item.price))
+                                        ),
+                                        currency
+                                      )} with fees)`}
+                                    </p>
                                   )}
-                                </span>
-                                <span className="add-on-each">{' each'}</span>
-                              </div>
-                            ))}
+                                </div>
+                              ))}
+                        </div>
                       </div>
-                    </div>
+                    )
                   )
-                )
-              })}
-            </div>
+                })}
+              </div>
+            )}
             {!isFreeTickets && paymentPlanIsAvailable && (
               <div className="payment_toggle">
                 <Checkbox
@@ -521,7 +562,7 @@ export const PaymentContainer = ({
                     </span>
                   }
                   required={true}
-                  onChange={(_: any) => {
+                  onChange={() => {
                     setShowPaymentPlanSection(!showPaymentPlanSection)
                   }}
                   checked={showPaymentPlanSection}
@@ -536,40 +577,22 @@ export const PaymentContainer = ({
                 setPaymentPlanUseSavedCard={setPaymentPlanUseSavedCard}
               />
             )}
-            {showPaymentForm() ? (
+            {showPaymentForm() && !!getPublishableKey() ? (
               <div className="payment_info">
                 <div className="payment_info_label">{paymentInfoLabel}</div>
                 {showErrorText && <p className="payment_info__error">{errorText}</p>}
                 <div>
-                  <Elements
-                    stripe={getStripePromise(reviewData)}
-                    options={elementsOptions}
-                  >
-                    <StripePayment
-                      stripe_client_secret={
-                        paymentPlanIsAvailable && showPaymentPlanSection
-                          ? paymentPlanConfig.stripe_setup_intent_secret
-                          : _get(reviewData, 'payment_method.stripe_client_secret')
-                      }
-                      hasSeatMapActions={reviewData.event_details.flagSeatMapAllowed}
-                      total={orderData.guest_count ? orderData.pay_now : orderData.total}
-                      onSubmit={handlePaymentMiddleWare}
-                      error={error}
-                      orderId={orderData.id}
-                      currency={orderData.currency}
-                      billing_info={reviewData.billing_info}
-                      isLoading={paymentIsLoading}
-                      handleSetLoading={value => setPaymentIsLoading(value)}
-                      conditions={conditions}
-                      stripeCardOptions={stripeCardOptions}
-                      disableZipSection={disableZipSection}
-                      paymentButtonText={paymentButtonText}
-                      forPaymentPlan={paymentPlanIsAvailable && showPaymentPlanSection}
-                    />
-                  </Elements>
+                  {elementsOptions && (
+                    <Elements stripe={getStripePromise()} options={elementsOptions}>
+                      <StripeWrapper
+                        onStripeReady={onStripeReady}
+                        options={paymentElementOptions}
+                      />
+                    </Elements>
+                  )}
                 </div>
               </div>
-            ) : (
+            ) : displayPaymentButton ? (
               <div
                 className={`payment_button ${
                   paymentIsLoading ? 'disabled-payment-button' : ''
@@ -580,6 +603,7 @@ export const PaymentContainer = ({
                   type="button"
                   onClick={() => {
                     setPaymentIsLoading(true)
+
                     let data
 
                     if (
@@ -593,7 +617,23 @@ export const PaymentContainer = ({
                       }
                     }
 
-                    handlePaymentMiddleWare(null, data)
+                    handlePaymentMiddleWare(
+                      data,
+                      {},
+                      {
+                        reviewData,
+                        isFreeTickets,
+                        paymentPlanIsAvailable,
+                        showPaymentPlanSection,
+                        handlePayment,
+                        setPaymentIsLoading,
+                        setError,
+                        orderData,
+                        eventId,
+                        isBrowser,
+                        onPaymentError,
+                      }
+                    )
                   }}
                 >
                   {paymentIsLoading ? (
@@ -605,7 +645,7 @@ export const PaymentContainer = ({
                   )}
                 </button>
               </div>
-            )}
+            ) : null}
           </Container>
         )}
       </div>