# CSS plugin

> The payments plugin adds payment provider logos, such as Visa or PayPal, as CSS classes for checkout pages and forms.

Show payment provider logos like Visa, Mastercard, and PayPal with the payments CSS plugin to make checkout pages clearer.

Source: https://docs.tabler.io/payments/css

---

## Installation

The payment logos are a plugin. Include `tabler-payments.css` or `tabler-payments.min.css` in your page to enable them.

You can also include the plugin via CDN:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.6.1/dist/css/tabler-payments.min.css" integrity="sha384-d/UREZKw9CFsndGKw/rOwSdQG2SSAvZnmWzMskaDcOMXTXTq3mDLrmoWSM8idR3m" crossorigin="anonymous" />
```

## Payment

Add the `payment` class to an element and a `payment-provider-*` class with the provider name. The full list is at the end of this page.

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

## Payment sizes

Add a size class such as `payment-lg` to scale the logo. The names follow the usual Bootstrap pattern.

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

## Light and dark logos

Every provider ships in two variants. `payment-provider-*` is the light one, and `payment-provider-*-dark` is meant for a dark surface.

```html
<span class="payment payment-lg payment-provider-visa-dark"></span>
<span class="payment payment-lg payment-provider-paypal-dark"></span>
<span class="payment payment-lg payment-provider-mastercard-dark"></span>
```

## Accepted methods in a checkout

The usual place for these logos is under a payment form, to say which cards you take. They are decoration there, so keep the list in text as well.

```html
<div>
  <div class="text-secondary mb-2">We accept Visa, Mastercard and PayPal.</div>
  <div class="d-flex gap-1" aria-hidden="true">
    <span class="payment payment-provider-visa"></span>
    <span class="payment payment-provider-mastercard"></span>
    <span class="payment payment-provider-paypal"></span>
  </div>
</div>
```

## List of available payment providers

Every provider below comes in a light and a dark variant. Pick the one that matches the surface it sits on.

| Provider | CSS class | Dark variant |
| --- | --- | --- |
| 2c2p | `.payment-provider-2c2p` | `.payment-provider-2c2p-dark` |
| 2checkout | `.payment-provider-2checkout` | `.payment-provider-2checkout-dark` |
| ACH Transfer | `.payment-provider-ach-transfer` | `.payment-provider-ach-transfer-dark` |
| Adyen | `.payment-provider-adyen` | `.payment-provider-adyen-dark` |
| Affirm | `.payment-provider-affirm` | `.payment-provider-affirm-dark` |
| Afterpay | `.payment-provider-afterpay` | `.payment-provider-afterpay-dark` |
| Airtm | `.payment-provider-airtm` | `.payment-provider-airtm-dark` |
| Airwallex | `.payment-provider-airwallex` | `.payment-provider-airwallex-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` |
| Ant Group | `.payment-provider-ant-group` | `.payment-provider-ant-group-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` |
| Bank of America | `.payment-provider-bank-of-america` | `.payment-provider-bank-of-america-dark` |
| Barclays | `.payment-provider-barclays` | `.payment-provider-barclays-dark` |
| BBVA | `.payment-provider-bbva` | `.payment-provider-bbva-dark` |
| Binance USD | `.payment-provider-binance-usd` | `.payment-provider-binance-usd-dark` |
| Binance | `.payment-provider-binance` | `.payment-provider-binance-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` |
| BNB Chain | `.payment-provider-bnb-chain` | `.payment-provider-bnb-chain-dark` |
| BNP Paribas | `.payment-provider-bnp-paribas` | `.payment-provider-bnp-paribas-dark` |
| Braintree | `.payment-provider-braintree` | `.payment-provider-braintree-dark` |
| Brex | `.payment-provider-brex` | `.payment-provider-brex-dark` |
| Capital One | `.payment-provider-capital-one` | `.payment-provider-capital-one-dark` |
| Cash App | `.payment-provider-cash-app` | `.payment-provider-cash-app-dark` |
| Chase | `.payment-provider-chase` | `.payment-provider-chase-dark` |
| Checkout.com | `.payment-provider-checkout-com` | `.payment-provider-checkout-com-dark` |
| Chime | `.payment-provider-chime` | `.payment-provider-chime-dark` |
| China Construction Bank | `.payment-provider-china-construction-bank` | `.payment-provider-china-construction-bank-dark` |
| Cirrus | `.payment-provider-cirrus` | `.payment-provider-cirrus-dark` |
| Citi | `.payment-provider-citi` | `.payment-provider-citi-dark` |
| Coinbase | `.payment-provider-coinbase` | `.payment-provider-coinbase-dark` |
| Coinkite | `.payment-provider-coinkite` | `.payment-provider-coinkite-dark` |
| Crypto.com | `.payment-provider-crypto-com` | `.payment-provider-crypto-com-dark` |
| Deutsche Bank | `.payment-provider-deutsche-bank` | `.payment-provider-deutsche-bank-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` |
| 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` |
| Fifth Third Bank | `.payment-provider-fifth-third-bank` | `.payment-provider-fifth-third-bank-dark` |
| Fiserv | `.payment-provider-fiserv` | `.payment-provider-fiserv-dark` |
| Flutterwave | `.payment-provider-flutterwave` | `.payment-provider-flutterwave-dark` |
| FonePay | `.payment-provider-fonepay` | `.payment-provider-fonepay-dark` |
| GCash | `.payment-provider-gcash` | `.payment-provider-gcash-dark` |
| Giropay | `.payment-provider-giropay` | `.payment-provider-giropay-dark` |
| Goldman Sachs | `.payment-provider-goldman-sachs` | `.payment-provider-goldman-sachs-dark` |
| Google Pay | `.payment-provider-google-pay` | `.payment-provider-google-pay-dark` |
| Google Wallet | `.payment-provider-googlewallet` | `.payment-provider-googlewallet-dark` |
| GrabPay | `.payment-provider-grabpay` | `.payment-provider-grabpay-dark` |
| HSBC | `.payment-provider-hsbc` | `.payment-provider-hsbc-dark` |
| HubSpot | `.payment-provider-hubspot` | `.payment-provider-hubspot-dark` |
| Huntington Bank | `.payment-provider-huntington-bank` | `.payment-provider-huntington-bank-dark` |
| ICBC | `.payment-provider-icbc` | `.payment-provider-icbc-dark` |
| iDeal | `.payment-provider-ideal` | `.payment-provider-ideal-dark` |
| IMEPay | `.payment-provider-imepay` | `.payment-provider-imepay-dark` |
| imoje (ING Pay) | `.payment-provider-imoje` | `.payment-provider-imoje-dark` |
| ING | `.payment-provider-ing` | `.payment-provider-ing-dark` |
| Ingenico | `.payment-provider-ingenico` | `.payment-provider-ingenico-dark` |
| Interac | `.payment-provider-interac` | `.payment-provider-interac-dark` |
| JazzCash | `.payment-provider-jazzcash` | `.payment-provider-jazzcash-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` |
| Kraken | `.payment-provider-kraken` | `.payment-provider-kraken-dark` |
| LINE Pay | `.payment-provider-linepay` | `.payment-provider-linepay-dark` |
| Litecoin | `.payment-provider-litecoin` | `.payment-provider-litecoin-dark` |
| Mada | `.payment-provider-mada` | `.payment-provider-mada-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` |
| Mercury | `.payment-provider-mercury` | `.payment-provider-mercury-dark` |
| Meta Pay | `.payment-provider-meta-pay` | `.payment-provider-meta-pay-dark` |
| MetaMask | `.payment-provider-metamask` | `.payment-provider-metamask-dark` |
| MIR | `.payment-provider-mir` | `.payment-provider-mir-dark` |
| Mitsubishi UFJ | `.payment-provider-mitsubishi-ufj` | `.payment-provider-mitsubishi-ufj-dark` |
| MobilePay | `.payment-provider-mobilepay` | `.payment-provider-mobilepay-dark` |
| Mollie | `.payment-provider-mollie` | `.payment-provider-mollie-dark` |
| Monero | `.payment-provider-monero` | `.payment-provider-monero-dark` |
| MoneyGram | `.payment-provider-moneygram` | `.payment-provider-moneygram-dark` |
| M-Pesa | `.payment-provider-mpesa` | `.payment-provider-mpesa-dark` |
| NCR | `.payment-provider-ncr` | `.payment-provider-ncr-dark` |
| Neteller | `.payment-provider-neteller` | `.payment-provider-neteller-dark` |
| NorthOne | `.payment-provider-northone` | `.payment-provider-northone-dark` |
| Nubank | `.payment-provider-nu` | `.payment-provider-nu-dark` |
| Nuvei | `.payment-provider-nuvei` | `.payment-provider-nuvei-dark` |
| OpenSea | `.payment-provider-opensea` | `.payment-provider-opensea-dark` |
| OXXO | `.payment-provider-oxxo` | `.payment-provider-oxxo-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` |
| Paynow | `.payment-provider-paynow` | `.payment-provider-paynow-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` |
| PayPay | `.payment-provider-paypay` | `.payment-provider-paypay-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` |
| Paystack | `.payment-provider-paystack` | `.payment-provider-paystack-dark` |
| Paytm | `.payment-provider-paytm` | `.payment-provider-paytm-dark` |
| PayU | `.payment-provider-payu` | `.payment-provider-payu-dark` |
| PhonePe | `.payment-provider-phonepe` | `.payment-provider-phonepe-dark` |
| Pix | `.payment-provider-pix` | `.payment-provider-pix-dark` |
| PNC Bank | `.payment-provider-pnc-bank` | `.payment-provider-pnc-bank-dark` |
| Poli | `.payment-provider-poli` | `.payment-provider-poli-dark` |
| Przelewy24 | `.payment-provider-przelewy24` | `.payment-provider-przelewy24-dark` |
| Rapyd | `.payment-provider-rapyd` | `.payment-provider-rapyd-dark` |
| Razorpay | `.payment-provider-razorpay` | `.payment-provider-razorpay-dark` |
| Revolut Pay | `.payment-provider-revolut-pay` | `.payment-provider-revolut-pay-dark` |
| Ripple | `.payment-provider-ripple` | `.payment-provider-ripple-dark` |
| RuPay | `.payment-provider-rupay` | `.payment-provider-rupay-dark` |
| Samsung Pay | `.payment-provider-samsung-pay` | `.payment-provider-samsung-pay-dark` |
| Santander | `.payment-provider-santander` | `.payment-provider-santander-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` |
| SkyCash | `.payment-provider-skycash` | `.payment-provider-skycash-dark` |
| Sofort | `.payment-provider-sofort` | `.payment-provider-sofort-dark` |
| Solana | `.payment-provider-solana` | `.payment-provider-solana-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` |
| STC Pay | `.payment-provider-stcpay` | `.payment-provider-stcpay-dark` |
| Stripe | `.payment-provider-stripe` | `.payment-provider-stripe-dark` |
| Sumitomo Mitsui | `.payment-provider-sumitomo-mitsui` | `.payment-provider-sumitomo-mitsui-dark` |
| SWIFT | `.payment-provider-swift` | `.payment-provider-swift-dark` |
| Swish | `.payment-provider-swish` | `.payment-provider-swish-dark` |
| Synchrony | `.payment-provider-synchrony` | `.payment-provider-synchrony-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` |
| Trustly | `.payment-provider-trustly` | `.payment-provider-trustly-dark` |
| Twint | `.payment-provider-twint` | `.payment-provider-twint-dark` |
| UBS | `.payment-provider-ubs` | `.payment-provider-ubs-dark` |
| UnionPay | `.payment-provider-unionpay` | `.payment-provider-unionpay-dark` |
| UPI | `.payment-provider-upi` | `.payment-provider-upi-dark` |
| U.S. Bank | `.payment-provider-us-bank` | `.payment-provider-us-bank-dark` |
| USDC | `.payment-provider-usdc` | `.payment-provider-usdc-dark` |
| Venmo | `.payment-provider-venmo` | `.payment-provider-venmo-dark` |
| Verifone | `.payment-provider-verifone` | `.payment-provider-verifone-dark` |
| Vipps | `.payment-provider-vipps` | `.payment-provider-vipps-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` |
| Wells Fargo | `.payment-provider-wells-fargo` | `.payment-provider-wells-fargo-dark` |
| Western Union | `.payment-provider-westernunion` | `.payment-provider-westernunion-dark` |
| Wire Transfer | `.payment-provider-wire-transfer` | `.payment-provider-wire-transfer-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` |

## Accessibility

- A card logo is a picture. Put the card name in text or in an `aria-label`, so the accepted methods are not left to logo recognition.
- When the logos only say which cards you take, they are decoration. Mark them `aria-hidden="true"` and put the list in a sentence: "We accept Visa, Mastercard and American Express."
- When a logo is a choice the user makes, it has to be a real `input` with a label, not a clickable image. See [image check](/ui/forms/image-check).
- Never rely on the logo alone to mark the selected payment method. Add a visible mark and keep the state in the input.