docs/pages/ui/plugins/payments.mdx - dev - githubmirror/tabler

docs/pages/ui/plugins/payments.mdx

47 строк2 KB

Paweł Kuna

Improve docs SEO, performance and content quality (#2841)

11 авг 2026, 15:45

11 авг 2026, 15:4539634cb

---
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.
description: Show payment provider logos like Visa, Mastercard, and PayPal with the payments plugin to make checkout pages clearer.
css-plugins: [payments]
layout: '@layouts/DocsMdxLayout.astro'
---

import Example from '@components/Example.astro'
import Payments from '@components/Payments.astro'
import CdnImportPlugin from '@components/CdnImportPlugin.astro'

## Installation

This part of Tabler is distributed as a plugin. To enable it you should include `tabler-payments.css` or `tabler-payments.min.css` file in your page.

You can also include the plugin via CDN:

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

## Payment

To create a payment provider icon, add the `payment` class to a component and specify the payment provider with the `payment-provider-*` class. The full list of payment providers can be found at the end of this page.

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

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

<Example>
  <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>
</Example>

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

<Payments />