Payments
The Tabler Payments plugin 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 a 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/[email protected]/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"></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.
<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.
2checkout | 2checkout | .payment-provider-2checkout | ||
Alipay | alipay | .payment-provider-alipay | ||
Amazon | amazon | .payment-provider-amazon | ||
Americanexpress | americanexpress | .payment-provider-americanexpress | ||
Applepay | applepay | .payment-provider-applepay | ||
Bancontact | bancontact | .payment-provider-bancontact | ||
Bitcoin | bitcoin | .payment-provider-bitcoin | ||
Bitpay | bitpay | .payment-provider-bitpay | ||
Blik | blik | .payment-provider-blik | ||
Cirrus | cirrus | .payment-provider-cirrus | ||
Clickandbuy | clickandbuy | .payment-provider-clickandbuy | ||
Coinkite | coinkite | .payment-provider-coinkite | ||
Dinersclub | dinersclub | .payment-provider-dinersclub | ||
Directdebit | directdebit | .payment-provider-directdebit | ||
Discover | discover | .payment-provider-discover | ||
Dotpay | dotpay | .payment-provider-dotpay | ||
Dwolla | dwolla | .payment-provider-dwolla | ||
Ebay | ebay | .payment-provider-ebay | ||
Epayco | epayco | .payment-provider-epayco | ||
Eway | eway | .payment-provider-eway | ||
Giropay | giropay | .payment-provider-giropay | ||
Googlewallet | googlewallet | .payment-provider-googlewallet | ||
Ingenico | ingenico | .payment-provider-ingenico | ||
Jcb | jcb | .payment-provider-jcb | ||
Klarna | klarna | .payment-provider-klarna | ||
Laser | laser | .payment-provider-laser | ||
Maestro | maestro | .payment-provider-maestro | ||
Mastercard | mastercard | .payment-provider-mastercard | ||
Mir | mir | .payment-provider-mir | ||
Monero | monero | .payment-provider-monero | ||
Neteller | neteller | .payment-provider-neteller | ||
Ogone | ogone | .payment-provider-ogone | ||
Okpay | okpay | .payment-provider-okpay | ||
Paybox | paybox | .payment-provider-paybox | ||
Paymill | paymill | .payment-provider-paymill | ||
Payone | payone | .payment-provider-payone | ||
Payoneer | payoneer | .payment-provider-payoneer | ||
Paypal | paypal | .payment-provider-paypal | ||
Paysafecard | paysafecard | .payment-provider-paysafecard | ||
Payu | payu | .payment-provider-payu | ||
Payza | payza | .payment-provider-payza | ||
Przelewy24 | przelewy24 | .payment-provider-przelewy24 | ||
Ripple | ripple | .payment-provider-ripple | ||
Sage | sage | .payment-provider-sage | ||
Sepa | sepa | .payment-provider-sepa | ||
Shopify | shopify | .payment-provider-shopify | ||
Skrill | skrill | .payment-provider-skrill | ||
Solo | solo | .payment-provider-solo | ||
Square | square | .payment-provider-square | ||
Stripe | stripe | .payment-provider-stripe | ||
Switch | switch | .payment-provider-switch | ||
Tpay | tpay | .payment-provider-tpay | ||
Ukash | ukash | .payment-provider-ukash | ||
Unionpay | unionpay | .payment-provider-unionpay | ||
Verifone | verifone | .payment-provider-verifone | ||
Verisign | verisign | .payment-provider-verisign | ||
Visa | visa | .payment-provider-visa | ||
Webmoney | webmoney | .payment-provider-webmoney | ||
Westernunion | westernunion | .payment-provider-westernunion | ||
Worldpay | worldpay | .payment-provider-worldpay |