HyperPay

A powerful React component library for seamlessly integrating cryptocurrency payments into your applications using MetaMask and blockchain technology.

Features

• 🔐 Secure MetaMask Integration - Direct wallet connection for secure transactions
• 💰 Cryptocurrency Payments - Accept payments in various cryptocurrencies
• 🎨 Customizable Styling - Fully customizable component styles
• ⚡ Easy Integration - Simple setup with minimal configuration
• 🌐 Web3 Ready - Built for the decentralized web
• 📦 Lightweight - Optimized bundle size

Installation

Install HyperPay using npm or yarn:

npm install @hypersokrat/hyper-pay

or

yarn add @hypersokrat/hyper-pay

Quick Start

Basic Usage

import { HyperPay } from "@hypersokrat/hyper-pay";

function App() {
  const modulStyles = {
    // Your custom styles
  };

  return (
    <HyperPay
      projectId="your_project_id_here"
      amount={100}
      modulStyles={modulStyles}
    />
  );
}

Admin Setup Guide

1. Admin Account Creation

To get started with HyperPay, administrators need to create an account:

1. Visit the HyperPay admin page and sign up
2. Provide necessary details: username, email, and password

2. MetaMask Address Registration

After logging in to the admin panel, administrators should register their MetaMask address:

1. Navigate to the Company section in the admin panel
2. Register the MetaMask address that will receive cryptocurrency payments
3. This address will automatically generate a unique Project ID for identification purposes

3. Project ID Generation

Upon registering the MetaMask address:

• A unique Project ID is generated automatically
• This Project ID will be used to associate payments with your company's account
• Use this Project ID in your application integration

Integration Guide

Step 1: Install the Library

npm install @hypersokrat/hyper-pay

Step 2: Import the Component

import { HyperPay } from "@hypersokrat/hyper-pay";

Step 3: Connect MetaMask

Users initiate payments securely through MetaMask:

• Click the module button to connect to MetaMask
• This connection authorizes transactions securely
• Users must have MetaMask installed in their browser

Step 4: Implement the Payment Component

import React from "react";
import { HyperPay } from "@hypersokrat/hyper-pay";

function PaymentPage() {
  // Custom styles for the payment module
  const modulStyles = {
    container: {
      padding: "20px",
      borderRadius: "8px",
      backgroundColor: "#f5f5f5"
    },
    button: {
      backgroundColor: "#007bff",
      color: "white",
      padding: "10px 20px",
      borderRadius: "4px"
    }
  };

  return (
    <div>
      <h1>Complete Your Payment</h1>
      <HyperPay
        projectId="your_project_id_here"
        amount={100}
        modulStyles={modulStyles}
      />
    </div>
  );
}

export default PaymentPage;

API Reference

HyperPay Component Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | projectId | string | Yes | - | Your unique project ID obtained from the admin panel | | amount | number | Yes | - | The amount to be paid in cryptocurrency | | modulStyles | object | No | {} | Custom styles object for styling the payment module |

Example with All Props

<HyperPay
  projectId="abc123xyz789"
  amount={250.50}
  modulStyles={{
    container: {
      maxWidth: "500px",
      margin: "0 auto"
    },
    button: {
      backgroundColor: "#28a745",
      color: "#fff"
    }
  }}
/>

Requirements

• React >= 18.0.2
• React DOM >= 18.0.2
• MetaMask browser extension (for users making payments)

Browser Support

• Chrome (recommended)
• Firefox
• Edge
• Brave
• Other MetaMask-compatible browsers

Security

HyperPay ensures secure transactions through:

• Direct MetaMask integration (no third-party payment processors)
• Blockchain-based transaction verification
• Encrypted communication
• Project ID-based authentication

Troubleshooting

MetaMask Not Detected

If users encounter issues connecting MetaMask:

1. Ensure MetaMask extension is installed
2. Check that MetaMask is unlocked
3. Verify the correct network is selected
4. Refresh the page and try again

Payment Not Processing

1. Verify your Project ID is correct
2. Check that the MetaMask address is registered in the admin panel
3. Ensure sufficient balance in the user's wallet
4. Check network connectivity

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC License - see LICENSE file for details

Support

For support and questions:

• Check the documentation
• Open an issue on GitHub
• Contact support through the admin panel

Keywords

cryptocurrency, payments, blockchain, web3, React, crypto-payments, smart-contracts, DeFi, wallet-integration, crypto, decentralized, payment-gateway, crypto-integration, HyperPay

Made with ❤️ by HyperSokrat