Quickstart

Get started with Daimo Pay in minutes. Learn how to add <DaimoPayButton /> to your React app to instantly start accepting deposits from anywhere.

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.

Setup

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

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 deposits from any currency on any chain',
}

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

Usage

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.

Deposit USDC on Optimism

Here is a simple page that uses the DaimoPayButton component to make deposits in USDC on Optimism.

page.tsx

'use client'

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

export default function Home() {
  return (
    <DaimoPayButton
      appId="pay-demo" /* Example app ID you can use for prototyping */
      intent="Deposit"
      toChain={optimismUSDC.chainId}
      toToken={getAddress(optimismUSDC.token)}
      toAddress="PAYMENT_RECIPIENT_ADDRESS_HERE"
      onPaymentStarted={(e) => console.log(e)} /* Logs that will appear when the user initiated the payment */
      onPaymentCompleted={(e) => console.log(e)} / * Logs that will appear when the user completed the payment */
    />
  )
}

Congrats you now have a modal. Any payment made will settle as USDC on Optimism to the recipient address you set.

SDK deposit flow — Example: Deposit 10 USDT on Arbitrum to get 10 USDC on Optimism

For more code examples, check out our Demo Page.

For detailed docs, continue to the SDK Reference.