aloahmilton/paybrand
Domain:
digital infrastructureRecord type:
software
Creator:
alo
Host:
The only React library with 400+ payment & bank logos — M-Pesa, MTN MoMo, GTBank, Visa, Stripe and more. Africa, Europe, Asia & Americas.
# paybrand
React components and SVG assets for payment, wallet, mobile money, and bank logos across Africa, Europe, Asia, and the Americas.
## Why paybrand?
Most logo packages cover global cards and Western banks first. paybrand is built to make Africa, Asia, and Latin America first-class citizens too: M-Pesa, MTN MoMo, Wave, Orange Money, GCash, bKash, Paytm, Nubank, Nequi, Bancolombia, GTBank, Equity Bank, Capitec, Visa, Mastercard, Apple Pay, Stripe, PayPal, and more.
## Installation
```sh
npm install paybrand
```
```sh
yarn add paybrand
```
```sh
pnpm add paybrand
```
## Quick Start
```tsx
import { PayLogo } from 'paybrand'
export default function CheckoutPage() {
return (
)
}
```
## Components
### `PayLogo`
```tsx
import { PayLogo } from 'paybrand'
```
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `PayLogoName` | required | Logo identifier |
| `size` | `number` | `24` | Width and height in pixels |
| `width` | `number` | - | Override width only |
| `height` | `number` | - | Override height only |
| `variant` | `"full" \| "icon"` | `"full"` | Variant metadata passed as a data attribute |
| `theme` | `"light" \| "dark"` | `"light"` | Theme metadata passed as a data attribute |
| `className` | `string` | - | CSS class name |
| `style` | `CSSProperties` | - | Inline styles |
| `title` | `string` | auto | Accessibility label |
### `BankLogo`
`BankLogo` is a semantic wrapper around `PayLogo` for bank-focused interfaces.
```tsx
import { BankLogo } from 'paybrand'
```
## Utility Functions
```ts
import {
getLogoUrl,
getAllBanks,
getByCountry,
getByRegion,
getByCategory,
getAvailableLogos,
searchLogos,
} from 'paybrand'
```
```ts
const url = getLogoUrl('visa')
const banks = getAllBanks()
const nigerian = getByCountry('NG')
const african = getByRegion('africa')
const wallets = getByCategory('wallet')
const available = getAvailableLogos()
const results = searchLogos('mpesa')
```
## CDN Usage
SVGs are publ …