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://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta16/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
Epayco epayco
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