@peltier/react

Drop-in payment widgets for React (web) — accept any ERC-20 on any chain and settle as USDC at your destination. Ships <DepositWidget>, per-flow checkout components, an EIP-1193 send flow, plus the provider and headless hooks when you want to build your own UI.

npm install @peltier/react viem

Quickstart

import { PeltierProvider, DepositWidget } from '@peltier/react'
import '@peltier/react/styles.css'

function App() {
  return (
    <PeltierProvider apiUrl="https://api.peltier.dev" publishableKey="pk_live_…">
      <DepositWidget
        destinationAddress="0xYourAddress"  // optional — omit for a self-serve destination panel
        destinationChainId={8453}
        onComplete={(id) => console.log('Done:', id)}
      />
    </PeltierProvider>
  )
}

publishableKey is required — <PeltierProvider> throws at mount without a valid pk_test_… / pk_live_… key (a secret sk_ key is rejected outright; never ship it to the browser). The key's prefix selects the environment (test → testnet, live → mainnet), and every session the widgets create is tagged with your merchant, so it shows up in GET /v1/requests and the dashboard's Requests page.

destinationAddress is optional: omit it and the widget renders an editable Destination panel (the depositor enters where their USDC lands) and holds off registration until one is set.

Components

| Component | Flow | |---|---| | <DepositWidget> | one-time deposit from any chain/token (QR + address, live status) | | <PeltierCheckout> | merchant checkout against a payment session | | <PeltierRequest> | request/receive — share a link or QR, watch it settle | | <PeltierSend> | send flow with quote preview | | <SendFromWallet> | send driven by any EIP-1193 wallet provider, with fail-closed calldata verification (allowedRouters is required) | | <QuotePreview> | standalone route/quote display |

Styling: import @peltier/react/styles.css once; pass a PeltierTheme to customize.

Headless hooks

Every widget's engine is exported as a hook, so you can keep the logic and own the markup: useDepositSession, useRequestSession, useSendFromWallet, useStealthRequest, and usePeltier (provider context).

Engines surface a typed error: PeltierError (code + retryable) and a connectionState (connecting | live | reconnecting | polling) so your UI can reflect failure and transport health.

Core surface included

The browser-safe @peltier/core surface is re-exported from the package root: registerSession, watchSession, intent signing, stealth helpers, quotes, parse402, chain constants, and the typed PeltierApiError. Server-only sk_ helpers (payment-session creation, webhook verification, the subscriptions REST client) are deliberately not exported here — they belong on your server, via @peltier/node.

Test mode

Use a pk_test_ key and every flow routes to testnet counterparts automatically (Base Sepolia, Arbitrum Sepolia, …) — Stripe-style key parity, no config flag.

Docs

Full props tables live on the docs site: PeltierProvider · DepositWidget · Supported chains

License

MIT