Quickstart

This guide will get you set up and ready to use Daimo Pay within minutes. Learn how 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.22.0 @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.

While TypeScript is optional, we highly recommend using it for type safety and developer experience. Viem version 2.22.0 or higher is required to include all the chains supported by Daimo Pay.

Usage

Set up providers 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.

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, // Set to 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>
  )
}

Add the Providers component to your application root. Below is an example implementation in a Next.js project.

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>
  )
}

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

Accept $1 USDC on Optimism

Here is a simple page that uses the DaimoPayButton component to accept $1 USDC on Optimism.

page.tsx

'use client'

import { optimismUSDC } from '@daimo/contract'
import { DaimoPayButton } from '@daimo/pay'
import { getAddress } from 'viem'

export default function Home() {
  return (
    <DaimoPayButton
      appId="pay-demo" /* Example app ID you can use for prototyping */
      toChain={optimismUSDC.chainId}
      toUnits="1.00" /* $1.00 USDC */
      toToken={getAddress(optimismUSDC.token)}
      toAddress="PAYMENT_RECIPIENT_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.