Getting started

Quickstart

Render the D0 Connect Wallet payment rail in five steps and route each session to its server-approved chain and token adapter.

React4 chainsUSDT + USDC15–20 min

1. Install the SDK

terminal

npm install @d0fi/checkout-react wagmi viem @tanstack/react-query

2. Add the wallet provider

Mount one D0 wallet provider above Checkout. It includes the Wagmi and TanStack Query contexts used by EVM wallet discovery and enables Solana Wallet Standard. For TRON, pass your existing TRON wallet state and signer through the host-owned payment adapter.

tsx

'use client';

import { useState, type ReactNode } from 'react';
import { bsc, mainnet } from 'viem/chains';
import {
  createD0fiWalletConfig,
  d0fiSolanaMainnet,
  D0fiWalletProvider,
} from '@d0fi/checkout-react';
import '@d0fi/checkout-react/styles.css';

export function D0WalletProvider({ children }: { children: ReactNode }) {
  const [config] = useState(() => createD0fiWalletConfig({
    appName: 'Your app',
    chains: [mainnet, bsc],
    solana: {
      enabled: true,
      networks: [d0fiSolanaMainnet],
    },
    ssr: true,
  }));

  return <D0fiWalletProvider config={config}>{children}</D0fiWalletProvider>;
}

3. Create a Checkout Session

Call your own backend to create the session. Keep every D0 credential and merchant identity on the server; the browser should receive only the scoped session data it needs to render Checkout.

tsx

const response = await fetch('/api/checkout/sessions', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ orderId, idempotencyKey }),
});

const { sessionId } = await response.json();

4. Render Connect Wallet

Enable only connectWallet for this focused integration. The rail stays hidden unless partnerContractDeposit is also present.

tsx

<CheckoutFeaturesProvider
  features={{
    enabledMethods: {
      crypto: false,
      fiat: false,
      exchange: false,
      wallet: false,
      connectWallet: true,
    },
  }}
>
  <D0fiCheckoutExperience
    purpose="deposit"
    sessionId={sessionId}
    walletHttpBase="/api/d0"
    partnerContractDeposit={partnerContractDeposit}
    embedded
  />
</CheckoutFeaturesProvider>

The adapter is the transaction seam: D0 owns connection and review UI; your application owns the contract address, destination, simulation, submission and confirmation policy.

5. Verify the result

Return the submitted transaction hash from the adapter, then send it to your backend. Wait for chain finality and verify network, asset, destination and amount before marking the order paid.