Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions payments/psps/headless-sdk/implementation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,10 @@ The wallet seam, the signer, and the clock all come from the SDK. Then `usePayme
## Prerequisites

- **Node 18+**. The React example uses **Next.js** (App Router); the JavaScript example is framework-neutral.
- A **Reown Project ID** β€” create one at [dashboard.reown.com](https://dashboard.reown.com). Enable the **headless** feature on the project.
- A **WalletConnect Pay Gateway API key** for the WCP API (server-side). [Talk to us](https://share.hsforms.com/1XsMCkUxFT2Cte8SCeAh89wnxw6s) to get onboarded.
- **Headless checkout access** on your WalletConnect Pay account β€” request it from **Developers β†’ API Keys** in the [dashboard](https://merchant.pay.walletconnect.com/en/api-keys). See [Request access and collect the keys](/payments/psps/headless-sdk/overview#request-access-and-collect-the-keys).
- A **Reown project ID**, shown on the **Headless checkout** card once access is granted (public).
- A **Gateway wallet key** (prefix `wcw_`), created from the same card. Secret β€” server-side only.
- A **WalletConnect Pay key** (prefix `wcp_`, or `wcp_test_` for [test mode](/payments/test-mode)) from the same **API Keys** section, for creating payments through the Merchant API.

## Install

Expand Down Expand Up @@ -340,10 +342,10 @@ That's a full gateway. Connect β†’ options β†’ (optional KYC) β†’ confirm β†’ si
## Environment variables

```bash .env.local
# Reown AppKit project ID β€” required for wallet connection / QR pairing (public)
# Reown project ID from the Headless checkout card β€” wallet connection / QR pairing (public)
NEXT_PUBLIC_APPKIT_PROJECT_ID=

# WalletConnect Pay (WCP) API β€” server-side only, NEVER exposed to the browser
# Gateway wallet key (wcw_…) β€” server-side only, NEVER exposed to the browser
WCP_API_URL=https://staging.api.pay.walletconnect.org
WCP_WALLET_API_KEY=
```
Expand Down
37 changes: 37 additions & 0 deletions payments/psps/headless-sdk/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,43 @@ If you just want to accept payments with the least effort, use the [hosted gatew

The Headless SDK supports the full WalletConnect Pay token and network coverage β€” USDC, USDT, EURC, PYUSD and more across Ethereum, Polygon, Base, Optimism, Arbitrum (and Solana, rolling out). See [Token & chain coverage](/payments/token-and-chain-coverage) for the live list.

## Request access and collect the keys

The Headless SDK is gated. Access is granted per account from the [WalletConnect Pay dashboard](https://merchant.pay.walletconnect.com/).

<Steps>

<Step title="Open Developers β†’ API Keys" stepNumber="1">

Go to **Developers β†’ API Keys** in the dashboard and sign in if prompted.

</Step>

<Step title="Request access on the Headless checkout card" stepNumber="2">

Find the **Headless checkout** card and click **Request access**. The WalletConnect Pay team reviews the request and gets back to you.

</Step>

<Step title="Collect your credentials" stepNumber="3">

Once access is granted, the **Headless checkout** card exposes the credentials for embedding the SDK:

- A **Reown project ID** β€” used to configure the Headless feature in Reown AppKit. It is public.
- A **Gateway wallet key** button β€” each key (prefix `wcw_`) authenticates your server against the WalletConnect Pay API.

</Step>

<Step title="Grab your WalletConnect Pay key" stepNumber="4">

In the same **API Keys** section, copy your **WalletConnect Pay key** (prefix `wcp_` for live, `wcp_test_` for test) β€” the Merchant API key used to create payments. See [Test mode](/payments/test-mode) for the difference between the two.

</Step>

</Steps>

With the Reown project ID, a Gateway wallet key, and a WalletConnect Pay key, you have everything needed to run the Headless SDK end to end. Map them to environment variables as shown in [Implementation](/payments/psps/headless-sdk/implementation#environment-variables).

## Full example

The fastest way to learn the SDK is to read the reference checkout it's extracted from. Every snippet in these docs comes from it.
Expand Down
2 changes: 2 additions & 0 deletions payments/psps/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ Reach for the **hosted gateway** if you want to accept payments with the least e

Reach for the **Headless SDK** when you need to **own the experience** end to end β€” wallet selection, network and token choice, compliance prompts, success and error states β€” all inside your own design system and domain, with no redirect to a third-party page.

The Headless SDK is gated: request access from **Developers β†’ API Keys** in the [dashboard](https://merchant.pay.walletconnect.com/en/api-keys) β€” see [Request access and collect the keys](/payments/psps/headless-sdk/overview#request-access-and-collect-the-keys).

<Note>
Both paths run on the same WCP backend and share the same token and network coverage. You can start with the hosted gateway and move to the Headless SDK later without re-doing your backend integration.
</Note>
Expand Down