stripe checkout using solid-ui

checkout.tsx

import { TbCalendar, TbCreditCard, TbLock, TbMail } from "solid-icons/tb"

import { Button } from "~/components/ui/button"
import { Checkbox } from "~/components/ui/checkbox"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from "~/components/ui/dialog"
import { Col, Grid } from "~/components/ui/grid"
import { Input } from "~/components/ui/input"
import { Label } from "~/components/ui/label"

export default function Home() {
  return (
    <main class="flex h-screen w-full items-center justify-center">
      <Dialog>
        <DialogTrigger as={Button}>Checkout</DialogTrigger>
        <DialogContent class="w-[360px]">
          <DialogHeader>
            <DialogTitle>Checkout</DialogTitle>
            <DialogDescription>Stripe Payment</DialogDescription>
          </DialogHeader>
          <div class="relative">
            <Input placeholder="Email" class="pl-8" />
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              <TbMail class="text-muted-foreground" />
            </div>
          </div>
          <Grid cols={2} class="gap-0">
            <Col span={2}>
              <div class="relative">
                <Input placeholder="Card number" class="rounded-b-none border-b-0 pl-8" />
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                  <TbCreditCard class="text-muted-foreground" />
                </div>
              </div>
            </Col>
            <div class="relative">
              <Input placeholder="MM / YY" class="rounded-r-none  rounded-t-none border-r-0 pl-8" />
              <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                <TbCalendar class="text-muted-foreground" />
              </div>
            </div>
            <div class="relative">
              <Input placeholder="CVC" class="rounded-l-none rounded-t-none pl-8" />
              <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                <TbLock class="text-muted-foreground" />
              </div>
            </div>
          </Grid>
          <div class="flex items-center space-x-2">
            <Checkbox id="remember" />
            <div class="grid gap-1.5 leading-none">
              <Label for="remember-input">Remember me</Label>
            </div>
          </div>
          <DialogFooter>
            <Button type="submit" class="w-full">
              Pay $45.00
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </main>
  )
}