@555x402/hyperlink

Create shareable payment links that work anywhere - social media, messaging apps, QR codes

Overview

Hyperlink enables creators to generate payment links they can share anywhere. Recipients click the link, pay via crypto or fiat, and funds settle instantly to the creator's wallet—no platform integration required.

Use cases:

• Content creators accepting tips
• Freelancers receiving payments
• Event organizers collecting fees
• Charities accepting donations
• Anyone wanting a simple payment page

Features

• ✅ Universal Links: Work on Twitter, Discord, WhatsApp, email, QR codes
• ✅ Username Support: Pretty URLs like 555.rendernet.work/@alice
• ✅ Crypto + Fiat: Accept USDC, SOL, credit cards, bank transfers
• ✅ Embedded Wallet: Payers don't need existing wallet
• ✅ Instant Settlement: Funds arrive in seconds
• ✅ QR Codes: Generate payment QR codes
• ✅ Analytics: Track clicks, conversions, earnings
• ✅ React Components: Drop-in payment buttons

Installation

npm install @555x402/hyperlink @solana/web3.js
# or
pnpm add @555x402/hyperlink @solana/web3.js

Quick Start

Create a Payment Link (API)

import { HyperlinkClient } from '@555x402/hyperlink';

const client = new HyperlinkClient({
  apiKey: process.env.HYPERLINK_API_KEY!,
  apiBase: 'https://api.rendernet.work/pub/v1'
});

// Create link for your wallet
const link = await client.createLink({
  username: 'alice',           // Optional pretty URL
  wallet: 'your_solana_wallet',
  displayName: 'Alice Smith'
});

console.log(`Share your link: ${link.url}`);
// → https://555.rendernet.work/@alice

React Payment Button

import { PaymentLink } from '@555x402/hyperlink';
import { useWallet } from '@solana/wallet-adapter-react';

export function TipButton() {
  return (
    <PaymentLink
      to="creator_wallet_address"
      amount="5.00"
      mint="EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"
    >
      <button className="tip-button">
        Tip $5 USDC
      </button>
    </PaymentLink>
  );
}

Generate QR Code

import { buildPayLinkUrl, generateQR } from '@555x402/hyperlink';

const url = buildPayLinkUrl('@alice');
const qr = await generateQR(url, { size: 512 });

// qr.dataUrl → data:image/png;base64,...
// Use in <img src={qr.dataUrl} />

API Reference

Class: HyperlinkClient

Constructor

new HyperlinkClient(options: HyperlinkOptions)

Options:

interface HyperlinkOptions {
  apiKey: string;
  apiBase?: string;
}

Methods

createLink(params): Promise<Link>

Creates a new payment link.

Parameters:

interface CreateLinkParams {
  username?: string;      // Optional: pretty URL (@username)
  wallet: string;         // Recipient Solana wallet
  displayName?: string;   // Display name on payment page
  description?: string;   // What the payment is for
  fixedAmount?: number;   // Optional: fixed amount in USD
  metadata?: object;      // Custom data
}

Returns:

interface Link {
  code: string;           // Link code (if no username)
  username?: string;      // Username (if set)
  url: string;            // Full shareable URL
  qrUrl: string;          // QR code endpoint
}

Example:

const link = await client.createLink({
  username: 'alice',
  wallet: '555Tm1cfV52SrBQmnxXiHMUMrpci8miW3CkLP1Qbmtd7',
  displayName: 'Alice Smith',
  description: 'Tips for great content',
  metadata: { social: '@alice_creates' }
});

// Share link.url on social media
await navigator.clipboard.writeText(link.url);

getLink(codeOrUsername): Promise<LinkDetails>

Retrieves link details.

Parameters:

• codeOrUsername (string): Link code or @username

Example:

const details = await client.getLink('@alice');
console.log(`Wallet: ${details.wallet}`);
console.log(`Total earnings: $${details.stats.totalEarnings}`);

getLinkStats(codeOrUsername): Promise<LinkStats>

Get analytics for a link.

Returns:

interface LinkStats {
  clicks: number;
  uniqueVisitors: number;
  totalPayments: number;
  totalEarnings: number;  // USD
  conversionRate: number; // percentage
}

Helper Functions

buildPayLinkUrl(codeOrUsername, base?): string

Builds full payment link URL.

buildPayLinkUrl('@alice')
// → https://555.rendernet.work/@alice

buildPayLinkUrl('abc123', 'https://custom.domain')
// → https://custom.domain/p/abc123

generateQR(url, options?): Promise<QRCode>

Generates QR code for payment link.

Options:

interface QROptions {
  size?: number;     // 256, 512, 1024
  format?: 'png' | 'svg';
  color?: string;    // Foreground color
  bgColor?: string;  // Background color
}

Returns:

interface QRCode {
  dataUrl: string;   // data:image/png;base64,...
  buffer: Buffer;    // Raw image data
}

withAttribution(url, params): string

Adds attribution parameters to link.

const url = withAttribution('https://555.rendernet.work/@alice', {
  ref: 'twitter',
  campaign: 'q4-2025'
});
// → https://555.rendernet.work/@alice?ref=twitter&campaign=q4-2025

React Components

<PaymentLink> Component

One-click SPL token payment button (requires user wallet).

Props:

interface PaymentLinkProps {
  to: string;              // Recipient wallet or @username
  amount: string;          // Amount in token units
  mint?: string;           // Token mint (defaults to SOL)
  children: React.ReactNode;
  onSuccess?: (signature: string) => void;
  onError?: (error: Error) => void;
}

Example:

import { PaymentLink } from '@555x402/hyperlink';

<PaymentLink
  to="@alice"
  amount="10.00"
  mint="EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"
  onSuccess={(sig) => toast.success(`Paid! Tx: ${sig}`)}
  onError={(err) => toast.error(err.message)}
>
  <button className="...">
    Send $10 USDC
  </button>
</PaymentLink>

<CreateLinkButton> Component (Future)

Button that opens modal to create new payment link.

import { CreateLinkButton } from '@555x402/hyperlink';

<CreateLinkButton
  wallet={userWallet}
  onCreated={(link) => {
    console.log(`Created: ${link.url}`);
    setMyLinks(prev => [...prev, link]);
  }}
>
  Create Payment Link
</CreateLinkButton>

Examples

1. Creator Tip Page

'use client';

import { HyperlinkClient } from '@555x402/hyperlink';
import { useEffect, useState } from 'react';

export default function TipPage({ username }: { username: string }) {
  const [linkDetails, setLinkDetails] = useState(null);
  
  useEffect(() => {
    const client = new HyperlinkClient({ apiKey: process.env.NEXT_PUBLIC_API_KEY! });
    client.getLink(`@${username}`).then(setLinkDetails);
  }, [username]);
  
  if (!linkDetails) return <div>Loading...</div>;
  
  return (
    <div className="...">
      <h1>Tip @{username}</h1>
      <p>{linkDetails.displayName}</p>
      
      <PaymentLink to={linkDetails.wallet} amount="5.00">
        <button>Tip $5</button>
      </PaymentLink>
    </div>
  );
}

2. Freelancer Invoice

const client = new HyperlinkClient({ apiKey: API_KEY });

const invoice = await client.createLink({
  username: 'freelancer_bob',
  wallet: 'bob_wallet',
  fixedAmount: 500.00,
  description: 'Website Design - Project #123',
  metadata: {
    invoiceId: 'INV-2025-001',
    dueDate: '2025-11-30',
    client: 'Acme Corp'
  }
});

// Send invoice.url to client via email
await sendEmail(clientEmail, `Invoice: ${invoice.url}`);

3. Event Ticket Sales

const ticket = await client.createLink({
  username: 'conference_2025',
  wallet: organizer_wallet,
  fixedAmount: 50.00,
  description: 'Early Bird Ticket',
  metadata: {
    event: 'DevCon 2025',
    tier: 'early_bird',
    perks: ['workshop_access', 'swag_bag']
  }
});

// QR code for physical posters
const qr = await generateQR(ticket.url, { size: 1024 });
await fs.writeFile('ticket-qr.png', qr.buffer);

Testing

npm test

Test Payment Flow

import { HyperlinkClient } from '@555x402/hyperlink';

describe('Hyperlink', () => {
  it('creates link with username', async () => {
    const client = new HyperlinkClient({ apiKey: TEST_KEY });
    
    const link = await client.createLink({
      username: 'test_user',
      wallet: TEST_WALLET
    });
    
    expect(link.url).toContain('@test_user');
  });
});

Migration from v0.x

// Old (v0.x)
const url = `https://555.rendernet.work/p/${code}`;

// New (v1.x)
import { buildPayLinkUrl } from '@555x402/hyperlink';
const url = buildPayLinkUrl(code);

Changelog

v0.1.0 (2025-11-11)

• Initial release
• Link creation API
• PaymentLink React component
• QR code generation
• Username support

License

MIT © 555x402

Support

• Docs: https://docs.rendernet.work/hyperlink
• Issues: https://github.com/Render-Network-OS/555x402-hyperlink/issues
• Discord: https://discord.gg/555x402

Accept payments anywhere 💰