FuturePayNG Invoice Payment API v1.0.0 - Developer Documentation

palette1. Brand Identity & Official Logo

The FuturePayNG Payment Mark

FuturePayNG utilizes a distinctive, modern payment mark consisting of a dual-tone geometric emblem:

1. Upper Golden Pill (#F49A25 / #fdc300)

Symbolizing speed, energy, and Nigerian financial dynamism.

2. Lower "F" Body (#1C4ED8 / #0e53c8)

Symbolizing bank-grade trust, biometric security, and stability.

3. Single Wordmark

Always written as FuturePayNG without spaces.

stars2. Vector SVG & React Markup

Official SVG Vector Mark

FuturePayNG

Official Vector SVG CodeSVG

<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- Top Golden Accent Bar -->
  <rect x="5" y="3" width="14" height="4" rx="2" fill="#F49A25"/>
  <!-- Primary Blue "F" Body -->
  <path d="M5 10C5 8.89543 5.89543 8 7 8H14C15.1046 8 16 8.89543 16 10C16 11.1046 15.1046 12 14 12H9V20C9 21.1046 8.10457 22 7 22C5.89543 22 5 21.1046 5 20V10Z" fill="#1C4ED8"/>
</svg>

colorize3. Official Color Tokens

Color Palette Specification

Role Name	Hex Code	RGB Value	Tailwind Class	Usage
FuturePay Blue	#0e53c8	rgb(14, 83, 200)	bg-[#0e53c8]	Primary buttons, header lockup, QR center emblem
FuturePay Gold	#F49A25	rgb(244, 154, 37)	bg-[#F49A25]	Top emblem bar, highlight pills, secondary accents
Deep Slate	#190d3e	rgb(25, 13, 62)	text-[#190d3e]	High-contrast modal headings
Accent Tint	#efedf9	rgb(239, 237, 249)	bg-[#efedf9]	Expiration timestamp container badge

code4. Next.js Component Implementation

Complete Header Lockup in Next.js JSX

FuturePayHeader.jsxReact / JSX

export function FuturePayHeader() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="5" y="3" width="14" height="4" rx="2" fill="#F49A25"/>
        <path d="M5 10C5 8.89543 5.89543 8 7 8H14C15.1046 8 16 8.89543 16 10C16 11.1046 15.1046 12 14 12H9V20C9 21.1046 8.10457 22 7 22C5.89543 22 5 21.1046 5 20V10Z" fill="#1C4ED8"/>
      </svg>
      <span style={{ fontSize: '20px', fontWeight: '800', color: '#190d3e', letterSpacing: '-0.3px' }}>
        FuturePay<span style={{ color: '#F49A25' }}>NG</span>
      </span>
    </div>
  );
}

rule5. Brand Usage Guidelines (Do's and Don'ts)

Brand Integrity Rules

check_circleDO:

• Use the exact #0e53c8 and #F49A25 colors.
• Always spell FuturePayNG as a single word without spaces.
• Display the expiration timestamp from paymentData.expires_at on the web checkout.
• Include client-side canvas jsQR decoding and 3-second status polling on web checkouts.

cancelDON'T:

• Do not write "Future Pay NG" or "FuturePay NG" with spaces.
• Do not invert, rotate, or modify the dual-tone emblem colors.
• Do not alter the QR code aspect ratio or clip the timing corners.
• Do not remove the bank-grade security trust badges on checkouts.

download6. Checkout Screen Example & Download Packages

Production Brand & Checkout Design Packages

Official checkout screen example modeled directly after the web checkout page ("Pay with FuturePayNG with QR code"). Available in both Figma (.FIG) format and standalone high-resolution PNG (.PNG) format.

Web Checkout Preview

Official UI Kit Asset

Web Checkout Screen Example ("Pay with FuturePayNG")

Replicates the exact frontend checkout screen: dynamic QR code with center emblem, 15-minute expiration countdown, customer share button, bank-grade security trust badges, and 3-second live status polling indicator.

FIG

Figma Design (.FIG)Editable vector layers

download

PNG

Standalone PNG Image1000x1840 Retina preview

download

folder_zipDownload Complete Kit (Figma .FIG + PNGs in .ZIP)

Vector Logo (.SVG)

Scalable resolution-independent logo for web, mobile, and print.

High-Res PNG Mark

Transparent 1024x1024 PNG emblem for QR overlays and headers.

downloadDownload PNG