Payments
The Tabler payments plug-in 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 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.
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.
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.
| 2c2p | 2c2p |  | .payment-provider-2c2p |
 | .payment-provider-2c2p-dark | ||
| 2checkout | 2checkout |  | .payment-provider-2checkout |
 | .payment-provider-2checkout-dark | ||
| Adyen | adyen |  | .payment-provider-adyen |
 | .payment-provider-adyen-dark | ||
| Affirm | affirm |  | .payment-provider-affirm |
 | .payment-provider-affirm-dark | ||
| Alipay Plus | alipay-plus |  | .payment-provider-alipay-plus |
 | .payment-provider-alipay-plus-dark | ||
| Alipay | alipay |  | .payment-provider-alipay |
 | .payment-provider-alipay-dark | ||
| Allegro Pay | allegro-pay |  | .payment-provider-allegro-pay |
 | .payment-provider-allegro-pay-dark | ||
| Amazon Pay | amazon-pay |  | .payment-provider-amazon-pay |
 | .payment-provider-amazon-pay-dark | ||
| Amazon | amazon |  | .payment-provider-amazon |
 | .payment-provider-amazon-dark | ||
| American Express | americanexpress |  | .payment-provider-americanexpress |
 | .payment-provider-americanexpress-dark | ||
| Apple Pay | applepay |  | .payment-provider-applepay |
 | .payment-provider-applepay-dark | ||
| Authorize | authorize |  | .payment-provider-authorize |
 | .payment-provider-authorize-dark | ||
| Autopay | autopay |  | .payment-provider-autopay |
 | .payment-provider-autopay-dark | ||
| Bancontact | bancontact |  | .payment-provider-bancontact |
 | .payment-provider-bancontact-dark | ||
| Binance USD | binance-usd |  | .payment-provider-binance-usd |
 | .payment-provider-binance-usd-dark | ||
| Bitcoin | bitcoin |  | .payment-provider-bitcoin |
 | .payment-provider-bitcoin-dark | ||
| BitPay | bitpay |  | .payment-provider-bitpay |
 | .payment-provider-bitpay-dark | ||
| Bkash | bkash |  | .payment-provider-bkash |
 | .payment-provider-bkash-dark | ||
| Blik | blik |  | .payment-provider-blik |
 | .payment-provider-blik-dark | ||
| Braintree | braintree |  | .payment-provider-braintree |
 | .payment-provider-braintree-dark | ||
| Cash App | cash-app |  | .payment-provider-cash-app |
 | .payment-provider-cash-app-dark | ||
| Chime | chime |  | .payment-provider-chime |
 | .payment-provider-chime-dark | ||
| Cirrus | cirrus |  | .payment-provider-cirrus |
 | .payment-provider-cirrus-dark | ||
| ClickandBuy | clickandbuy |  | .payment-provider-clickandbuy |
 | .payment-provider-clickandbuy-dark | ||
| Coinkite | coinkite |  | .payment-provider-coinkite |
 | .payment-provider-coinkite-dark | ||
| Diners Club | dinersclub |  | .payment-provider-dinersclub |
 | .payment-provider-dinersclub-dark | ||
| Direct Debit | directdebit |  | .payment-provider-directdebit |
 | .payment-provider-directdebit-dark | ||
| Discover | discover |  | .payment-provider-discover |
 | .payment-provider-discover-dark | ||
| Dotpay | dotpay |  | .payment-provider-dotpay |
 | .payment-provider-dotpay-dark | ||
| Dwolla | dwolla |  | .payment-provider-dwolla |
 | .payment-provider-dwolla-dark | ||
| EasyPaisa | easypaisa |  | .payment-provider-easypaisa |
 | .payment-provider-easypaisa-dark | ||
| eBay | ebay |  | .payment-provider-ebay |
 | .payment-provider-ebay-dark | ||
| Elo | elo |  | .payment-provider-elo |
 | .payment-provider-elo-dark | ||
| ePayco | epayco |  | .payment-provider-epayco |
 | .payment-provider-epayco-dark | ||
| Ethereum | ethereum |  | .payment-provider-ethereum |
 | .payment-provider-ethereum-dark | ||
| eWay | eway |  | .payment-provider-eway |
 | .payment-provider-eway-dark | ||
| Giropay | giropay |  | .payment-provider-giropay |
 | .payment-provider-giropay-dark | ||
| Google Pay | google-pay |  | .payment-provider-google-pay |
 | .payment-provider-google-pay-dark | ||
| Google Wallet | googlewallet |  | .payment-provider-googlewallet |
 | .payment-provider-googlewallet-dark | ||
| HubSpot | hubspot |  | .payment-provider-hubspot |
 | .payment-provider-hubspot-dark | ||
| Ingenico | ingenico |  | .payment-provider-ingenico |
 | .payment-provider-ingenico-dark | ||
| iDeal | ideal |  | .payment-provider-ideal |
 | .payment-provider-ideal-dark | ||
| JCB | jcb |  | .payment-provider-jcb |
 | .payment-provider-jcb-dark | ||
| Klarna | klarna |  | .payment-provider-klarna |
 | .payment-provider-klarna-dark | ||
| Laser | laser |  | .payment-provider-laser |
 | .payment-provider-laser-dark | ||
| Litecoin | litecoin |  | .payment-provider-litecoin |
 | .payment-provider-litecoin-dark | ||
| Maestro | maestro |  | .payment-provider-maestro |
 | .payment-provider-maestro-dark | ||
| Mastercard | mastercard |  | .payment-provider-mastercard |
 | .payment-provider-mastercard-dark | ||
| Mercado Pago | mercado-pago |  | .payment-provider-mercado-pago |
 | .payment-provider-mercado-pago-dark | ||
| MetaMask | metamask |  | .payment-provider-metamask |
 | .payment-provider-metamask-dark | ||
| MIR | mir |  | .payment-provider-mir |
 | .payment-provider-mir-dark | ||
| Monero | monero |  | .payment-provider-monero |
 | .payment-provider-monero-dark | ||
| MoneyGram | moneygram |  | .payment-provider-moneygram |
 | .payment-provider-moneygram-dark | ||
| Neteller | neteller |  | .payment-provider-neteller |
 | .payment-provider-neteller-dark | ||
| Ogone | ogone |  | .payment-provider-ogone |
 | .payment-provider-ogone-dark | ||
| OKPay | okpay |  | .payment-provider-okpay |
 | .payment-provider-okpay-dark | ||
| OpenSea | opensea |  | .payment-provider-opensea |
 | .payment-provider-opensea-dark | ||
| Paybox | paybox |  | .payment-provider-paybox |
 | .payment-provider-paybox-dark | ||
| Payconiq | payconiq |  | .payment-provider-payconiq |
 | .payment-provider-payconiq-dark | ||
| Payka | payka |  | .payment-provider-payka |
 | .payment-provider-payka-dark | ||
| Payline | payline |  | .payment-provider-payline |
 | .payment-provider-payline-dark | ||
| Paymill | paymill |  | .payment-provider-paymill |
 | .payment-provider-paymill-dark | ||
| Payone | payone |  | .payment-provider-payone |
 | .payment-provider-payone-dark | ||
| Payoneer | payoneer |  | .payment-provider-payoneer |
 | .payment-provider-payoneer-dark | ||
| PayPal | paypal |  | .payment-provider-paypal |
 | .payment-provider-paypal-dark | ||
| PayPo | paypo |  | .payment-provider-paypo |
 | .payment-provider-paypo-dark | ||
| Paysafe | paysafe |  | .payment-provider-paysafe |
 | .payment-provider-paysafe-dark | ||
| Paysafecard | paysafecard |  | .payment-provider-paysafecard |
 | .payment-provider-paysafecard-dark | ||
| PayU | payu |  | .payment-provider-payu |
 | .payment-provider-payu-dark | ||
| Payza | payza |  | .payment-provider-payza |
 | .payment-provider-payza-dark | ||
| Poli | poli |  | .payment-provider-poli |
 | .payment-provider-poli-dark | ||
| Przelewy24 | przelewy24 |  | .payment-provider-przelewy24 |
 | .payment-provider-przelewy24-dark | ||
| Revolut Pay | revolut-pay |  | .payment-provider-revolut-pay |
 | .payment-provider-revolut-pay-dark | ||
| Ripple | ripple |  | .payment-provider-ripple |
 | .payment-provider-ripple-dark | ||
| Sage | sage |  | .payment-provider-sage |
 | .payment-provider-sage-dark | ||
| Samsung Pay | samsung-pay |  | .payment-provider-samsung-pay |
 | .payment-provider-samsung-pay-dark | ||
| SEPA | sepa |  | .payment-provider-sepa |
 | .payment-provider-sepa-dark | ||
| Shop Pay | shop-pay |  | .payment-provider-shop-pay |
 | .payment-provider-shop-pay-dark | ||
| Shopify | shopify |  | .payment-provider-shopify |
 | .payment-provider-shopify-dark | ||
| Skrill | skrill |  | .payment-provider-skrill |
 | .payment-provider-skrill-dark | ||
| Solana | solana |  | .payment-provider-solana |
 | .payment-provider-solana-dark | ||
| Solo | solo |  | .payment-provider-solo |
 | .payment-provider-solo-dark | ||
| Spingo | spingo |  | .payment-provider-spingo |
 | .payment-provider-spingo-dark | ||
| Square | square |  | .payment-provider-square |
 | .payment-provider-square-dark | ||
| Stax | stax |  | .payment-provider-stax |
 | .payment-provider-stax-dark | ||
| Stripe | stripe |  | .payment-provider-stripe |
 | .payment-provider-stripe-dark | ||
| Switch | switch |  | .payment-provider-switch |
 | .payment-provider-switch-dark | ||
| Tether | tether |  | .payment-provider-tether |
 | .payment-provider-tether-dark | ||
| Tpay | tpay |  | .payment-provider-tpay |
 | .payment-provider-tpay-dark | ||
| True USD | true-usd |  | .payment-provider-true-usd |
 | .payment-provider-true-usd-dark | ||
| Ukash | ukash |  | .payment-provider-ukash |
 | .payment-provider-ukash-dark | ||
| UnionPay | unionpay |  | .payment-provider-unionpay |
 | .payment-provider-unionpay-dark | ||
| Venmo | venmo |  | .payment-provider-venmo |
 | .payment-provider-venmo-dark | ||
| Verifone | verifone |  | .payment-provider-verifone |
 | .payment-provider-verifone-dark | ||
| Verisign | verisign |  | .payment-provider-verisign |
 | .payment-provider-verisign-dark | ||
| Visa | visa |  | .payment-provider-visa |
 | .payment-provider-visa-dark | ||
| WeChat Pay | we-chat-pay |  | .payment-provider-we-chat-pay |
 | .payment-provider-we-chat-pay-dark | ||
| WebMoney | webmoney |  | .payment-provider-webmoney |
 | .payment-provider-webmoney-dark | ||
| Western Union | westernunion |  | .payment-provider-westernunion |
 | .payment-provider-westernunion-dark | ||
| Wise | wise |  | .payment-provider-wise |
 | .payment-provider-wise-dark | ||
| Worldpay | worldpay |  | .payment-provider-worldpay |
 | .payment-provider-worldpay-dark | ||
| Zelle | zelle |  | .payment-provider-zelle |
 | .payment-provider-zelle-dark |
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
