Practical overview
When it fits
Use Widgets when a web application needs an embeddable token-payment interface with wallet-directed receipt, multi-blockchain configuration or token-conversion support. Choose managed integrations when server-side callbacks or backend-connected configuration are needed; unmanaged integrations are limited to initiating and executing payments.
Who it is for
- Web developers integrating crypto checkout.
- Teams building wallet-directed donation pages.
- React developers adding token or stablecoin payment choices.
- Builders prototyping DeFi-based payment flows.
Documented uses
- Embed a crypto payment checkout in a web application.
- Accept specified tokens across supported blockchains.
- Send payments directly to a configured receiver wallet.
- Offer fixed or selectable payment amounts.
- Connect managed payment configuration to backend payloads.
Requirements & limits
The repository is public and marked with an MIT license. Installation is documented through a CDN and npm or yarn packages.
- Managed integrations use an integration ID and retrieve configuration from app.depay.com.
- Unmanaged configurations can define accepted payments directly but do not provide callbacks for server-side actions or integrations.
- The package-manager installation requires ethers, react and react-dom as peer dependencies.
- SSR applications such as Next.js must load the widget client-side.
- The README lists EVM and SVM support and names Ethereum, BNB Smart Chain, Polygon, Solana, Optimism, Arbitrum, Avalanche, Gnosis, Base and Worldchain.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Install Widgets in a web application
Add the Widgets package and import it for client-side use.
Before you start
- A JavaScript web application.
- Node package-manager access.
- The documented peer dependencies: ethers, react and react-dom.
Steps
Install @depay/widgets together with ethers, react and react-dom using npm or yarn.
Import DePayWidgets from @depay/widgets in the JavaScript application.
If using SSR such as Next.js, load the widget only on the client side.
Expected outcome
The application has the Widgets package available for a client-side payment integration.
Guide limitations
- This setup sequence does not document the complete payment configuration or a successful payment execution.
- SSR frameworks require client-side-only loading.
Configure a wallet-directed payment widget
Define a payment widget that accepts a token and sends it to a receiver address.
Before you start
- An installed Widgets package or the documented CDN script.
- A supported blockchain identifier.
- A token address and receiver address.
Steps
Call DePayWidgets.Payment with an unmanaged accept configuration.
Set the blockchain, token and receiver values.
Add a human-readable amount, or omit amount so the user can select one.
For multiple payment choices, provide additional blockchain, token and receiver entries in the accept array.
Expected outcome
The application contains a configured wallet-to-wallet payment widget definition.
Guide limitations
- Unmanaged configurations do not provide callbacks for server-side actions or integrations.
- The receiver address must be checked carefully by the implementer.
- The supplied configuration does not specify wallet types, transaction conditions or the full payment flow.
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 2 October 2026
- Original website title
- DePayFi/widgets · Official homepage title · retained in its source language