Actalink Docs
Dashboard
Access

Install & Setup

Acta Access 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 SDK.

This guide explains how to integrate the SDK into your React or Next.js web app using Wagmi, RainbowKit, and Viem clients.

Installation Requirements

Before integrating, ensure your project meets the following dependencies:

1. Core Dependencies

npm install @actalink/sdk viem wagmi @rainbow-me/rainbowkit

2. Required Frameworks

Your frontend should be built on:

  • React 18+ or Next.js 13+ (App Router compatible)
  • TypeScript (recommended)
  • TailwindCSS or your preferred styling setup

Configure Wallet Connection

You need to connect a user wallet using RainbowKit and Wagmi.

Add this setup to your root layout or provider file:

app/components/providers.tsx
import "@rainbow-me/rainbowkit/styles.css";
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { arbitrum, base, bsc, mainnet, optimism, polygon } from "wagmi/chains";
 
export const config = getDefaultConfig({
  appName: "RainbowKit App",
  projectId: "YOUR_PROJECT_ID",
  chains: [arbitrum, base, bsc, mainnet, optimism, polygon],
  ssr: true,
});
 
export function Web3Providers({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false);
  const [queryClient] = useState(() => new QueryClient());
 
  useEffect(() => {
    setMounted(true);
  }, []);
 
  if (!mounted) {
    return null;
  }
 
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>{children}</RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Now include it at the root of your app:

<Providers>
  <YourApp />
</Providers>

Note

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

Set Up Wallet Connection Components

To connect a user’s wallet, use RainbowKit’s ConnectButton.

Example usage inside your app:

app/page.tsx
import { ConnectButton } from "@rainbow-me/rainbowkit";
 
export default function Header() {
  return (
    <div className="flex justify-between items-center p-4">
      <h1 className="text-xl font-bold">Acta Payments</h1>
      <ConnectButton />
    </div>
  );
}

Access Required Clients

The SDK requires two essential Wagmi hooks:

HookPurposeRequired For
useWalletClient()Provides signer (the user’s connected wallet)Sending transactions
usePublicClient()Provides blockchain read accessFetching network data and confirming transactions
app/page.tsx
import { useAccount, useWalletClient, usePublicClient } from "wagmi";
 
const { address, chainId } = useAccount();
const { data: walletClient } = useWalletClient();
const publicClient = usePublicClient();

Initialize the SDK

Before sending payments, initialize the ActaAccessSDK with your unique projectId. You can get the projectId from Developers section of Acta Access on Actalink Dashboard.

app/page.tsx
import { ActaAccessSDK } from "@actalink/sdk";
 
const acta = new ActaAccessSDK({
  projectId: "YOUR_ACTA_PROJECT_ID", // get this from Acta Developer Dashboard
});

Create a Payment Transaction

The SDK supports two types of payments:

(A) One-Time Payment

Use this to send a single payment to a receiver.

import { parseUnits, Address } from "viem";
 
const paymentId = await acta.createOnetimePayment({
  token: "USDC",
  amount: BigInt(parseUnits("10", token.decimals)), // 10 USDC
  chainId: chainId, // must match the connected chain
  receiver: "0xReceiverWalletAddress" as Address,
  signerAddress: address,
  allowMaxTokenApproval: false,
  walletClient: walletClient as any,
  publicClient: publicClient as any,
});

(A) Recurring Payment

For automated periodic transfers.

const paymentId = await acta.createRecurringPayment({
  token: "USDT",
  amount: BigInt(parseUnits("5", token.decimals)), // 5 USDT per interval
  chainId: chainId,
  receiver: "0xReceiverWalletAddress" as Address,
  signerAddress: address,
  allowMaxTokenApproval: false,
  walletClient: walletClient as any,
  publicClient: publicClient as any,
  count: 6, // Number of payments
  intervalUnit: "month", // day | week | month | year
});

Check Payment Status

After creating a payment, track its confirmation status:

const status = await acta.waitForPaymentStatus(paymentId);
 
if (status.status === "success") {
  console.log("✅ Payment confirmed:", status.transactionHash);
} else {
  console.error("❌ Payment failed or timed out");
}

That’s It!

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

  • A fully functional, user-friendly crypto deposit flow
  • Real-time on-chain confirmation tracking

Full Code

app/page.tsx
"use client";
import React, { useState } from "react";
import {
  useAccount,
  usePublicClient,
  useSwitchChain,
  useWalletClient,
} from "wagmi";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { ActaAccessSDK, getTokenByChainIdAndSymbol } from "@actalink/sdk";
import { parseUnits, Address } from "viem";
import { Loader2 } from "lucide-react";
 
export default function ActaPayment() {
  const { address, chainId } = useAccount();
  const { data: walletClient } = useWalletClient();
  const publicClient = usePublicClient();
  const { switchChainAsync } = useSwitchChain();
  const [isLoading, setIsLoading] = useState(false);
 
  const handlePay = async () => {
    if (!walletClient || !address || !chainId) return;
 
    setIsLoading(true);
    try {
      const sdk = new ActaAccessSDK({
        projectId: "YOUR_PROJECT_ID",
      });
 
      const token = getTokenByChainIdAndSymbol(chainId, "USDC");
 
      const paymentId = await sdk.createOnetimePayment({
        token: "USDC",
        amount: BigInt(parseUnits("10", token.decimals)),
        chainId,
        receiver: "0xReceiverAddress" as Address,
        signerAddress: address,
        allowMaxTokenApproval: false,
        walletClient: walletClient as any,
        publicClient: publicClient as any,
      });
 
      const status = await sdk.waitForPaymentStatus(paymentId);
      console.log("Payment result:", status);
    } catch (err) {
      console.error("Payment failed:", err);
    } finally {
      setIsLoading(false);
    }
  };
 
  return (
    <div className="p-8">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Acta Payment Demo</h1>
        <ConnectButton />
      </div>
 
      <button
        onClick={handlePay}
        disabled={isLoading}
        className="px-6 py-3 bg-blue-600 text-white rounded-lg"
      >
        {isLoading ? (
          <Loader2 className="animate-spin w-4 h-4" />
        ) : (
          "Pay 10 USDC"
        )}
      </button>
    </div>
  );
}

Next

Environments

Next

Setup

On this page