# 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.5.0/dist/css/tabler-payments.min.css" />
```

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

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