PHPackages clntdev/blade-payment-icons - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. clntdev/blade-payment-icons ActiveLibrary[Templating & Views](/categories/templating) clntdev/blade-payment-icons =========================== Laravel Blade components for SVG credit card and payment icons 1.1.0(1mo ago)0145↓66.7%Apache-2.0PHPPHP ^8.3CI passing Since Feb 17Pushed 3mo agoCompare [ Source](https://github.com/clnt/blade-payment-icons)[ Packagist](https://packagist.org/packages/clntdev/blade-payment-icons)[ RSS](/packages/clntdev-blade-payment-icons/feed)WikiDiscussions production Synced 1mo ago READMEChangelogDependencies (22)Versions (4)Used By (0) Blade Payment Icons =================== [](#blade-payment-icons) A package to easily make use of Payment Icons in your Laravel Blade views. Installation ------------ [](#installation) ``` composer require clntdev/blade-payment-icons ``` The service provider is auto-discovered. To publish the config: ``` php artisan vendor:publish --tag=blade-payment-icons-config ``` Optionally publish SVGs or views for customization: ``` php artisan vendor:publish --tag=blade-payment-icons-svg php artisan vendor:publish --tag=blade-payment-icons-views ``` Usage ----- [](#usage) This package provides two ways to use icons: 1. **Blade Icons syntax** - standard `blade-ui-kit/blade-icons` integration for simple icon rendering 2. **Payment Icon component** - enhanced component with alias resolution, auto-sizing, and variant support ### Blade Icons (Recommended for simple usage) [](#blade-icons-recommended-for-simple-usage) Icons are available as Blade components, directives, and helpers via the [blade-icons](https://github.com/blade-ui-kit/blade-icons) ecosystem. ``` {{-- Component --}} {{-- Directive --}} @svg('payicon-visa', 'w-10 h-6') {{-- Helper --}} {{ svg('payicon-visa') }} ``` The `payicon` prefix uses the configured default format (flat). To use a specific format, use the format-specific prefix: FormatPrefixExampleDefault (config)`payicon```Flat`payflat```Flat Rounded`payflatrounded```Logo`paylogo```Logo Border`paylogoborder```Mono`paymono```Mono Outline`paymonooutline```> **Note:** Blade Icons syntax uses SVG filenames directly (e.g., `americanexpress`, not `amex`). For alias resolution and variant support, use the Payment Icon component below. ### Payment Icon Component [](#payment-icon-component) The `` component provides additional features including alias resolution, automatic aspect ratio sizing, and variant support. ``` ``` ### Formats [](#formats) Six visual formats are available: `flat`, `flatRounded`, `logo`, `logoBorder`, `mono`, `monoOutline`. ``` ``` ### Sizing [](#sizing) Width defaults to `40px`. Height is auto-calculated to maintain the 780:500 aspect ratio. You can set either dimension - the other adjusts automatically. ``` ``` ### Aliases [](#aliases) Card types can be referenced by their aliases. These are case-insensitive and ignore dashes/underscores. ``` {{-- Resolves to AmericanExpress --}} {{-- Resolves to Generic --}} ``` ### Variants [](#variants) Some cards have variants. You can reference them directly by alias or use the `variant` prop. ``` {{-- Via alias (resolves to Generic type with "code" variant) --}} {{-- Via explicit variant prop --}} ``` ### Attribute Forwarding [](#attribute-forwarding) Standard HTML/Blade attributes are forwarded to the rendered `` element. ``` ``` The SVG includes `role="img"` and an `aria-label` by default for accessibility. Available Icons --------------- [](#available-icons) TypeDisplay NameAliasesVariantsVisaVisa--MastercardMastercard--AmericanExpressAmerican ExpressAmex-DiscoverDiscover--DinersClubDiners Club--JCBJCB--MaestroMaestro--EloElo--MirMir--UnionPayUnionPay--HipercardHipercard-HiperAlipayAlipay--PayPalPayPal--SwishSwish--GenericGeneric Card (Front)GenericCard, GenericCardFrontCode (back/CVV), CodeFront (front CVV)The **Generic** card's `Code` variant has additional aliases: `GenericBack`, `GenericCardBack`, `CvvBack`, `CvcBack`, `Cvv`, `Cvc`. The `CodeFront` variant has: `GenericFrontCode`, `CvvFront`, `CvcFront`. Icon Formats ------------ [](#icon-formats) FormatDirectoryDescription`flat``flat/`Flat design`flatRounded``flat-rounded/`Flat with rounded corners`logo``logo/`Centered logo only`logoBorder``logo-border/`Logo with border`mono``mono/`Monochrome`monoOutline``mono-outline/`Monochrome outlineConfiguration ------------- [](#configuration) After publishing the config (`config/blade-payment-icons.php`), you can customize: ### Defaults [](#defaults) ``` 'default_format' => 'flat', // Default icon format 'default_width' => 40, // Default width in pixels (height auto-calculated) ``` ### Card Definitions [](#card-definitions) Each card entry in the `cards` array supports the following fields: FieldTypeDescription`type``string`Canonical type name used for file resolution (e.g. `Visa`, `AmericanExpress`)`displayName``string`Human-readable name`aliases``string[]`Alternative names that resolve to this type`variants``array`Named sub-types with their own SVG files (see below)`testNumbers``string[]`Sample card numbers for testing`patterns``array`Regex patterns for card detection - `full` (complete numbers) and `prefix` (partial input)`lengthRange``array|null``min`/`max` digit count, or `null` for non-card payment methods`formatPattern``array|null`Digit grouping for display formatting (e.g. `[4, 4, 4, 4]` or length-keyed like `[14 => [4, 6, 4], 16 => [4, 4, 4, 4]]`)`issuingCountries``string[]|null`ISO country codes or `GLOBAL`#### Variants [](#variants-1) Variants are defined as a keyed array within a card definition: ``` 'variants' => [ 'Hiper' => [ 'slug' => 'hiper', // Used for SVG filename resolution 'displayName' => 'Hiper', 'aliases' => [], // Optional additional aliases ], ], ``` The `slug` maps to an SVG file. For example, Hipercard's `Hiper` variant resolves to `hiper.svg` in the chosen format directory. #### Pattern Matching [](#pattern-matching) Cards are detected by regex patterns. The `prefix` pattern matches partial input (useful for real-time detection as users type), while `full` patterns validate complete card numbers: ``` 'patterns' => [ 'full' => ['^4[0-9]{12}(?:[0-9]{3})?$'], // Complete Visa number 'prefix' => '^4', // Starts with 4 ], ``` Cards with more specific patterns are checked first to avoid false matches (e.g. Elo's specific BIN ranges are checked before Mastercard's broader 5xxx range). Card Utilities -------------- [](#card-utilities) The package registers `CardUtilities` and `CardMetadata` as singletons. Resolve them from the container to detect, validate, format, and mask card numbers. ``` use Clntdev\BladePaymentIcons\CardUtilities; $utilities = app(CardUtilities::class); // Detect card type from number $utilities->getCardType('4242424242424242'); // 'Visa' $utilities->getCardType('378282246310005'); // 'AmericanExpress' $utilities->getCardType('4242'); // 'Visa' (partial match) // Validate with Luhn algorithm CardUtilities::validateCardNumber('4242424242424242'); // true // Format with appropriate spacing $utilities->formatCardNumber('4242424242424242'); // '4242 4242 4242 4242' $utilities->formatCardNumber('378282246310005'); // '3782 822463 10005' // Mask showing last 4 digits $utilities->maskCardNumber('4242424242424242'); // '**** **** **** 4242' // Validate number matches a specific type $utilities->validateCardForType('4242424242424242', 'Visa'); // true $utilities->validateCardForType('4242424242424242', 'Mastercard'); // false // Filter cards by issuing country $utilities->getCardsByCountry('BR'); // ['Elo', 'Hipercard', 'Visa', ...] $utilities->getCardsByCountry('BR', ['includeGlobal' => false]); // ['Elo', 'Hipercard'] ``` Credits ------- [](#credits) SVG icons and card utilities sourced from [react-svg-credit-card-payment-icons](https://github.com/marcovoliveira/react-svg-credit-card-payment-icons) ### Health Score 42 — FairBetter than 90% of packages Maintenance85 Actively maintained with recent releases Popularity15 Limited adoption so far Community6 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~34 days Total 2 Last Release 56d ago PHP version history (2 changes)1.0.0PHP ^8.2 1.1.0PHP ^8.3 ### Community Maintainers ![](https://www.gravatar.com/avatar/e435b69bacc2a02dba78ac929b92950a7b29d496c4164c84cb4b3cdac7d39c82?d=identicon)[Laralabs](/maintainers/Laralabs) --- Top Contributors [![clnt](https://avatars.githubusercontent.com/u/19330442?v=4)](https://github.com/clnt "clnt (12 commits)") --- Tags laraveliconssvgbladepaymentvisamastercardamexcredit-cardblade-icons ### Code Quality TestsPest Code StylePHP\_CodeSniffer ### Embed Badge ![Health badge](/badges/clntdev-blade-payment-icons/health.svg) ``` [![Health](https://phpackages.com/badges/clntdev-blade-payment-icons/health.svg)](https://phpackages.com/packages/clntdev-blade-payment-icons) ``` ### Alternatives [blade-ui-kit/blade-icons A package to easily make use of icons in your Laravel Blade views. 2.5k34.2M309](/packages/blade-ui-kit-blade-icons)[codeat3/blade-google-material-design-icons A package to easily make use of "Google Fonts Material Icons" in your Laravel Blade views. 23494.4k4](/packages/codeat3-blade-google-material-design-icons) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)