Payments

The Tabler Payments plugin will let you use a set of payment provider icons to facilitate the payment process and make it more user-friendly.

Installation

This part of Tabler is distributed as a plugin. To enable it you should include tabler-payments.css or tabler-payments.min.css file to your page.

You can also include plugin via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-payments.min.css">

Payment

To create a payment provider icon, add the payment class to a component and specify the payment provider. The full list of payment providers can be found below.

<span class="payment payment-provider-shopify"></span>
<span class="payment payment-provider-visa"></span>
<span class="payment payment-provider-paypal"></span>

Payment sizes

Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.

<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>

List of available payment providers

Select an icon from the list of payment providers. Each icon comes in two color variants - light and dark, so you can choose the one that goes well with your design.

2checkout2checkout2checkout2checkout.payment-provider-2checkout
AlipayAlipayAlipayalipay.payment-provider-alipay
AmazonAmazonAmazonamazon.payment-provider-amazon
AmericanexpressAmericanexpressAmericanexpressamericanexpress.payment-provider-americanexpress
ApplepayApplepayApplepayapplepay.payment-provider-applepay
BancontactBancontactBancontactbancontact.payment-provider-bancontact
BitcoinBitcoinBitcoinbitcoin.payment-provider-bitcoin
BitpayBitpayBitpaybitpay.payment-provider-bitpay
BlikBlikBlikblik.payment-provider-blik
CirrusCirrusCirruscirrus.payment-provider-cirrus
ClickandbuyClickandbuyClickandbuyclickandbuy.payment-provider-clickandbuy
CoinkiteCoinkiteCoinkitecoinkite.payment-provider-coinkite
DinersclubDinersclubDinersclubdinersclub.payment-provider-dinersclub
DirectdebitDirectdebitDirectdebitdirectdebit.payment-provider-directdebit
DiscoverDiscoverDiscoverdiscover.payment-provider-discover
DotpayDotpayDotpaydotpay.payment-provider-dotpay
DwollaDwollaDwolladwolla.payment-provider-dwolla
EbayEbayEbayebay.payment-provider-ebay
EpaycoEpaycoEpaycoepayco.payment-provider-epayco
EwayEwayEwayeway.payment-provider-eway
GiropayGiropayGiropaygiropay.payment-provider-giropay
GooglewalletGooglewalletGooglewalletgooglewallet.payment-provider-googlewallet
IngenicoIngenicoIngenicoingenico.payment-provider-ingenico
JcbJcbJcbjcb.payment-provider-jcb
KlarnaKlarnaKlarnaklarna.payment-provider-klarna
LaserLaserLaserlaser.payment-provider-laser
MaestroMaestroMaestromaestro.payment-provider-maestro
MastercardMastercardMastercardmastercard.payment-provider-mastercard
MirMirMirmir.payment-provider-mir
MoneroMoneroMoneromonero.payment-provider-monero
NetellerNetellerNetellerneteller.payment-provider-neteller
OgoneOgoneOgoneogone.payment-provider-ogone
OkpayOkpayOkpayokpay.payment-provider-okpay
PayboxPayboxPayboxpaybox.payment-provider-paybox
PaymillPaymillPaymillpaymill.payment-provider-paymill
PayonePayonePayonepayone.payment-provider-payone
PayoneerPayoneerPayoneerpayoneer.payment-provider-payoneer
PaypalPaypalPaypalpaypal.payment-provider-paypal
PaysafecardPaysafecardPaysafecardpaysafecard.payment-provider-paysafecard
PayuPayuPayupayu.payment-provider-payu
PayzaPayzaPayzapayza.payment-provider-payza
Przelewy24Przelewy24Przelewy24przelewy24.payment-provider-przelewy24
RippleRippleRippleripple.payment-provider-ripple
SageSageSagesage.payment-provider-sage
SepaSepaSepasepa.payment-provider-sepa
ShopifyShopifyShopifyshopify.payment-provider-shopify
SkrillSkrillSkrillskrill.payment-provider-skrill
SoloSoloSolosolo.payment-provider-solo
SquareSquareSquaresquare.payment-provider-square
StripeStripeStripestripe.payment-provider-stripe
SwitchSwitchSwitchswitch.payment-provider-switch
TpayTpayTpaytpay.payment-provider-tpay
UkashUkashUkashukash.payment-provider-ukash
UnionpayUnionpayUnionpayunionpay.payment-provider-unionpay
VerifoneVerifoneVerifoneverifone.payment-provider-verifone
VerisignVerisignVerisignverisign.payment-provider-verisign
VisaVisaVisavisa.payment-provider-visa
WebmoneyWebmoneyWebmoneywebmoney.payment-provider-webmoney
WesternunionWesternunionWesternunionwesternunion.payment-provider-westernunion
WorldpayWorldpayWorldpayworldpay.payment-provider-worldpay
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like Tabler? tweet about it!
Support Tabler's development: Github Sponsors
illustrations banner imageillustrations banner image dark
65 sleek illustrations for your startup's visual identity.