Skip to main content

​
PaymentForm

Renders payment input fields using the merchant’s configured payment provider (Square or Stripe). Handles tokenization and payment submission.

​
Preview

View in Storybook

​
Import

import { PaymentForm } from '@/components/PaymentForm'

​
Usage

<PaymentForm
  provider="square"
  amount={cart.total}
  onPaymentComplete={handlePaymentComplete}
  onError={handlePaymentError}
/>

​
Props

​
provider
'square' | 'stripe'
required
The payment provider configured for this merchant.
​
amount
number
required
The total amount to charge in cents.
​
onPaymentComplete
(token: string) => void
required
Callback fired with the payment token after successful tokenization.
​
onError
(error: PaymentError) => void
required
Callback fired when payment processing fails.

​
Behavior

  • Loads the appropriate payment provider SDK (Square Web Payments or Stripe Elements)
  • Secure iframe-based card input fields
  • Supports Apple Pay and Google Pay when available
  • Displays inline validation errors
  • Shows loading state during payment processing