> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coinvoyage.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart: install CoinVoyage and accept payments
> Install @coin-voyage/paykit, configure WalletProvider and PayKitProvider, and render a working PayButton in your React app in minutes.
This guide walks you through installing `@coin-voyage/paykit`, wiring up the required providers, and rendering a `PayButton` that launches the CoinVoyage payment modal — all in under five minutes.
## Prerequisites
* A React application (Next.js, Vite, Create React App, etc.)
* Node.js 18 or later
* A [CoinVoyage account](https://dashboard.coinvoyage.io/)
## Steps
Install `@coin-voyage/paykit` and its required peer dependency `@tanstack/react-query`.
```bash npm theme={null}
npm i @coin-voyage/paykit @tanstack/react-query@^5.90.6
```
```bash pnpm theme={null}
pnpm add @coin-voyage/paykit @tanstack/react-query@^5.90.6
```
```bash yarn theme={null}
yarn add @coin-voyage/paykit @tanstack/react-query@^5.90.6
```
```bash bun theme={null}
bun add @coin-voyage/paykit @tanstack/react-query@^5.90.6
```
Open the [CoinVoyage Dashboard](https://dashboard.coinvoyage.io/) and create an organization if you haven't already. Then navigate to **Developers** and create an API key.
You will receive two values:
* **API Key** (public) — safe to use in client-side code. Expose as `NEXT_PUBLIC_COIN_VOYAGE_API_KEY`.
* **API Secret** — server-side only. Never expose this in client-side code.
Keep your API secret on the server at all times. Only the public API key belongs in client-side code.
Wrap your app with `QueryClientProvider`, `WalletProvider`, and `PayKitProvider`. In a Next.js app, create a `providers.tsx` file:
```tsx providers.tsx theme={null}
"use client";
import { PayKitProvider, WalletProvider } from "@coin-voyage/paykit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
export function Providers({ children }: { children: React.ReactNode }) {
if (!process.env.NEXT_PUBLIC_COIN_VOYAGE_API_KEY) {
throw new Error("NEXT_PUBLIC_COIN_VOYAGE_API_KEY is required");
}
return (
{children}
);
}
```
Then import and use `` in your root layout:
```tsx app/layout.tsx theme={null}
import { Providers } from "./providers";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Add `` anywhere in your app to launch the CoinVoyage payment modal. The example below creates a deposit button that settles 10 SUI to your specified wallet:
```tsx components/deposit-button.tsx theme={null}
"use client";
import { PayButton } from "@coin-voyage/paykit";
import { ChainId } from "@coin-voyage/paykit/server";
export function DepositButton() {
return (
console.log("Payment started")}
onPaymentCompleted={() => console.log("Payment completed")}
/>
);
}
```
When a user clicks the button, CoinVoyage opens a modal where they can select their preferred chain and token to pay with.
## Next steps
Explore all provider options, PayButton props, and the ApiClient.
Understand the full payment lifecycle from PayOrder creation to settlement.
Receive real-time notifications when payments complete or fail.
Monitor transactions, configure settlement, and manage your API keys.