Images & Icons

We offer a github repository to be in sync with the latest updates of brand icons of Payment Methods, issuers and other vendors.

We recommand that you load the images from the same servers as the checkout URL. If you are offering a hosted solution to third party's (merchants), you can host the images from a CDN of the certified integrator.

MapTypes
payment_methodsIcons in SVG based on the brand ID of the payment method
payment_method_groupsIcons in SVG based on the ID of the Payment Method Group.
product_typesIcons in SVG based on the ID of the Type of the product line used in the order object.
countriesIcons based on the countycode, for registration of users, merchants and orders
localesIcons based on the available languages that can be used for payer, user and merchant communication.

Git command

Get the Images

git submodule add https://github.com/paynl/payment-images

Update the Images

git submodule update --remote

Manual download

The image pack can be downloaded from:
https://github.com/paynl/payment-images/archive/refs/heads/master.zip

Licence

The images can be used as long as the organisation (merchant and integrator) have a active PAY. membership and the payments that are processed by using the images are handled via PAY.

Download Sample Icons

Payment Method Icons

We recommand to load the images in SVG for online use. If you use them in software that do not support SVG you can also load the PNG versions

<p align="center">
	<img src="payment_methods/1.svg" width="100px"/>
	<img src="payment_methods/2.svg" width="100px"/>
	<img src="payment_methods/3.svg" width="100px"/>
	<img src="payment_methods/4.svg" width="100px"/>
	<img src="payment_methods/8.svg" width="100px"/>
	<img src="payment_methods/132.svg" width="100px"/>
</p>

Payment Method Option (Issuers) Icons

Some Payment Methods have options, like iDEAL as a Payment Method. To eliminatie extra friction and direct communication with the issuer, you can load the list of options also in the checkout. If there is an image, you can use that make your checkout look smoother and let the user recognise their bank.

<p align="center">
	<img src="issuers/1.svg" width="100px"/>
	<img src="issuers/2.svg" width="100px"/>
	<img src="issuers/3.svg" width="100px"/>
	<img src="issuers/5.svg" width="100px"/>
	<img src="issuers/8.svg" width="100px"/>
	<img src="issuers/12.svg" width="100px"/>
</p>

Payment Method Group Icons

Some Payment Methods can be combined in a group, for a smoother checkout. Those images are in the Payment Method Group folder.

<p align="center">
  <img src="payment_method_groups/CASH.svg" width="100px"/>
  <img src="payment_method_groups/VOUCHER.svg" width="100px"/>
  <img src="payment_method_groups/BANKTRANSFER.svg" width="100px"/>
  <img src="payment_method_groups/CNP.svg" width="100px"/>
  <img src="payment_method_groups/ONLINEBANK.svg" width="100px"/>
  <img src="payment_method_groups/PHONE.svg" width="100px"/>
  <img src="payment_method_groups/POS.svg" width="100px"/>
  <img src="payment_method_groups/WALLET.svg" width="100px"/>  
</p>

Core data icons

Also other Core data can have images. If you find an image page in the result of the data request, you can find the right folder in the image library.

examples

FieldEndpointExample URL
countriesCOREdata:get_countries../countries/#id#.svg
<p align="center">
	<img src="countries/nl.svg" width="100px"/>
</p>

What’s Next