RokitPay Overview

RokitPay is a modular Web3 payment solution enabling secure Stablecoin 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.
• Stablecoin 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 MNEE or 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 mainnet mnee 0x1

Advantages

Non-custodial system.

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.