Checkout
Embed DonutMe's checkout experience directly into your application for a seamless payment flow.
Checkout Session Flow
- Customer opens the payment link or embedded checkout
- Customer connects their crypto wallet (MetaMask, Coinbase, WalletConnect, etc.)
- Customer selects a payment option (token + network)
- Customer reviews the payment details and confirms
- Transaction is submitted on-chain
- DonutMe monitors the transaction and confirms payment
- Customer sees a success screen and is optionally redirected
Supported Wallets
DonutMe uses RainbowKit for wallet connections, supporting:
- MetaMask
- Coinbase Wallet
- WalletConnect (200+ wallets)
- Rainbow
- And more via WalletConnect protocol
Payment Options
Each payment plan can support multiple payment options:
| Field | Description |
|---|---|
| Token | ERC-20 token contract (USDT, USDC, DAI, etc.) |
| Network | Blockchain network for the transaction |
| Amount | Token amount the customer needs to pay |
Checkout Appearance
Customize the visual presentation of your checkout page:
Project Settings → Checkout Appearance| Setting | Description |
|---|---|
| Banner | Hero image at top of checkout (recommended: 1200×400) |
| Cover | Project logo/avatar overlapping the banner |
| Accent Color | Primary brand color (hex value) |
| Cover Shape | Border radius of the cover image |
Redirect After Payment
Configure a redirect URL in your payment plan settings. After successful payment, the customer will be redirected to:
{redirectUrl}?txId={transactionId}&status=completedError Handling
If a transaction fails or is rejected:
- The customer sees a clear error message
- A
payment.failedwebhook event is sent - The customer can retry the payment