tf-checkout-react-native 1.0.37 → 1.0.39

package/src/features/checkout-v2/form/index.tsx

@@ -0,0 +1,830 @@
+import { CardForm, CardFormView } from '@stripe/stripe-react-native'
+import { FormikProvider, useFormik } from 'formik'
+import React, { ComponentRef, useCallback, useMemo, useRef, useState } from 'react'
+import {
+  ActivityIndicator,
+  findNodeHandle,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from 'react-native'
+
+import { Loading } from '../../../components'
+import { logger } from '../../../utils/Logger'
+import { readableError } from '../../../utils/handlers'
+import { FormikField } from '../../form'
+import { FieldType } from '../../form/types'
+import AddonsContainer from '../components/AddonsContainer'
+import Conditions from '../components/Conditions'
+import OrderReview, { IOrderItem } from '../components/OrderReview'
+import { createCheckoutFormConfig, formFieldsOrder } from './config'
+import { CheckoutFormComputedStyles, mergeCheckoutFormStyles } from './styles'
+import { mergeCheckoutFormTexts } from './texts'
+import {
+  CheckoutFormOrderSummaryTexts,
+  CheckoutFormPaymentTexts,
+  CheckoutFormProps,
+  CheckoutFormTexts,
+  PaymentFormProps,
+} from './types'
+import { getFieldType } from '../utils'
+
+const MemoizedAddonsContainer = React.memo(AddonsContainer)
+const MemoizedConditions = React.memo(Conditions)
+const MemoizedOrderReview = React.memo(OrderReview)
+
+export const CheckoutForm: React.FC<CheckoutFormProps> = ({
+  initialValues,
+  isSubmitting,
+  isLoggedIn,
+  isAgeRequired = false,
+  minimumAge,
+  isTicketFree = false,
+  isPhoneRequired = false,
+  isPhoneHidden = false,
+  countries,
+  states,
+  onCountryChange,
+  orderItems,
+  availableAddons = [],
+  onAddonChange,
+  onSubmit: onSubmitCallback,
+  scrollRef,
+  isInitialLoading,
+  eventCurrency,
+  conditions,
+  isSinglePageCheckout = true,
+  orderCustomFields = [],
+  ticketCustomFields = [],
+  addonCustomFields = [],
+  styles: stylesProp,
+  texts: textsProp,
+}) => {
+  // Handle card form state for payment
+  const [isCardFormComplete, setIsCardFormComplete] = useState(false)
+  const [cardFormError, setCardFormError] = useState<string>()
+
+  const styles = useMemo<CheckoutFormComputedStyles>(
+    () => mergeCheckoutFormStyles(stylesProp),
+    [stylesProp]
+  )
+
+  const texts = useMemo<Required<CheckoutFormTexts>>(
+    () => mergeCheckoutFormTexts(textsProp),
+    [textsProp]
+  )
+
+  const fieldComponentStyles = styles.fields
+
+  const addonsStyles = useMemo(
+    () => ({
+      container: styles.addonSection,
+      title: styles.sectionTitle,
+      addonItem: styles.addonItem,
+      addonInfo: styles.addonInfo,
+      addonName: styles.addonName,
+      addonRow: styles.addonRow,
+      addonPrice: styles.addonPrice,
+      addonPriceWithFees: styles.addonPriceWithFees,
+      addonDescription: styles.addonDescription,
+      addonSelectContainer: styles.addonSelectContainer,
+      fieldComponentStyles,
+    }),
+    [fieldComponentStyles, styles]
+  )
+
+  // Initial values already include default custom field values from the hook
+  const modifiedInitialValues = {
+    ...initialValues,
+    isCardFormComplete: isTicketFree ? true : initialValues.isCardFormComplete,
+  }
+  const requiredConditions = useMemo(
+    () => conditions?.filter((c) => c.is_required) || [],
+    [conditions]
+  )
+
+  const formik = useFormik({
+    initialValues: modifiedInitialValues,
+    onSubmit: onSubmitCallback,
+    validationSchema: createCheckoutFormConfig({
+      minimumAge,
+      isAgeRequired,
+      requirePassword: !isLoggedIn,
+      isTicketFree,
+      isSinglePageCheckout,
+      requiredConditions,
+      isPhoneRequired,
+      orderCustomFields,
+      ticketCustomFields,
+    }),
+    validateOnChange: true,
+    enableReinitialize: true,
+  })
+  const fieldTopRef = useRef<Record<string, number>>({})
+
+  // Helper: scroll to a field by key using onLayout-captured positions
+  const scrollToField = (key: string, attempt: number = 0) => {
+    if (key === 'isCardFormComplete' || !scrollRef.current) return
+
+    let y = fieldTopRef.current[key]
+
+    // Fallback for nested ticket holder fields
+    if (
+      !(typeof y === 'number' && Number.isFinite(y)) &&
+      key.startsWith('ticketHolders[')
+    ) {
+      const holderMatch = key.match(/^ticketHolders\[(\d+)\]/)
+      const index = holderMatch ? holderMatch[1] : undefined
+      if (index != null) {
+        const holderKey = `ticketHolders[${index}]`
+        y = fieldTopRef.current[holderKey]
+        if (!(typeof y === 'number' && Number.isFinite(y))) {
+          y = fieldTopRef.current.ticketHolders
+        }
+      }
+    }
+
+    if (typeof y === 'number' && Number.isFinite(y)) {
+      try {
+        scrollRef.current.scrollTo({ y: Math.max(0, y - 16), animated: true })
+        logger.debug('[CheckoutForm] Scrolled to field', { key, position: y })
+      } catch (e) {
+        logger.debug('[CheckoutForm] scrollTo failed', {
+          key,
+          error: e instanceof Error ? e.message : String(e),
+        })
+      }
+    } else if (attempt < 3) {
+      setTimeout(() => scrollToField(key, attempt + 1), 50)
+    } else {
+      logger.warn('[CheckoutForm] Could not scroll to field - position not found', {
+        key,
+      })
+    }
+  }
+
+  const onPressSubmit = async () => {
+    logger.debug('[CheckoutForm] Form submission initiated')
+    const allFields = Object.keys(initialValues)
+
+    // Create touched fields with special handling for nested ticket holders
+    const touchedFields = allFields.reduce(
+      (acc, field) => {
+        // Handle ticketHolders specially as a nested structure
+        if (field === 'ticketHolders') {
+          // Create a properly structured touched fields object for ticket holders
+          acc[field] = formik.values.ticketHolders.map(() => ({
+            firstName: true,
+            lastName: true,
+            email: true,
+            phone: true,
+          }))
+        } else {
+          // Mark all other fields as touched
+          acc[field] = true
+        }
+        return acc
+      },
+      {} as Record<string, boolean | Record<string, boolean>[]>
+    )
+
+    const result = await formik.setTouched(touchedFields, true)
+    const formErrors = typeof result === 'object' ? result : {}
+    const paymentValid = isCardFormComplete || isTicketFree || !isSinglePageCheckout
+    logger.debug('[CheckoutForm] submitting', {
+      paymentValid,
+      isCardFormComplete,
+      isTicketFree,
+      isSinglePageCheckout,
+    })
+
+    if (!paymentValid) {
+      setCardFormError(texts.payment.errorRequired)
+    }
+
+    if (Object.keys(formErrors).length === 0 && paymentValid) {
+      logger.debug('[CheckoutForm] Form validation passed, submitting', {
+        email: formik.values.email,
+      })
+      formik.handleSubmit()
+      return
+    }
+    logger.warn('[CheckoutForm] Form validation failed', {
+      errors: Object.keys(formErrors),
+      paymentValid,
+    })
+
+    const firstErroredKey = formFieldsOrder.find(
+      (k) => (formErrors as any)[k as keyof typeof formErrors] != null
+    )
+
+    if (firstErroredKey === 'ticketHolders') {
+      const thErrors = (formErrors as any).ticketHolders as Array<any>
+      if (Array.isArray(thErrors)) {
+        const erroredIndex = thErrors.findIndex((e) => e && Object.keys(e).length > 0)
+        if (erroredIndex >= 0) {
+          scrollToField(`ticketHolders[${erroredIndex}]`)
+          logger.debug('[CheckoutForm] Scrolling to errored ticket holder', {
+            index: erroredIndex,
+          })
+          return
+        }
+      }
+      scrollToField('ticketHolders')
+    } else if (firstErroredKey) {
+      scrollToField(firstErroredKey)
+    } else if (!paymentValid) {
+      scrollToField('isCardFormComplete')
+    }
+  }
+
+  const handleAddonChange = useCallback(
+    (addonId: string, quantity: number) => {
+      formik.setFieldValue(`addons.${addonId}.quantity`, quantity)
+      if (quantity > 0) {
+        // reapply defaults if coming from 0
+        addonCustomFields.forEach((field) => {
+          if (field.defaultValue != null) {
+            formik.setFieldValue(
+              `addons.${addonId}.customFields.${field.name}`,
+              Array.isArray(field.defaultValue)
+                ? field.defaultValue.join(',')
+                : field.defaultValue
+            )
+          }
+        })
+      }
+      onAddonChange?.(addonId, quantity)
+    },
+    [formik, onAddonChange]
+  )
+  return (
+    <FormikProvider value={formik}>
+      {isInitialLoading && <Loading />}
+      <View style={styles.form} collapsable={false}>
+        <View onLayout={(e) => (fieldTopRef.current.firstName = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'firstName',
+              type: FieldType.INPUT,
+              label: texts.form.firstName,
+              placeholder: texts.form.firstNamePlaceholder,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View onLayout={(e) => (fieldTopRef.current.lastName = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'lastName',
+              type: FieldType.INPUT,
+              label: texts.form.lastName,
+              placeholder: texts.form.lastNamePlaceholder,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View onLayout={(e) => (fieldTopRef.current.email = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'email',
+              type: FieldType.INPUT,
+              label: texts.form.email,
+              placeholder: texts.form.emailPlaceholder,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View
+          onLayout={(e) =>
+            (fieldTopRef.current.emailConfirmation = e.nativeEvent.layout.y)
+          }
+        >
+          <FormikField
+            field={{
+              name: 'emailConfirmation',
+              type: FieldType.INPUT,
+              label: texts.form.emailConfirmation,
+              placeholder: texts.form.emailConfirmationPlaceholder,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View onLayout={(e) => (fieldTopRef.current.password = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'password',
+              type: FieldType.INPUT,
+              label: texts.form.password,
+              placeholder: texts.form.passwordPlaceholder,
+              hide: isLoggedIn,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View
+          onLayout={(e) =>
+            (fieldTopRef.current.passwordConfirmation = e.nativeEvent.layout.y)
+          }
+        >
+          <FormikField
+            field={{
+              name: 'passwordConfirmation',
+              type: FieldType.INPUT,
+              label: texts.form.passwordConfirmation,
+              placeholder: texts.form.passwordConfirmationPlaceholder,
+              hide: isLoggedIn,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View onLayout={(e) => (fieldTopRef.current.phone = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'phone',
+              type: FieldType.PHONE,
+              label: texts.form.phone,
+              placeholder: texts.form.phonePlaceholder,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View onLayout={(e) => (fieldTopRef.current.phone = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'dateOfBirth',
+              type: FieldType.DATE_PICKER,
+              label: texts.form.dateOfBirth,
+              placeholder: texts.form.dateOfBirthPlaceholder,
+              hide: !isAgeRequired,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View
+          onLayout={(e) => (fieldTopRef.current.dateOfBirth = e.nativeEvent.layout.y)}
+        >
+          <FormikField
+            field={{
+              name: 'street',
+              type: FieldType.INPUT,
+              label: texts.form.street,
+              placeholder: texts.form.streetPlaceholder,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View onLayout={(e) => (fieldTopRef.current.street = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'city',
+              type: FieldType.INPUT,
+              label: texts.form.city,
+              placeholder: texts.form.cityPlaceholder,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View onLayout={(e) => (fieldTopRef.current.country = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'country',
+              type: FieldType.SELECT,
+              label: texts.form.country,
+              options: countries.map((c) => ({
+                value: String(c.id),
+                label: c.name,
+              })),
+              onChange: (val) => {
+                onCountryChange(val)
+              },
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View onLayout={(e) => (fieldTopRef.current.country = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'state',
+              type: FieldType.SELECT,
+              label: texts.form.state,
+              options: states,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View onLayout={(e) => (fieldTopRef.current.postalCode = e.nativeEvent.layout.y)}>
+          <FormikField
+            field={{
+              name: 'postalCode',
+              type: FieldType.INPUT,
+              label: texts.form.postalCode,
+              placeholder: texts.form.postalCodePlaceholder,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        {orderCustomFields.map((field) => (
+          <View
+            key={field.name}
+            onLayout={(e) => (fieldTopRef.current[field.name] = e.nativeEvent.layout.y)}
+          >
+            <FormikField
+              field={{
+                name: `customFields.${field.name}`,
+                type: getFieldType(field.type),
+                label: texts.form.customFields?.[field.name]?.label ?? field.label,
+                placeholder:
+                  texts.form.customFields?.[field.name]?.placeholder ??
+                  (field.description || `Enter ${field.label}`),
+                options: field.options?.map((option) => ({
+                  value: option.value,
+                  label: option.name,
+                })),
+              }}
+              styles={fieldComponentStyles}
+            />
+          </View>
+        ))}
+        <View>
+          <FormikField
+            field={{
+              name: 'isSubToTicketFairy',
+              type: FieldType.CHECKBOX,
+              label: texts.marketingOptIns.ticketFairyOptIn,
+            }}
+            styles={fieldComponentStyles}
+          />
+          <FormikField
+            field={{
+              name: 'isSubToBrand',
+              type: FieldType.CHECKBOX,
+              label: texts.marketingOptIns.organizerOptIn,
+            }}
+            styles={fieldComponentStyles}
+          />
+        </View>
+        <View
+          collapsable={false}
+          onLayout={(e) => {
+            fieldTopRef.current.ticketHolders = e.nativeEvent.layout.y
+          }}
+        >
+          <Text style={styles.sectionTitle}>{texts.ticketHolders.title}</Text>
+
+          {formik.values.ticketHolders.map((_, index) => {
+            const ticketLabel = (
+              texts.ticketHolders.itemTitle || 'Ticket {index}'
+            ).replace('{index}', String(index + 1))
+
+            return (
+              <View
+                key={index}
+                collapsable={false}
+                onLayout={(e) => {
+                  const sectionY = fieldTopRef.current.ticketHolders ?? 0
+                  const holderY = sectionY + e.nativeEvent.layout.y
+                  fieldTopRef.current[`ticketHolders[${index}]`] = holderY
+                }}
+              >
+                <Text style={styles.ticketHolderTitle}>{ticketLabel}</Text>
+
+                <View
+                  collapsable={false}
+                  onLayout={(e) => {
+                    const baseY =
+                      fieldTopRef.current[`ticketHolders[${index}]`] ??
+                      fieldTopRef.current.ticketHolders ??
+                      0
+                    fieldTopRef.current[`ticketHolders[${index}].firstName`] =
+                      baseY + e.nativeEvent.layout.y
+                  }}
+                >
+                  <FormikField
+                    field={{
+                      name: `ticketHolders[${index}].firstName`,
+                      type: FieldType.INPUT,
+                      label: texts.ticketHolders.firstName,
+                      placeholder: texts.ticketHolders.firstNamePlaceholder,
+                    }}
+                    styles={fieldComponentStyles}
+                  />
+                </View>
+
+                <View
+                  collapsable={false}
+                  onLayout={(e) => {
+                    const baseY =
+                      fieldTopRef.current[`ticketHolders[${index}]`] ??
+                      fieldTopRef.current.ticketHolders ??
+                      0
+                    fieldTopRef.current[`ticketHolders[${index}].lastName`] =
+                      baseY + e.nativeEvent.layout.y
+                  }}
+                >
+                  <FormikField
+                    field={{
+                      name: `ticketHolders[${index}].lastName`,
+                      type: FieldType.INPUT,
+                      label: texts.ticketHolders.lastName,
+                      placeholder: texts.ticketHolders.lastNamePlaceholder,
+                    }}
+                    styles={fieldComponentStyles}
+                  />
+                </View>
+
+                <View
+                  collapsable={false}
+                  onLayout={(e) => {
+                    const baseY =
+                      fieldTopRef.current[`ticketHolders[${index}]`] ??
+                      fieldTopRef.current.ticketHolders ??
+                      0
+                    fieldTopRef.current[`ticketHolders[${index}].email`] =
+                      baseY + e.nativeEvent.layout.y
+                  }}
+                >
+                  <FormikField
+                    field={{
+                      name: `ticketHolders[${index}].email`,
+                      type: FieldType.INPUT,
+                      label: texts.ticketHolders.email,
+                      placeholder: texts.ticketHolders.emailPlaceholder,
+                    }}
+                    styles={fieldComponentStyles}
+                  />
+                </View>
+
+                <View
+                  collapsable={false}
+                  onLayout={(e) => {
+                    const baseY =
+                      fieldTopRef.current[`ticketHolders[${index}]`] ??
+                      fieldTopRef.current.ticketHolders ??
+                      0
+                    fieldTopRef.current[`ticketHolders[${index}].phone`] =
+                      baseY + e.nativeEvent.layout.y
+                  }}
+                >
+                  <FormikField
+                    field={{
+                      name: `ticketHolders[${index}].phone`,
+                      type: FieldType.PHONE,
+                      label: texts.ticketHolders.phone,
+                      placeholder: texts.ticketHolders.phonePlaceholder,
+                      hide: isPhoneHidden,
+                    }}
+                    styles={fieldComponentStyles}
+                  />
+
+                  {/* Ticket custom fields */}
+                  {ticketCustomFields.map((field) => (
+                    <FormikField
+                      key={`${index}-${field.name}`}
+                      field={{
+                        name: `ticketHolders[${index}].customFields.${field.name}`,
+                        type: getFieldType(field.type),
+                        label:
+                          texts.ticketHolders.customFields?.[field.name]?.label ??
+                          field.label,
+                        required: field.required,
+                        placeholder:
+                          texts.ticketHolders.customFields?.[field.name]?.placeholder ??
+                          (field.description || `Enter ${field.label}`),
+                        options: field.options?.map((option) => ({
+                          value: option.value,
+                          label: option.name,
+                        })),
+                      }}
+                      styles={fieldComponentStyles}
+                    />
+                  ))}
+                </View>
+              </View>
+            )
+          })}
+        </View>
+        <View style={styles.sectionContainer}>
+          <MemoizedAddonsContainer
+            addonCustomFields={addonCustomFields}
+            addons={formik.values.addons}
+            availableAddons={availableAddons || []}
+            onAddonChange={handleAddonChange}
+            currency={eventCurrency}
+            styles={addonsStyles}
+            texts={{
+              title: texts.addons.title,
+              quantityLabel: texts.addons.quantityLabel,
+              priceWithFeesSuffix: texts.addons.priceWithFeesSuffix,
+            }}
+          />
+        </View>
+        {/* Event Conditions */}
+        {conditions && conditions.length > 0 && (
+          <View style={styles.sectionContainer}>
+            <MemoizedConditions
+              conditions={conditions}
+              acceptedConditions={formik.values.acceptedConditions}
+              onAcceptCondition={(conditionId, isAccepted) => {
+                formik.setFieldValue('acceptedConditions', {
+                  ...formik.values.acceptedConditions,
+                  [conditionId]: isAccepted,
+                })
+              }}
+              texts={{
+                title: texts.conditions.title,
+                viewButton: texts.conditions.viewButton,
+                hideButton: texts.conditions.hideButton,
+                acceptCheckbox: texts.conditions.acceptLabel,
+              }}
+            />
+          </View>
+        )}
+
+        {/* Payment - only show in single-page mode and if ticket is not free */}
+        {!isTicketFree && isSinglePageCheckout && (
+          <View
+            style={styles.sectionContainer}
+            onLayout={(e) =>
+              (fieldTopRef.current.isCardFormComplete = e.nativeEvent.layout.y)
+            }
+          >
+            <Payment
+              orderItems={orderItems}
+              onFormComplete={(details) => {
+                logger.debug('[CheckoutForm] Payment form complete', { ...details })
+                if (details.complete) {
+                  setCardFormError(undefined)
+                }
+                setIsCardFormComplete(details.complete)
+              }}
+              error={cardFormError}
+              styles={styles}
+              texts={{
+                orderSummary: texts.orderSummary,
+                payment: texts.payment,
+              }}
+            />
+          </View>
+        )}
+
+        {/* Submit Button */}
+        <TouchableOpacity
+          style={[styles.button, isSubmitting ? styles.buttonDisabled : {}]}
+          onPress={onPressSubmit}
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? (
+            <ActivityIndicator size="small" color="#ffffff" />
+          ) : (
+            <Text style={styles.buttonText}>
+              {isSinglePageCheckout
+                ? texts.buttons.singlePageSubmit
+                : texts.buttons.goToPayment}
+            </Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </FormikProvider>
+  )
+}
+
+interface PaymentProps {
+  onFormComplete: (details: CardFormView.Details) => void
+  error?: string
+  orderItems: IOrderItem[]
+  paymentViewProps?: ViewProps
+  styles: CheckoutFormComputedStyles
+  texts: {
+    orderSummary: CheckoutFormOrderSummaryTexts
+    payment: CheckoutFormPaymentTexts
+  }
+}
+
+export const Payment = ({
+  onFormComplete,
+  error,
+  orderItems,
+  paymentViewProps,
+  styles,
+  texts,
+}: PaymentProps) => {
+  return (
+    <View>
+      <View style={styles.sectionContainer}>
+        <Text style={styles.sectionTitle}>{texts.orderSummary.sectionTitle}</Text>
+        <MemoizedOrderReview
+          orderItems={orderItems}
+          styles={{
+            rootContainer: styles.orderReviewContainer,
+            item: styles.orderReviewItem,
+          }}
+        />
+      </View>
+
+      <View style={styles.sectionContainer} {...paymentViewProps}>
+        <Text style={styles.sectionTitle}>{texts.payment.sectionTitle}</Text>
+        <View style={styles.paymentContainer}>
+          <CardForm
+            onFormComplete={(details) => {
+              logger.warn('[PaymentForm] CardForm onFormComplete triggered', {
+                complete: details.complete,
+                details: JSON.stringify(details),
+              })
+
+              onFormComplete(details)
+            }}
+            style={styles.cardContainer}
+            cardStyle={styles.cardStyle}
+            autofocus={false}
+          />
+
+          {error ? <Text style={styles.errorText}>{error}</Text> : null}
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export const PaymentForm = ({
+  orderItems,
+  onSubmit,
+  styles: stylesProp,
+  texts: textsProp,
+}: PaymentFormProps) => {
+  const [error, setError] = useState<string>()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isCardFormComplete, setIsCardFormComplete] = useState(false)
+
+  const styles = useMemo<CheckoutFormComputedStyles>(
+    () => mergeCheckoutFormStyles(stylesProp),
+    [stylesProp]
+  )
+
+  const texts = useMemo<Required<CheckoutFormTexts>>(
+    () => mergeCheckoutFormTexts(textsProp),
+    [textsProp]
+  )
+
+  const onFormComplete = (details: CardFormView.Details) => {
+    logger.warn('[PaymentForm] CardForm onFormComplete triggered', {
+      complete: details.complete,
+      details: JSON.stringify(details),
+    })
+    setIsCardFormComplete(details.complete)
+
+    if (details.complete) {
+      setError(undefined)
+      logger.debug('[PaymentForm] Card form marked as complete')
+    } else {
+      logger.debug('[PaymentForm] Card form incomplete')
+    }
+  }
+
+  const onPressSubmit = async () => {
+    try {
+      setIsSubmitting(true)
+
+      // Don't validate isCardFormComplete here - onFormComplete doesn't trigger on Android v40+
+      // Let Stripe's confirmPayment handle validation instead
+      logger.debug('[PaymentForm] Submitting payment', { isCardFormComplete })
+
+      await onSubmit()
+    } catch (e) {
+      const errorMsg = readableError(e)
+      logger.error('[PaymentForm] Payment submission failed', { error: errorMsg })
+      setError(errorMsg)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <View>
+      <Payment
+        orderItems={orderItems}
+        onFormComplete={onFormComplete}
+        error={error}
+        paymentViewProps={{}}
+        styles={styles}
+        texts={{
+          orderSummary: texts.orderSummary,
+          payment: texts.payment,
+        }}
+      />
+      {/* Submit Button */}
+      <TouchableOpacity
+        style={[styles.button, isSubmitting ? styles.buttonDisabled : {}]}
+        onPress={onPressSubmit}
+        disabled={isSubmitting}
+      >
+        {isSubmitting ? (
+          <ActivityIndicator size="small" color="#ffffff" />
+        ) : (
+          <Text style={styles.buttonText}>{texts.buttons.paymentSubmit}</Text>
+        )}
+      </TouchableOpacity>
+    </View>
+  )
+}