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

# React checkout

> A drop-in checkout for React 18 and 19 that follows the payment to completion.

`@useroutr/checkout-react` is the Useroutr checkout as a React component. It shows your user what
to send, where and on which network, follows the payment to completion, and wears your logo and
colour.

## Install

<CodeGroup>
  ```bash npm theme={null}
  npm install @useroutr/checkout-react
  ```

  ```bash pnpm theme={null}
  pnpm add @useroutr/checkout-react
  ```

  ```bash yarn theme={null}
  yarn add @useroutr/checkout-react
  ```
</CodeGroup>

React 18 or 19 is required. The component brings its own styles and never downloads a font.

## Use it

```tsx theme={null}
import { UseroutrCheckout } from "@useroutr/checkout-react";

<UseroutrCheckout
  token={token}
  baseUrl="https://api.sandbox.useroutr.com/v1/public"
  mode="inline"
  theme="light"
  onSuccess={(intent) => showThankYou(intent)}
/>;
```

The `token` comes from a funding intent your server created with the
[Node.js SDK](/sdks/typescript). The [Embedded checkout](/payments/embedded-checkout) guide walks
through the whole flow, and lists every prop.

## Brand it

Your saved logo and colour apply automatically. Override them for one checkout with
`appearance`:

```tsx theme={null}
<UseroutrCheckout
  token={token}
  baseUrl="https://api.sandbox.useroutr.com/v1/public"
  appearance={{ brandColor: "#1d4ed8", radius: "round", fontFamily: "Inter" }}
/>
```

See [Branding](/payments/branding).

## Logos

The package exports the brand marks it uses, so your own screens can match the checkout:

```tsx theme={null}
import { assetMark, networkMark } from "@useroutr/checkout-react";

const Usdc = assetMark("USDC"); // a component, or undefined when there is no mark
const Stellar = networkMark("stellar");
```

## Other frameworks

The checkout's state machine and API client live in the framework-free
`@useroutr/checkout-core`. Use it to build the same checkout in Vue, Svelte or plain
TypeScript. See [Custom checkout](/payments/custom-checkout#building-it-in-the-browser).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.