Payment Icons Widget
Tell shoppers before checkout which ways they can pay. Pick the cards, wallets, buy-now-pay-later and local methods you really accept, put them in your order, and show them as coloured card tiles, single-colour footer glyphs, outlines or white tiles that sit on any background.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="payment-icons" data-methods="visa,mastercard,amex,paypal,applepay,googlepay"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
Choose methods in the builder's payment picker - 27 are available, from Visa, Mastercard, American Express and Discover through PayPal, Apple Pay, Google Pay, Shop Pay, Klarna and Afterpay to UPI, iDEAL, SEPA Direct Debit, bank transfer and cash on delivery. The six that appear first are only a sample set; replace them with what your checkout actually offers, because a mark on the page reads as a promise. Ids are read in your order, unknown names are dropped and a method listed twice is shown once. The Cards style paints each tile in the mark's usual colour and picks white or near-black for the glyph by WCAG luminance, so pale marks such as Klarna's pink or Afterpay's mint still get a readable glyph. Light puts every glyph on a white tile in its brand colour when that colour reaches the 3:1 contrast WCAG asks of graphics, otherwise in ink. Mono draws the glyphs in your text colour for footers, and Outline adds a thin frame around each. Methods with no clean public glyph - Maestro, UnionPay, Amazon Pay, UPI, iDEAL, bank transfer, cash on delivery - become neat text tiles rather than a copied logo. Every tile is an image named after its method and the row is announced as Payment methods we accept.
Method
- Methods = the publisher's comma list, in order, known ids only, no repeats, at most 30 (blank = the sample set visa, mastercard, amex, paypal, applepay, googlepay)
- Cards: tile = brand colour; glyph = #ffffff or #111827, whichever has the higher WCAG contrast ratio with the tile
- Light: glyph = brand colour when contrast(brand, white) >= 3:1 (WCAG 1.4.11 non-text contrast), else #111827
- Each tile: role="img" with aria-label = method name; the list: aria-label = "Payment methods we accept"
Worked examples
A UK clothing shop
Inputs: Methods visa, mastercard, amex, paypal, applepay, klarna; style Cards; heading We accept
Result: Six coloured tiles in that order under the words We accept; Klarna's pink tile carries a dark glyph, the others white
The ink on each tile is picked by contrast, so the pale pink tile is the only one with a dark glyph.
A footer on a navy background
Inputs: Methods upi, googlepay, paypal, cod; style Mono; theme Inherit
Result: Four glyphs in the footer's own text colour; UPI and Cash on delivery as text tiles
Mono uses currentColor, so the row follows whatever colour the footer CSS sets.
A typing slip
Inputs: Methods Visa, visa, bitcoins, PayPal
Result: Two tiles: Visa, PayPal
The repeat and the unknown name are dropped; nothing else is added.
Limitations
- Shows methods; it does not check that your checkout really offers them.
- Seven methods are text tiles because no clean open glyph exists for them.
- Brand colours are the marks' usual tile colours; exact brand artwork (gradients, card art) is not reproduced.
Where publishers use it
- A small online shop adding a row of Visa, Mastercard, PayPal and Apple Pay tiles under the Add to basket button so buyers stop wondering whether their wallet works
- An Indian store footer showing UPI, Google Pay and cash on delivery in the mono style that matches its dark footer
- A Dutch webshop listing iDEAL, Klarna and SEPA Direct Debit beside its delivery information
- A booking site placing white Light tiles on a photo banner where brand-coloured tiles would clash
Questions
Is it all right to show these logos on my site?
Showing the mark of a payment method you genuinely accept is the ordinary way merchants tell customers how they can pay, and card schemes and wallet providers expect it. Show only methods your checkout really offers, do not alter the marks or imply a partnership, and follow any brand guidance your payment provider gives you. The marks remain the trademarks of their owners; A2Z draws the glyphs from Simple Icons path data, released under CC0, and claims nothing over the brands.
Why are some methods plain text tiles instead of logos?
Maestro, UnionPay, Amazon Pay, UPI, iDEAL, bank transfer and cash on delivery either have no reliable single-colour glyph in the open icon set or are generic methods with no logo at all. Rather than trace a brand's artwork, the widget writes the method's name in a tile of the same size and colour, which is clear to shoppers and avoids an inaccurate copy of a logo.
Why do Visa, Mastercard and the others appear before I choose anything?
They are a sample so the preview is not empty, and the builder tells you to change them. Untick anything you do not accept before you copy the code. If you type only names the widget does not know, nothing is shown at all - it never falls back to marks you did not pick.
Can a visitor click a tile to pay?
No. The tiles are a statement of accepted methods, not buttons; they link nowhere and start no payment. Payment still happens in your own checkout, and the widget never touches card data, wallets or provider scripts.
Which style suits a footer?
Mono draws every glyph in the footer's own text colour, so it looks deliberate on dark or coloured footers; choose the Inherit theme to take the colour straight from your CSS. Outline adds a thin frame around each glyph. Cards and Light suit product pages and checkout summaries, where colour helps recognition.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Payment Icons https://a2z.tools/embed/payment-icons
<a href="https://a2z.tools/embed/payment-icons">A2Z Tools Payment Icons</a>
[A2Z Tools Payment Icons](https://a2z.tools/embed/payment-icons)
Payment Icons by A2Z Tools - https://a2z.tools/embed/payment-icons
Related widgets
-
Two to five shop promises - delivery, returns, checkout, support - as an icon strip, grid or compact row.
-
A discount code in a dashed ticket with one-tap Copy, terms, an honest last day and a Shop now link.
-
A free-delivery threshold message with a progress meter showing how much more a basket needs.
-
Your own claims - family owned, free estimates, licensed - as clean badges, each marked self-declared.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
-
A slim bar or small circle that fills as visitors read your article - measured through the article itself.
