demo/acme-web code browser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { useState } from "react";
import { Button } from "../ui/Button";
import { Input } from "../ui/Input";

type Props = { onToken: (token: string) => void; payLabel: string };

// CardForm collects card details and hands back a processor token; the
// card number never reaches our servers.
export function CardForm({ onToken, payLabel }: Props) {
  const [number, setNumber] = useState("");
  const [expiry, setExpiry] = useState("");
  const [cvc, setCvc] = useState("");
  const valid = number.replace(/\s/g, "").length >= 15 && expiry.length === 5 && cvc.length >= 3;

  return (
    <form
      onSubmit={async (e) => {
        e.preventDefault();
        onToken(await tokenize(number, expiry, cvc));
      }}
    >
      <Input label="Card number" value={number} onChange={(e) => setNumber(e.target.value)} />
      <Input label="Expiry" placeholder="MM/YY" value={expiry} onChange={(e) => setExpiry(e.target.value)} />
      <Input label="CVC" value={cvc} onChange={(e) => setCvc(e.target.value)} />
      <Button disabled={!valid}>{payLabel}</Button>
    </form>
  );
}

declare function tokenize(number: string, expiry: string, cvc: string): Promise<string>;