Install & Setup

Acta Deposit is built for developer speed. Whether you're working on a dApp, crypto exchange, or a fintech platform, you can start accepting secure crypto deposits in just a few minutes using the Actalink React widget.

This section walks you through:

Installing the widget
Setting up the necessary providers
Rendering a live deposit button in your app
Executing a test deposit (e.g., 1 USDC on Polygon)

Let’s go step-by-step.

Install the Widget

First, install the official widget package:

npm install @actalink/widget@latest

Note

The widget currently supports React and Next.js. Integration for other frameworks (Vue, Svelte, etc.) is coming soon.

Wrap the Required Providers

app/page.tsx

import '@rainbow-me/rainbowkit/styles.css';
import "../node_modules/@a.annzzz/directdeposit-widget/dist/index.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
const queryClient = new QueryClient();
 
<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

Render the Deposit Button

Now that everything is set up, let’s add a functional deposit button to your app. This button will trigger the deposit flow when clicked.

src/pages/index.tsx

 
'use client'
 
import { Widget, ConnectorType } from '@actalink/widget'
import { useAccount } from 'wagmi'
 
export default function DepositPage() {
  const { address } = useAccount()
 
  return (
   <Widget
   address={walletAddress}
   token="USDC"
   network={137}
   projectId
   ready={true}
   reccurring={true}
   wagmiConfig={config}
  />
  )
}

Explained

address: Address of Payer wallet.
projectId: Unique Id for Deposit project.
amount: Value in smallest unit (1 USDC = 1,000,000 micro USDC)
chainId: 137 is Polygon Mainnet
token: The symbol of the token to deposit
receiver: The wallet or smart account address where funds will be deposited
feeInclusive: Whether the deposit fee should be deducted from the user or added on top
recurring: Option to enable recurring deposit action on widget.
walletClient: Required for EIP-1193 wallet interaction (comes from Wagmi)
wagmiConfig: Location of wagmi configuration file.

Test It Live (1 USDC on Polygon)

Once integrated:

Open your app in the browser.
Connect a wallet like MetaMask.
Click the Deposit button.
Confirm the transaction in the wallet popup.
You’ll see a success callback once the transaction is confirmed.

You can also configure webhooks to get server-side notifications when the deposit is confirmed. (Covered in the Webhooks section.)

That’s It!

You’ve successfully integrated the Acta Deposit widget. In just a few lines of code, you now have: