mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
44 lines
1.6 KiB
Plaintext
44 lines
1.6 KiB
Plaintext
---
|
||
title: Payments
|
||
description: 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.
|
||
plugin: payments
|
||
---
|
||
|
||
## Installation
|
||
|
||
This part of Tabler is distributed as plugin. To enable it you should include `tabler-payments.css` or `tabler-payments.min.css` file to your page.
|
||
|
||
You can also include plugin via CDN:
|
||
|
||
```html
|
||
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-payments.min.css">
|
||
```
|
||
|
||
## Payment
|
||
|
||
To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
|
||
|
||
```html example plugins="payments" separated centered
|
||
<span class="payment payment-provider-shopify"></span>
|
||
<span class="payment payment-provider-visa"></span>
|
||
<span class="payment payment-provider-paypal"></span>
|
||
```
|
||
|
||
## 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.
|
||
|
||
```html example plugins="payments" separated centered
|
||
<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>
|
||
```
|
||
|
||
## 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.
|
||
|
||
<PaymentsTable />
|