**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
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
``bash
npm install rokitpay
Integration Example
import React, { useState } from "react";
import { RokitPayModalEvm } from "rokitpay";
export default function App() {
const [modalOpen, setModalOpen] = useState(false);
return (
isOpen={modalOpen}
onClose={() => setModalOpen(false)}
merchant="0xMerchantWalletAddress"
amount={50} // Amount in MNEE or USDC
/>
);
}
``
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.