tabler/docs/ui/plugins/payments.md

title, summary, plugin, description, layout

title	summary	plugin	description	layout
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.	payments	User-friendly payment provider icons.	default

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="$TABLER_CDN/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.

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