PaymentForm() — ui Function Reference

Architecture documentation for the PaymentForm() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ PaymentForm() — ui Function Reference

Dependency Diagram

graph TD
  56f2600d_9cb9_2048_5680_fdd6454ab449["PaymentForm()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  56f2600d_9cb9_2048_5680_fdd6454ab449 -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style 56f2600d_9cb9_2048_5680_fdd6454ab449 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 1855–1958

export function PaymentForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Payment Information</CardTitle>
        <CardDescription>
          Enter your payment details to complete your purchase
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="payment-9n3-cardNumber-wre">
                Card Number
              </FieldLabel>
              <Input
                id="payment-9n3-cardNumber-wre"
                placeholder="1234 5678 9012 3456"
                maxLength={19}
              />
            </Field>

            <div className="grid grid-cols-2 gap-4">
              <Field>
                <FieldLabel htmlFor="payment-9n3-expiry-9oa">
                  Expiry Date
                </FieldLabel>
                <Input
                  id="payment-9n3-expiry-9oa"
                  placeholder="MM/YY"
                  maxLength={5}
                />
              </Field>
              <Field>
                <FieldLabel htmlFor="payment-9n3-cvv">CVV</FieldLabel>
                <Input id="payment-9n3-cvv" placeholder="123" maxLength={4} />
                <FieldDescription>3 or 4 digit security code.</FieldDescription>
              </Field>
            </div>

            <Field>
              <FieldLabel htmlFor="payment-9n3-cardName-tko">
                Name on Card
              </FieldLabel>
              <Input id="payment-9n3-cardName-tko" placeholder="John Doe" />
            </Field>

            <Separator />

            <FieldSet>
              <FieldLegend>Billing Address</FieldLegend>
              <FieldDescription>
                Please enter your billing address.
              </FieldDescription>
              <FieldGroup>
                <Field>
                  <FieldLabel htmlFor="payment-9n3-address-a7f">
                    Address
                  </FieldLabel>
                  <Input
                    id="payment-9n3-address-a7f"
                    placeholder="123 Main St"
                  />
                </Field>
                <div className="grid grid-cols-2 gap-4">
                  <Field>
                    <FieldLabel htmlFor="payment-9n3-city-sgj">City</FieldLabel>
                    <Input id="payment-9n3-city-sgj" placeholder="New York" />
                  </Field>
                  <Field>
                    <FieldLabel htmlFor="payment-9n3-zip">ZIP Code</FieldLabel>
                    <Input id="payment-9n3-zip" placeholder="10001" />
                  </Field>
                </div>
                <Field>
                  <FieldLabel htmlFor="payment-9n3-country-7r4">
                    Country
                  </FieldLabel>
                  <Select>
                    <SelectTrigger>