I don't wanna lose this code as it's probably same as most checkout forms.

checkout_form.ts

 {/* Payment info card */}
      <form
        className="bg-white rounded-2xl px-10 py-8 w-full mt-6 widescreenConstraint"
        onSubmit={handleSubmit}>
        <h2 className="font-fredoka font-bold text-3xl">Payment Information</h2>
        <input
          type="tel"
          name="cardNumber"
          placeholder="Credit Card Number"
          className="w-full mt-4 p-4 rounded-2xl border-[1px] border-lightGrey"
          pattern="\d{13,19}"
          value={info.cardNumber}
          onChange={handleInputChange}
          required
        />
        <input
          type="text"
          name="name"
          placeholder="Name"
          className="w-full mt-4 p-4 rounded-2xl border-[1px] border-lightGrey"
          value={info.name}
          onChange={handleInputChange}
          required
        />
        <div className="flex gap-x-6 mdmax:flex-col">
          <input
            type="tel"
            name="expiryDate"
            placeholder="Expiry Date"
            className="basis-1/2 mt-4 p-4 rounded-2xl border-[1px] border-lightGrey"
            pattern="\d\d/\d\d"
            value={info.expiryDate}
            onChange={handleInputChange}
            required
          />
          <input
            type="tel"
            name="cvc"
            placeholder="CVC"
            className="basis-1/2 mt-4 p-4 rounded-2xl border-[1px] border-lightGrey"
            pattern="\d{3,4}"
            value={info.cvc}
            onChange={handleInputChange}
            required
          />
        </div>

        <div className="bg-white mt-6 mdmax:mt-10 mdmax:mb-6 w-full flex justify-start mdmax:justify-center">
          <img
            src="/web_imgs/common/powered_by_stripe.png"
            alt="Powered by Stripe"
            className="block w-32"
          />
        </div>
      </form>