CSS plugin
The payments plugin adds payment provider logos, such as Visa or PayPal, as CSS classes for checkout pages and forms.
Installation
The payment logos are a plugin. Include tabler-payments.css or tabler-payments.min.css in your page to enable them.
You can also include the plugin via CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-payments.min.css" />Payment
Add the payment class to an element and a payment-provider-* class with the provider name. The full list is at the end of this page.
<span class="payment payment-provider-shopify"></span>
<span class="payment payment-provider-visa"></span>
<span class="payment payment-provider-paypal"></span>Payment sizes
Add a size class such as payment-lg to scale the logo. The names follow the usual Bootstrap pattern.
<span class="payment payment-xl payment-provider-shopify"></span>
<span class="payment payment-lg payment-provider-visa"></span>
<span class="payment payment-md payment-provider-paypal"></span>
<span class="payment payment-sm payment-provider-amazon"></span>
<span class="payment payment-xs payment-provider-blik"></span>Light and dark logos
Every provider ships in two variants. payment-provider-* is the light one, and payment-provider-*-dark is meant for a dark surface.
<span class="payment payment-lg payment-provider-visa-dark"></span>
<span class="payment payment-lg payment-provider-paypal-dark"></span>
<span class="payment payment-lg payment-provider-mastercard-dark"></span>Accepted methods in a checkout
The usual place for these logos is under a payment form, to say which cards you take. They are decoration there, so keep the list in text as well.
We accept Visa, Mastercard and PayPal.
<div>
<div class="text-secondary mb-2">We accept Visa, Mastercard and PayPal.</div>
<div class="d-flex gap-1" aria-hidden="true">
<span class="payment payment-provider-visa"></span>
<span class="payment payment-provider-mastercard"></span>
<span class="payment payment-provider-paypal"></span>
</div>
</div>List of available payment providers
Every provider below comes in a light and a dark variant. Pick the one that matches the surface it sits on.
| Icon light | Icon dark | Provider name | CSS class |
|---|---|---|---|
| 2c2p | .payment-provider-2c2p.payment-provider-2c2p-dark | ||
| 2checkout | .payment-provider-2checkout.payment-provider-2checkout-dark | ||
| ACH Transfer | .payment-provider-ach-transfer.payment-provider-ach-transfer-dark | ||
| Adyen | .payment-provider-adyen.payment-provider-adyen-dark | ||
| Affirm | .payment-provider-affirm.payment-provider-affirm-dark | ||
| Afterpay | .payment-provider-afterpay.payment-provider-afterpay-dark | ||
| Airtm | .payment-provider-airtm.payment-provider-airtm-dark | ||
| Airwallex | .payment-provider-airwallex.payment-provider-airwallex-dark | ||
| Alipay Plus | .payment-provider-alipay-plus.payment-provider-alipay-plus-dark | ||
| Alipay | .payment-provider-alipay.payment-provider-alipay-dark | ||
| Allegro Pay | .payment-provider-allegro-pay.payment-provider-allegro-pay-dark | ||
| Amazon Pay | .payment-provider-amazon-pay.payment-provider-amazon-pay-dark | ||
| Amazon | .payment-provider-amazon.payment-provider-amazon-dark | ||
| American Express | .payment-provider-americanexpress.payment-provider-americanexpress-dark | ||
| Ant Group | .payment-provider-ant-group.payment-provider-ant-group-dark | ||
| Apple Pay | .payment-provider-applepay.payment-provider-applepay-dark | ||
| Authorize | .payment-provider-authorize.payment-provider-authorize-dark | ||
| Autopay | .payment-provider-autopay.payment-provider-autopay-dark | ||
| Bancontact | .payment-provider-bancontact.payment-provider-bancontact-dark | ||
| Bank of America | .payment-provider-bank-of-america.payment-provider-bank-of-america-dark | ||
| Barclays | .payment-provider-barclays.payment-provider-barclays-dark | ||
| BBVA | .payment-provider-bbva.payment-provider-bbva-dark | ||
| Binance USD | .payment-provider-binance-usd.payment-provider-binance-usd-dark | ||
| Binance | .payment-provider-binance.payment-provider-binance-dark | ||
| Bitcoin | .payment-provider-bitcoin.payment-provider-bitcoin-dark | ||
| BitPay | .payment-provider-bitpay.payment-provider-bitpay-dark | ||
| Bkash | .payment-provider-bkash.payment-provider-bkash-dark | ||
| Blik | .payment-provider-blik.payment-provider-blik-dark | ||
| BNB Chain | .payment-provider-bnb-chain.payment-provider-bnb-chain-dark | ||
| BNP Paribas | .payment-provider-bnp-paribas.payment-provider-bnp-paribas-dark | ||
| Braintree | .payment-provider-braintree.payment-provider-braintree-dark | ||
| Brex | .payment-provider-brex.payment-provider-brex-dark | ||
| Capital One | .payment-provider-capital-one.payment-provider-capital-one-dark | ||
| Cash App | .payment-provider-cash-app.payment-provider-cash-app-dark | ||
| Chase | .payment-provider-chase.payment-provider-chase-dark | ||
| Checkout.com | .payment-provider-checkout-com.payment-provider-checkout-com-dark | ||
| Chime | .payment-provider-chime.payment-provider-chime-dark | ||
| China Construction Bank | .payment-provider-china-construction-bank.payment-provider-china-construction-bank-dark | ||
| Cirrus | .payment-provider-cirrus.payment-provider-cirrus-dark | ||
| Citi | .payment-provider-citi.payment-provider-citi-dark | ||
| Coinbase | .payment-provider-coinbase.payment-provider-coinbase-dark | ||
| Coinkite | .payment-provider-coinkite.payment-provider-coinkite-dark | ||
| Crypto.com | .payment-provider-crypto-com.payment-provider-crypto-com-dark | ||
| Deutsche Bank | .payment-provider-deutsche-bank.payment-provider-deutsche-bank-dark | ||
| Diners Club | .payment-provider-dinersclub.payment-provider-dinersclub-dark | ||
| Direct Debit | .payment-provider-directdebit.payment-provider-directdebit-dark | ||
| Discover | .payment-provider-discover.payment-provider-discover-dark | ||
| Dwolla | .payment-provider-dwolla.payment-provider-dwolla-dark | ||
| EasyPaisa | .payment-provider-easypaisa.payment-provider-easypaisa-dark | ||
| eBay | .payment-provider-ebay.payment-provider-ebay-dark | ||
| Elo | .payment-provider-elo.payment-provider-elo-dark | ||
| ePayco | .payment-provider-epayco.payment-provider-epayco-dark | ||
| eSewa | .payment-provider-esewa.payment-provider-esewa-dark | ||
| Ethereum | .payment-provider-ethereum.payment-provider-ethereum-dark | ||
| eWay | .payment-provider-eway.payment-provider-eway-dark | ||
| Fifth Third Bank | .payment-provider-fifth-third-bank.payment-provider-fifth-third-bank-dark | ||
| Fiserv | .payment-provider-fiserv.payment-provider-fiserv-dark | ||
| Flutterwave | .payment-provider-flutterwave.payment-provider-flutterwave-dark | ||
| FonePay | .payment-provider-fonepay.payment-provider-fonepay-dark | ||
| GCash | .payment-provider-gcash.payment-provider-gcash-dark | ||
| Giropay | .payment-provider-giropay.payment-provider-giropay-dark | ||
| Goldman Sachs | .payment-provider-goldman-sachs.payment-provider-goldman-sachs-dark | ||
| Google Pay | .payment-provider-google-pay.payment-provider-google-pay-dark | ||
| Google Wallet | .payment-provider-googlewallet.payment-provider-googlewallet-dark | ||
| GrabPay | .payment-provider-grabpay.payment-provider-grabpay-dark | ||
| HSBC | .payment-provider-hsbc.payment-provider-hsbc-dark | ||
| HubSpot | .payment-provider-hubspot.payment-provider-hubspot-dark | ||
| Huntington Bank | .payment-provider-huntington-bank.payment-provider-huntington-bank-dark | ||
| ICBC | .payment-provider-icbc.payment-provider-icbc-dark | ||
| iDeal | .payment-provider-ideal.payment-provider-ideal-dark | ||
| IMEPay | .payment-provider-imepay.payment-provider-imepay-dark | ||
| imoje (ING Pay) | .payment-provider-imoje.payment-provider-imoje-dark | ||
| ING | .payment-provider-ing.payment-provider-ing-dark | ||
| Ingenico | .payment-provider-ingenico.payment-provider-ingenico-dark | ||
| Interac | .payment-provider-interac.payment-provider-interac-dark | ||
| JazzCash | .payment-provider-jazzcash.payment-provider-jazzcash-dark | ||
| JCB | .payment-provider-jcb.payment-provider-jcb-dark | ||
| Khalti | .payment-provider-khalti.payment-provider-khalti-dark | ||
| Klarna | .payment-provider-klarna.payment-provider-klarna-dark | ||
| Kraken | .payment-provider-kraken.payment-provider-kraken-dark | ||
| LINE Pay | .payment-provider-linepay.payment-provider-linepay-dark | ||
| Litecoin | .payment-provider-litecoin.payment-provider-litecoin-dark | ||
| Mada | .payment-provider-mada.payment-provider-mada-dark | ||
| Maestro | .payment-provider-maestro.payment-provider-maestro-dark | ||
| Mastercard | .payment-provider-mastercard.payment-provider-mastercard-dark | ||
| Mercado Pago | .payment-provider-mercado-pago.payment-provider-mercado-pago-dark | ||
| Mercury | .payment-provider-mercury.payment-provider-mercury-dark | ||
| Meta Pay | .payment-provider-meta-pay.payment-provider-meta-pay-dark | ||
| MetaMask | .payment-provider-metamask.payment-provider-metamask-dark | ||
| MIR | .payment-provider-mir.payment-provider-mir-dark | ||
| Mitsubishi UFJ | .payment-provider-mitsubishi-ufj.payment-provider-mitsubishi-ufj-dark | ||
| MobilePay | .payment-provider-mobilepay.payment-provider-mobilepay-dark | ||
| Mollie | .payment-provider-mollie.payment-provider-mollie-dark | ||
| Monero | .payment-provider-monero.payment-provider-monero-dark | ||
| MoneyGram | .payment-provider-moneygram.payment-provider-moneygram-dark | ||
| M-Pesa | .payment-provider-mpesa.payment-provider-mpesa-dark | ||
| NCR | .payment-provider-ncr.payment-provider-ncr-dark | ||
| Neteller | .payment-provider-neteller.payment-provider-neteller-dark | ||
| NorthOne | .payment-provider-northone.payment-provider-northone-dark | ||
| Nubank | .payment-provider-nu.payment-provider-nu-dark | ||
| Nuvei | .payment-provider-nuvei.payment-provider-nuvei-dark | ||
| OpenSea | .payment-provider-opensea.payment-provider-opensea-dark | ||
| OXXO | .payment-provider-oxxo.payment-provider-oxxo-dark | ||
| Paybox | .payment-provider-paybox.payment-provider-paybox-dark | ||
| Payconiq | .payment-provider-payconiq.payment-provider-payconiq-dark | ||
| Payka | .payment-provider-payka.payment-provider-payka-dark | ||
| Payline | .payment-provider-payline.payment-provider-payline-dark | ||
| Paynow | .payment-provider-paynow.payment-provider-paynow-dark | ||
| Payone | .payment-provider-payone.payment-provider-payone-dark | ||
| Payoneer | .payment-provider-payoneer.payment-provider-payoneer-dark | ||
| PayPal | .payment-provider-paypal.payment-provider-paypal-dark | ||
| PayPay | .payment-provider-paypay.payment-provider-paypay-dark | ||
| PayPo | .payment-provider-paypo.payment-provider-paypo-dark | ||
| Paysafe | .payment-provider-paysafe.payment-provider-paysafe-dark | ||
| Paysafecard | .payment-provider-paysafecard.payment-provider-paysafecard-dark | ||
| Paystack | .payment-provider-paystack.payment-provider-paystack-dark | ||
| Paytm | .payment-provider-paytm.payment-provider-paytm-dark | ||
| PayU | .payment-provider-payu.payment-provider-payu-dark | ||
| PhonePe | .payment-provider-phonepe.payment-provider-phonepe-dark | ||
| Pix | .payment-provider-pix.payment-provider-pix-dark | ||
| PNC Bank | .payment-provider-pnc-bank.payment-provider-pnc-bank-dark | ||
| Poli | .payment-provider-poli.payment-provider-poli-dark | ||
| Przelewy24 | .payment-provider-przelewy24.payment-provider-przelewy24-dark | ||
| Rapyd | .payment-provider-rapyd.payment-provider-rapyd-dark | ||
| Razorpay | .payment-provider-razorpay.payment-provider-razorpay-dark | ||
| Revolut Pay | .payment-provider-revolut-pay.payment-provider-revolut-pay-dark | ||
| Ripple | .payment-provider-ripple.payment-provider-ripple-dark | ||
| RuPay | .payment-provider-rupay.payment-provider-rupay-dark | ||
| Samsung Pay | .payment-provider-samsung-pay.payment-provider-samsung-pay-dark | ||
| Santander | .payment-provider-santander.payment-provider-santander-dark | ||
| SEPA | .payment-provider-sepa.payment-provider-sepa-dark | ||
| Shop Pay | .payment-provider-shop-pay.payment-provider-shop-pay-dark | ||
| Shopify | .payment-provider-shopify.payment-provider-shopify-dark | ||
| Skrill | .payment-provider-skrill.payment-provider-skrill-dark | ||
| SkyCash | .payment-provider-skycash.payment-provider-skycash-dark | ||
| Sofort | .payment-provider-sofort.payment-provider-sofort-dark | ||
| Solana | .payment-provider-solana.payment-provider-solana-dark | ||
| Spingo | .payment-provider-spingo.payment-provider-spingo-dark | ||
| Square | .payment-provider-square.payment-provider-square-dark | ||
| Stax | .payment-provider-stax.payment-provider-stax-dark | ||
| STC Pay | .payment-provider-stcpay.payment-provider-stcpay-dark | ||
| Stripe | .payment-provider-stripe.payment-provider-stripe-dark | ||
| Sumitomo Mitsui | .payment-provider-sumitomo-mitsui.payment-provider-sumitomo-mitsui-dark | ||
| SWIFT | .payment-provider-swift.payment-provider-swift-dark | ||
| Swish | .payment-provider-swish.payment-provider-swish-dark | ||
| Synchrony | .payment-provider-synchrony.payment-provider-synchrony-dark | ||
| Tether | .payment-provider-tether.payment-provider-tether-dark | ||
| Tpay | .payment-provider-tpay.payment-provider-tpay-dark | ||
| Troy | .payment-provider-troy.payment-provider-troy-dark | ||
| True USD | .payment-provider-true-usd.payment-provider-true-usd-dark | ||
| Trustly | .payment-provider-trustly.payment-provider-trustly-dark | ||
| Twint | .payment-provider-twint.payment-provider-twint-dark | ||
| UBS | .payment-provider-ubs.payment-provider-ubs-dark | ||
| UnionPay | .payment-provider-unionpay.payment-provider-unionpay-dark | ||
| UPI | .payment-provider-upi.payment-provider-upi-dark | ||
| U.S. Bank | .payment-provider-us-bank.payment-provider-us-bank-dark | ||
| USDC | .payment-provider-usdc.payment-provider-usdc-dark | ||
| Venmo | .payment-provider-venmo.payment-provider-venmo-dark | ||
| Verifone | .payment-provider-verifone.payment-provider-verifone-dark | ||
| Vipps | .payment-provider-vipps.payment-provider-vipps-dark | ||
| Visa | .payment-provider-visa.payment-provider-visa-dark | ||
| WeChat Pay | .payment-provider-we-chat-pay.payment-provider-we-chat-pay-dark | ||
| WebMoney | .payment-provider-webmoney.payment-provider-webmoney-dark | ||
| Wells Fargo | .payment-provider-wells-fargo.payment-provider-wells-fargo-dark | ||
| Western Union | .payment-provider-westernunion.payment-provider-westernunion-dark | ||
| Wire Transfer | .payment-provider-wire-transfer.payment-provider-wire-transfer-dark | ||
| Wise | .payment-provider-wise.payment-provider-wise-dark | ||
| Worldpay | .payment-provider-worldpay.payment-provider-worldpay-dark | ||
| Zelle | .payment-provider-zelle.payment-provider-zelle-dark |
Accessibility
- A card logo is a picture. Put the card name in text or in an
aria-label, so the accepted methods are not left to logo recognition. - When the logos only say which cards you take, they are decoration. Mark them
aria-hidden="true"and put the list in a sentence: "We accept Visa, Mastercard and American Express." - When a logo is a choice the user makes, it has to be a real
inputwith a label, not a clickable image. See image check. - Never rely on the logo alone to mark the selected payment method. Add a visible mark and keep the state in the input.
