> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kryptopay.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Use KryptoPay checkout as a controlled React component.

Use `KryptoPayModal` from `@kryptopay/sdk/react`.

```tsx theme={null}
import { useState } from "react";
import { KryptoPayModal } from "@kryptopay/sdk/react";

export function Checkout({ clientSecret }: { clientSecret: string }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Pay</button>

      <KryptoPayModal
        open={open}
        clientSecret={clientSecret}
        merchantName="Acme Store"
        onClose={() => setOpen(false)}
        onSuccess={(event) => {
          console.log("paid", event.payment_intent_id, event.tx_hash);
        }}
      />
    </>
  );
}
```

`open` is controlled by your component state. Set it to `false` on `onClose`.