# Stridge Gateway Kit \[React widgets and headless hooks for any-to-any payments]
The **Stridge Gateway Kit** ([`@stridge/kit`](https://www.npmjs.com/package/@stridge/kit)) is a React component library that turns the Stridge Gateway into a few lines of JSX. Mount `` once, drop in `` and ``, and your users can pay or withdraw across **any supported chain and token** while you settle to a **single asset**.
[**Open the live demo**](https://demo.stridge.com) — a working integration. The [headless demo](https://demo.stridge.com/headless) shows the same flow driven from a custom UI through the kit's hooks.
## What you get
* **Drop-in dialogs** — themed `` and `` covering the entire flow from picker to success state.
* **Headless hooks** — `useDeposit()`, `useDepositState()`, `useWithdraw()` for teams that want to render their own UI.
* **One source of truth for the settlement asset** — `asset={{ chain, symbol }}` configures both flows.
* **Wallet-agnostic** — withdraw runs without `wagmi`. Deposit's wallet-method optionally signs via `wagmi`; QR / address flows work without it.
## Install
```bash
pnpm add @stridge/kit
```
Import the global stylesheet once at your app entry:
```css
@import "@stridge/kit/styles.css";
```
Peer deps: `react ^19`, `react-dom ^19`, `viem >=2.48.1`. Add `wagmi >=3.6.3` only if you enable the deposit wallet method.
## Configure the provider
`` wraps your app. It needs three things: your **gateway key**, the **settlement asset**, and the **flows** you want to enable.
:::info
Find your gateway key in the [Stridge Dashboard](https://beta.dashboard.stridge.com) under **Developer → Gateway Kit → Connection**. The Kit is designed to run client-side, so the public env var pattern below is intended.
:::
### Deposit only
```tsx [app.tsx]
import type { ReactNode } from "react"
import { StridgeProvider } from "@stridge/kit"
export function App({
children,
customerAddress,
}: {
children: ReactNode
customerAddress: `0x${string}`
}) {
return (
{children}
)
}
```
### Withdraw only
```tsx [app.tsx]
import type { ReactNode } from "react"
import { StridgeProvider } from "@stridge/kit"
export function App({
children,
customerAddress,
}: {
children: ReactNode
customerAddress: `0x${string}`
}) {
return (
{children}
)
}
```
Add a sibling key under `flows` to enable both flows on the same provider.
### `asset.chain` accepts three forms
| Form | Example |
| --- | --- |
| Chain slug | `"bsc"`, `"base"`, `"arbitrum"` |
| EIP-155 chain id | `56` |
| Stridge network id | `"9006"` |
Import the typed catalogue from `@stridge/kit` for autocomplete:
```ts
import { chains } from "@stridge/kit"
asset: { chain: chains.bsc, symbol: "USDC" }
```
## Open the deposit dialog
Mount `` once anywhere inside the provider, then call `useDeposit().open()` from any descendant.
```tsx [DepositButton.tsx]
"use client"
import { useDeposit } from "@stridge/kit"
import { DepositDialog } from "@stridge/kit/deposit/dialog"
export function DepositButton() {
const { open } = useDeposit()
return (
<>
)
}
```
The dialog handles the full flow: chain & token picker, QR + copy, status polling, success and failure screens. Funds settle to the `flows.deposit.destination.address` you configured on the provider.
## Open the withdraw dialog
Withdraw asks **you** to broadcast the source-chain transaction (your wallet, custodial signer, or backend), then advances a state machine the dialog renders.
```tsx [WithdrawButton.tsx]
"use client"
import { useWithdraw } from "@stridge/kit"
import { WithdrawDialog } from "@stridge/kit/withdraw/dialog"
export function WithdrawButton({ balance }: { balance: number | undefined }) {
const { open } = useWithdraw()
return (
<>
{
try {
// input.depositTarget — UDA address + chain + token
// input.correlation.owner — Stridge owner for cross-system logs
const txHash = await yourBackend.broadcastWithdraw(input.depositTarget)
actions.beginProcessing({ hash: txHash })
} catch (err) {
actions.fail({
reason: err instanceof Error ? err.message : String(err),
})
}
}}
/>
)
}
```
### `onSubmit` actions
| Action | When to call it |
| --- | --- |
| `actions.beginProcessing(tx?)` | After your broadcast call resolves. Pass the hash if you have one. |
| `actions.setTxHash(tx)` | Later, once the hash is known — upgrades the watcher from best-match to tx-anchored. |
| `actions.succeed()` | Optional terminal success; the dialog otherwise resolves once Stridge confirms settlement. |
| `actions.fail(failure)` | Terminal failure with a `reason` string. |
## Theming
`appearance` controls light/dark mode, accent color, and corner radius. Values are forwarded to the kit's design tokens — set them on `` and every dialog inherits them.
```tsx
```
## Headless integration
Render your own UI without mounting the dialogs. The kit ships hooks for state, snapshots, and actions on both flows.
```tsx
"use client"
import { useDeposit, useDepositState } from "@stridge/kit"
export function CustomDepositPanel() {
const state = useDepositState() // FSM state — "idle" | "in_progress" | …
const { actions } = useDeposit() // imperative actions
// Render your own UI driven by `state`. See the headless demo for a worked
// example: https://demo.stridge.com/headless
return null
}
```
The same pattern mirrors for withdraw via `useWithdraw()` and `useWithdrawState()`. The root entry point ships **no UI** when you stay headless, so the bundle stays clean.
## What runs underneath
The Kit talks to the Stridge Gateway over HTTPS using your gateway key. For backends, server-side integrations, or non-React stacks, see:
* [TypeScript SDK](/sdk) — `@stridge/sdk`, the underlying client used by the Kit.
* [Gateway HTTP API](/gateway/http) — raw `gateway/start`, polling, and `supported-assets` contract.
* [API reference](/api-reference) — every Stridge REST endpoint in full detail.
## Next steps
* Try the [live demo](https://demo.stridge.com) and the [headless demo](https://demo.stridge.com/headless).
* Read the underlying [Universal Deposit Address model](/uda) the Gateway settles through.
* Spin up a [gateway key](https://beta.dashboard.stridge.com) in the Dashboard.