RokitPay Overview

RokitPay is a modular Web3 payment solution enabling secure USDC payments on multiple EVM-compatible blockchains. It provides an easy-to-integrate modal that handles wallet connection, transaction processing, and responsive UX for merchants and users.

Key Features

• Multi-chain support: Works with major EVM-compatible networks such as Polygon, BSC, Ethereum, and Base.
• Wallet integration: Users can connect their preferred Web3 wallets securely.
• USDC payments: Focused on stablecoin payments for predictable transaction value.
• Processing state management: Includes loading spinners and disables user interaction while transactions are being processed.
• Responsive design: Scales dynamically to screen width for optimal mobile and desktop experience.
• Customizable modal: Merchants can embed the payment modal with adjustable parameters (amount, chain, merchant ID).
• Smooth UX: Animated modal transitions, dark overlays during processing, and clear step-by-step instructions for users.

Impact

1. Frictionless Web3 payments
   RokitPay abstracts complex blockchain interactions, allowing users to pay with a single modal without dealing with raw transaction details.

2. Increased merchant conversion
   Simplifies crypto payments and handles the UI/UX of wallet connection, reducing payment abandonment.

3. Cross-chain compatibility
   Merchants can accept payments on multiple networks, broadening audience reach.

4. Security & transparency
   Transactions are handled client-side through user wallets, reducing centralized exposure to funds.

5. Developer-friendly
   Easy integration into React apps with minimal configuration: just pass merchant, amount, and chain.

Installation

npm install rokitpay


Integration Example
import React, { useState } from "react";
import { RokitPayModalEvm } from "rokitpay";

export default function App() {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Pay with RokitPay</button>

      <RokitPayModalEvm
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        merchant="0xMerchantWalletAddress"
        amount={50} // Amount in USDC
      />
    </div>
  );
}

Component Behavior

Open Modal Sets the modal visible and disables body scrolling.

Connect Wallet Users connect via EvmConnectButton.

Payment Step Users pay USDC via PaymentButton. Modal shows a spinner while processing.

Close Modal On transaction completion or cancellation, resets processing state and closes modal.

Supported Chains Chain Chain ID (Hex) Polygon USDC 0x89

Advantages

Funds stay in user wallets until payment confirmation — no need to trust a centralized service.

Modular and reusable across different projects or product pages.

Built-in accessibility and responsive design ensures good UX across devices.

Real-time visual feedback during payments improves trust and usability.

RokitPay bridges Web3 payment infrastructure and everyday merchant needs, enabling stablecoin adoption in a clean, developer-friendly React package.

RokitPay bridges Web3 payment infrastructure and everyday merchant needs, enabling stablecoin adoption in a clean, developer-friendly React package.