---
title: Tabler Payments
summary: Over 160 payment provider logos, from Visa and PayPal to local methods, in light and dark versions for checkout pages and payment forms.
order: 5
description: Over 160 payment provider logos for checkout pages and payment forms.
css-plugins: [payments]
---

import Example from '@components/Example.astro'
import CdnImportPlugin from '@components/CdnImportPlugin.astro'
import { Image } from 'astro:assets'
import payments from '@data/payments.json'
import coverLight from '../../images/cover-payments.jpg'
import coverDark from '../../images/cover-payments-dark.jpg'

<figure>
	<Image src={coverLight} alt="Tabler Payments" class="hide-theme-dark" width={800} densities={[1, 2]} loading="eager" />
	<Image src={coverDark} alt="Tabler Payments" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
</figure>

Tabler Payments is a collection of { payments.length } payment provider logos, from the most popular card brands like Visa and Mastercard to local payment methods. Every logo ships in two color versions - light and dark - so it looks right on any background.

<Example centered>
<span class="payment payment-lg payment-provider-visa"></span>
<span class="payment payment-lg payment-provider-mastercard"></span>
<span class="payment payment-lg payment-provider-paypal"></span>
<span class="payment payment-lg payment-provider-shopify"></span>
<span class="payment payment-lg payment-provider-amazon"></span>
</Example>

You can use the logos in two ways:

- **[CSS plugin](/payments/css)**: add the `payment` and `payment-provider-*` classes to a `<span>`. Works with plain HTML and any framework, and needs only one extra stylesheet.
- **[Libraries](/payments/libraries)**: render logos as native, tree-shakable components in [React](/payments/libraries/react), [Vue](/payments/libraries/vue), [Preact](/payments/libraries/preact) or [Astro](/payments/libraries/astro), with type-checked props and no separate CSS file.

Both ways use the same set of providers and the same light and dark artwork, so you can mix them or switch between them without visual changes.

## Quick start

For the CSS plugin, include the stylesheet from a CDN and add a `<span>` with the provider's class:

<CdnImportPlugin plugins={['payments']} />

<Example centered html={`<span class="payment payment-provider-visa"></span>`} />

For a framework project, install the package for your stack and import the providers you need - only the logos you import end up in your bundle:

```jsx
import { PaymentVisa } from '@tabler/payments-react';

<PaymentVisa size={32} />
```

The [CSS plugin](/payments/css) page documents all classes, sizes and the full provider list; each [library page](/payments/libraries) covers installation and props for its framework.