tabler/docs/ui/plugins/payments.mdx

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

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

```html
<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.

```html example plugins="payments" separated centered
<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.

```html example plugins="payments" separated centered
<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": "Ethereum", "code": "ethereum" },
  { "name": "eWay", "code": "eway" },
  { "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": "JCB", "code": "jcb" },
  { "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" }
]}/>