Quickstart

This guide will get you set up and ready to use Daimo Pay within minutes. We'll use the SDK to add <DaimoPayButton /> to any React app. This is the recommended flow for the best user experience.

You can prototype using pay-demo as both the API key and App ID.
For production use, you'll need a real API key and App ID. Contact us to get one.

Install

Start by installing @daimo/pay and its peer dependencies:

npm install @daimo/pay wagmi viem@2.x @tanstack/react-query

Wagmi is a React Hooks library for Ethereum.
Viem is a TypeScript interface for Ethereum that performs blockchain operations.
TanStack Query is an async state manager that handles requests, caching, and more.

TypeScript is optional, but recommended.

Usage

Start by setting up a Provider for Wagmi, TanStack Query, and Daimo Pay.

To set up a config for Wagmi, we will use Wagmi's createConfig function with @daimo/pay's getDefaultConfig function. This automatically sets up the Wagmi instance to support all chains and transports supported by Daimo Pay.

When using a framework that supports React Server Components , you will need to include the "use client" directive at the beginning of this file.

You'll put this provider near the root of your project. For example, here's what it might look like for a Next.js project using Tailwind:

layout.tsx

import React, { ReactNode } from 'react'
import { Metadata } from 'next'
import { Providers } from './Providers'

import './globals.css'

export const metadata: Metadata = {
  title: 'My Ethereum App',
  description: 'One-click onboarding from any coin on any chain',
}

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Then, create the Providers component:

Providers.tsx

'use client'

import React from 'react'
import { DaimoPayProvider, getDefaultConfig } from '@daimo/pay'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider, createConfig } from 'wagmi'

const config = createConfig(
  getDefaultConfig({
    appName: 'Daimo Pay Demo',
    ssr: true, // If your project uses server side rendering (SSR)
  }),
)

const queryClient = new QueryClient()

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <DaimoPayProvider>{children}</DaimoPayProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Now that you have your app configured, you can use the DaimoPayButton component to allow users to pay (or deposit, mint, do any arbitrary contract calls) in one click from any chain.

Here's a basic example:

Accept $1 USDC on Optimism

<DaimoPayButton
  appId="pay-demo"
  toChain={10}
  toUnits="1.00" /* $1.00 USDC */
  toToken="0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85"
  toAddress="YOUR-ADDRESS-HERE"
  onPaymentStarted={(e) => console.log(e)}
  onPaymentCompleted={(e) => console.log(e)}
/>

For more code examples, check out the DaimoPayButton Demo.

For detailed docs, continue to the SDK Reference.