Documentation
Payments
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.
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:
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta10/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.
<span class="payment payment-provider-shopify me-3"></span>
<span class="payment payment-provider-visa me-3"></span>
<span class="payment payment-provider-paypal me-3"></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.
<span class="payment payment-xl payment-provider-shopify me-3"></span>
<span class="payment payment-lg payment-provider-visa me-3"></span>
<span class="payment payment-md payment-provider-paypal me-3"></span>
<span class="payment payment-sm payment-provider-amazon me-3"></span>Types
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.
| 2checkout | 2checkout |
||
| Alipay | alipay |
||
| Amazon | amazon |
||
| Americanexpress | americanexpress |
||
| Applepay | applepay |
||
| Bancontact | bancontact |
||
| Bitcoin | bitcoin |
||
| Bitpay | bitpay |
||
| Blik | blik |
||
| Cirrus | cirrus |
||
| Clickandbuy | clickandbuy |
||
| Coinkite | coinkite |
||
| Dinersclub | dinersclub |
||
| Directdebit | directdebit |
||
| Discover | discover |
||
| Dotpay | dotpay |
||
| Dwolla | dwolla |
||
| Ebay | ebay |
||
| Eway | eway |
||
| Giropay | giropay |
||
| Googlewallet | googlewallet |
||
| Ingenico | ingenico |
||
| Jcb | jcb |
||
| Klarna | klarna |
||
| Laser | laser |
||
| Maestro | maestro |
||
| Mastercard | mastercard |
||
| Mir | mir |
||
| Monero | monero |
||
| Neteller | neteller |
||
| Ogone | ogone |
||
| Okpay | okpay |
||
| Paybox | paybox |
||
| Paymill | paymill |
||
| Payone | payone |
||
| Payoneer | payoneer |
||
| Paypal | paypal |
||
| Paysafecard | paysafecard |
||
| Payu | payu |
||
| Payza | payza |
||
| Przelewy24 | przelewy24 |
||
| Ripple | ripple |
||
| Sage | sage |
||
| Sepa | sepa |
||
| Shopify | shopify |
||
| Skrill | skrill |
||
| Solo | solo |
||
| Square | square |
||
| Stripe | stripe |
||
| Switch | switch |
||
| Tpay | tpay |
||
| Ukash | ukash |
||
| Unionpay | unionpay |
||
| Verifone | verifone |
||
| Verisign | verisign |
||
| Visa | visa |
||
| Webmoney | webmoney |
||
| Westernunion | westernunion |
||
| Worldpay | worldpay |