React checkout

@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

npm install @useroutr/checkout-react

pnpm add @useroutr/checkout-react

yarn add @useroutr/checkout-react

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

Use it

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. The 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:

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

See Branding.

Logos

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

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.

Get started

Accept payments

Concepts

After a payment

Integrate

Install

Use it

Brand it

Logos

Other frameworks

​Install

​Use it

​Brand it

​Logos

​Other frameworks

Install

Use it

Brand it

Logos

Other frameworks