mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
55 lines
2.7 KiB
Plaintext
55 lines
2.7 KiB
Plaintext
---
|
|
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.
|