README

WordPress icon collection with payment method icons by Pronamic Pay.

WordPress 7.1 introduced the Icon API and the Icon block. This plugin registers a Pronamic Pay icon collection with single-colour icons of popular payment methods, so websites can show the accepted payment methods in for example a header or footer in a way that blends into the design.

Requirements

WordPress 7.1+
PHP 8.3+

Installation

Plugin

Download the ZIP from the releases, upload it via Plugins → Add New → Upload Plugin and activate Pronamic Pay Icons.

Composer library

composer require pronamic/pronamic-pay-wp-icons

\Pronamic\PronamicPayIcons\Plugin::instance();

The icons are registered on the init action. On WordPress versions without the Icon API nothing is registered.

Usage

Icon block

Insert the Icon block.
Open the icon picker and select the Pronamic Pay collection.
Optionally set a text and/or background colour, the icon follows the text colour.

Block pattern

The Payment method icons pattern (category Pronamic Pay and Footer) inserts a row with the iDEAL | Wero, Bancontact, PayPal, Apple Pay, Google Pay and Klarna icons.

PHP

echo \wp_get_icon( 'pronamic-pay/ideal-wero', [ 'size' => 32, 'label' => 'iDEAL | Wero' ] );

Icons

Icon	Name	WordPress icon name
	Apple Pay	`pronamic-pay/apple-pay`
	Apple	`pronamic-pay/apple`
	Bancontact ribbon	`pronamic-pay/bancontact-ribbon`
	Bancontact	`pronamic-pay/bancontact`
	Google monogram	`pronamic-pay/google-monogram`
	Google Pay	`pronamic-pay/google-pay`
	iDEAL \| Wero	`pronamic-pay/ideal-wero`
	iDEAL	`pronamic-pay/ideal`
	Klarna monogram	`pronamic-pay/klarna-monogram`
	Klarna	`pronamic-pay/klarna`
	PayPal monogram	`pronamic-pay/paypal-monogram`
	PayPal	`pronamic-pay/paypal`
	SEPA euro outlined	`pronamic-pay/sepa-euro-outline`
	SEPA euro solid	`pronamic-pay/sepa-euro-solid`
	SEPA filled euro	`pronamic-pay/sepa-filled-euro`
	SEPA outlined euro	`pronamic-pay/sepa-outlined-euro`
	Wero monogram	`pronamic-pay/wero-monogram`
	Wero	`pronamic-pay/wero`

Each icon folder contains a README.md with the source of the icon. See icons/README.md for the icon guidelines and how to add an icon.

Development

composer install
npm install
npx wp-env start

The .wp-env.json maps the source to wp-content/plugins/pronamic-pay-wp-icons-dev and the build to wp-content/plugins/pronamic-pay-wp-icons.

Screenshots and wordpress.org assets

The screenshots, banner and icon in .wordpress-org/ are generated with Playwright, see scripts/screenshots/.

npx playwright install chromium
npx wp-env start
npm run screenshots
npm run screenshots:assets

The screenshots temporarily add a few demo pages to the wp-env site and remove them afterwards. The raw screenshots are saved in build/screenshots/ and then framed on an orange background into .wordpress-org/. To adjust only the frame, run npm run screenshots:frame; no WordPress needed. The Screenshots workflow runs the same scripts on GitHub and opens a pull request with the changed images.

Code quality

composer run phpcs
composer run phpstan
composer run build
composer run make-pot

Trademarks

All payment method names and marks are trademarks of their respective owners. The icons are simplified single-colour versions; see the README.md in each icon folder for the source and trademark owner.

License

GPL-2.0-or-later

pronamic / pronamic-pay-wp-icons

Package info

Security

Fund package maintenance!

Statistics