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.
Map | Types |
---|---|
payment_methods | Icons in SVG based on the brand ID of the payment method |
payment_method_groups | Icons in SVG based on the ID of the Payment Method Group. |
product_types | Icons in SVG based on the ID of the Type of the product line used in the order object. |
countries | Icons based on the countycode, for registration of users, merchants and orders |
locales | Icons 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
Field | Endpoint | Example URL |
---|---|---|
countries | COREdata:get_countries | ../countries/#id#.svg |
<p align="center">
<img src="countries/nl.svg" width="100px"/>
</p>
Updated 3 months ago