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 a plugin. To enable it you should include tabler-payments.css or tabler-payments.min.css file in your page.

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

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.

Provider	Name	CSS class
		2c2p	.payment-provider-2c2p .payment-provider-2c2p-dark
		2checkout	.payment-provider-2checkout .payment-provider-2checkout-dark
		Adyen	.payment-provider-adyen .payment-provider-adyen-dark
		Affirm	.payment-provider-affirm .payment-provider-affirm-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
		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
		Binance USD	.payment-provider-binance-usd .payment-provider-binance-usd-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
		Braintree	.payment-provider-braintree .payment-provider-braintree-dark
		Cash App	.payment-provider-cash-app .payment-provider-cash-app-dark
		Chime	.payment-provider-chime .payment-provider-chime-dark
		Cirrus	.payment-provider-cirrus .payment-provider-cirrus-dark
		ClickandBuy	.payment-provider-clickandbuy .payment-provider-clickandbuy-dark
		Coinkite	.payment-provider-coinkite .payment-provider-coinkite-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
		Dotpay	.payment-provider-dotpay .payment-provider-dotpay-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
		FonePay	.payment-provider-fonepay .payment-provider-fonepay-dark
		Giropay	.payment-provider-giropay .payment-provider-giropay-dark
		Google Pay	.payment-provider-google-pay .payment-provider-google-pay-dark
		Google Wallet	.payment-provider-googlewallet .payment-provider-googlewallet-dark
		HubSpot	.payment-provider-hubspot .payment-provider-hubspot-dark
		Ingenico	.payment-provider-ingenico .payment-provider-ingenico-dark
		iDeal	.payment-provider-ideal .payment-provider-ideal-dark
		IMEPay	.payment-provider-imepay .payment-provider-imepay-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
		Laser	.payment-provider-laser .payment-provider-laser-dark
		Litecoin	.payment-provider-litecoin .payment-provider-litecoin-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
		MetaMask	.payment-provider-metamask .payment-provider-metamask-dark
		MIR	.payment-provider-mir .payment-provider-mir-dark
		Monero	.payment-provider-monero .payment-provider-monero-dark
		MoneyGram	.payment-provider-moneygram .payment-provider-moneygram-dark
		Neteller	.payment-provider-neteller .payment-provider-neteller-dark
		Ogone	.payment-provider-ogone .payment-provider-ogone-dark
		OKPay	.payment-provider-okpay .payment-provider-okpay-dark
		OpenSea	.payment-provider-opensea .payment-provider-opensea-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
		Paymill	.payment-provider-paymill .payment-provider-paymill-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
		PayPo	.payment-provider-paypo .payment-provider-paypo-dark
		Paysafe	.payment-provider-paysafe .payment-provider-paysafe-dark
		Paysafecard	.payment-provider-paysafecard .payment-provider-paysafecard-dark
		PayU	.payment-provider-payu .payment-provider-payu-dark
		Payza	.payment-provider-payza .payment-provider-payza-dark
		Poli	.payment-provider-poli .payment-provider-poli-dark
		Przelewy24	.payment-provider-przelewy24 .payment-provider-przelewy24-dark
		Revolut Pay	.payment-provider-revolut-pay .payment-provider-revolut-pay-dark
		Ripple	.payment-provider-ripple .payment-provider-ripple-dark
		Sage	.payment-provider-sage .payment-provider-sage-dark
		Samsung Pay	.payment-provider-samsung-pay .payment-provider-samsung-pay-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
		Solana	.payment-provider-solana .payment-provider-solana-dark
		Solo	.payment-provider-solo .payment-provider-solo-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
		Stripe	.payment-provider-stripe .payment-provider-stripe-dark
		Switch	.payment-provider-switch .payment-provider-switch-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
		Ukash	.payment-provider-ukash .payment-provider-ukash-dark
		UnionPay	.payment-provider-unionpay .payment-provider-unionpay-dark
		Venmo	.payment-provider-venmo .payment-provider-venmo-dark
		Verifone	.payment-provider-verifone .payment-provider-verifone-dark
		Verisign	.payment-provider-verisign .payment-provider-verisign-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
		Western Union	.payment-provider-westernunion .payment-provider-westernunion-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