1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Files
tabler/demo/docs/payments.html
2020-04-11 22:37:19 +02:00

1173 lines
58 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.5
* @link https://github.com/tabler/tabler
* Copyright 2018-2019 The Tabler Authors
* Copyright 2018-2019 codecalm.net Paweł Kuna
* Licensed under MIT (https://tabler.io/license)
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Payments - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<meta name="description" content="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."/>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
<link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
<link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
</a>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item dropdown d-none d-md-flex mr-3">
<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
<path d="M9 17v1a3 3 0 0 0 6 0v-1" />
</svg>
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
</div>
</div>
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<circle cx="12" cy="12" r="3" />
</svg>
Action
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
<path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
<line x1="16" y1="5" x2="19" y2="8" />
</svg>
Another action
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
Separated link</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
<line x1="12" y1="12" x2="20" y2="7.5" />
<line x1="12" y1="12" x2="12" y2="21" />
<line x1="12" y1="12" x2="4" y2="7.5" />
<line x1="16" y1="5.25" x2="8" y2="9.75" />
</svg>
</span>
<span class="nav-link-title">
User Interface
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="../empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="../blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="../buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="../sign-in.html" class="dropdown-item">Sign in</a>
<a href="../sign-up.html" class="dropdown-item">Sign up</a>
<a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
</div>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="../400.html" class="dropdown-item">400 page</a>
<a href="../401.html" class="dropdown-item">401 page</a>
<a href="../403.html" class="dropdown-item">403 page</a>
<a href="../404.html" class="dropdown-item">404 page</a>
<a href="../500.html" class="dropdown-item">500 page</a>
<a href="../503.html" class="dropdown-item">503 page</a>
<a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="9 11 12 14 20 6" />
<path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
</svg>
</span>
<span class="nav-link-title">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
</svg>
</span>
<span class="nav-link-title">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="../invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="../blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="../snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="../search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="../pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="../users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="../gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="../profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="../music.html" >
Music
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<rect x="4" y="4" width="6" height="5" rx="2" />
<rect x="4" y="13" width="6" height="7" rx="2" />
<rect x="14" y="4" width="6" height="7" rx="2" />
<rect x="14" y="15" width="6" height="5" rx="2" />
</svg>
</span>
<span class="nav-link-title">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="../layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="../layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="14 3 14 8 19 8" />
<path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
<line x1="9" y1="9" x2="10" y2="9" />
<line x1="9" y1="13" x2="15" y2="13" />
<line x1="9" y1="17" x2="15" y2="17" />
</svg>
</span>
<span class="nav-link-title">
Docs
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="../docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/countup.html" >
Countup
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item active" href="../docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="../docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</span>
<input type="text" class="form-control" placeholder="Search…">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Documentation
</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top">
<a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
Browse source code
</a>
<h5 class="subheader">On this page</h5>
<ul class="list-unstyled">
<li class="toc-entry toc-h2"><a href="#payment">Payment</a></li>
<li class="toc-entry toc-h2"><a href="#payment-sizes">Payment sizes</a></li>
<li class="toc-entry toc-h2"><a href="#types">Types</a></li>
</ul>
</div>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h2 class="h1 mt-0 mb-3">Payments</h2>
</div>
<div class="alert alert-info">This module is available in <code>tabler-payments</code>
plugin.
</div>
<p>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.</p>
<h2 id="payment">Payment</h2>
<p>To create a payment provider icon, add the <code class="highlighter-rouge">payment</code> class to a component and specify the payment provider. The full list of payment providers can be found below.</p>
<div class="example no_toc_section">
<div class="example-content">
<span class="payment payment-provider-shopify mr-3"></span>
<span class="payment payment-provider-visa mr-3"></span>
<span class="payment payment-provider-paypal mr-3"></span>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-shopify mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-visa mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-paypal mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</figure>
</div>
<h2 id="payment-sizes">Payment sizes</h2>
<p>Using Bootstraps typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on whats needed.</p>
<div class="example no_toc_section">
<div class="example-content">
<span class="payment payment-xl payment-provider-shopify mr-3"></span>
<span class="payment payment-lg payment-provider-visa mr-3"></span>
<span class="payment payment-md payment-provider-paypal mr-3"></span>
<span class="payment payment-sm payment-provider-amazon mr-3"></span>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-xl payment-provider-shopify mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-lg payment-provider-visa mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-md payment-provider-paypal mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-sm payment-provider-amazon mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</figure>
</div>
<h2 id="types">Types</h2>
<p>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.</p>
<table class="table-vcenter">
<tr>
<td>2checkout</td>
<td><code>2checkout</code></td>
<td class="w-1"><span class="payment payment-provider-2checkout"></span>
</td>
<td class="w-1"><span class="payment payment-provider-2checkout-dark"></span>
</td>
</tr>
<tr>
<td>Alipay</td>
<td><code>alipay</code></td>
<td class="w-1"><span class="payment payment-provider-alipay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-alipay-dark"></span>
</td>
</tr>
<tr>
<td>Amazon</td>
<td><code>amazon</code></td>
<td class="w-1"><span class="payment payment-provider-amazon"></span>
</td>
<td class="w-1"><span class="payment payment-provider-amazon-dark"></span>
</td>
</tr>
<tr>
<td>Americanexpress</td>
<td><code>americanexpress</code></td>
<td class="w-1"><span class="payment payment-provider-americanexpress"></span>
</td>
<td class="w-1"><span class="payment payment-provider-americanexpress-dark"></span>
</td>
</tr>
<tr>
<td>Applepay</td>
<td><code>applepay</code></td>
<td class="w-1"><span class="payment payment-provider-applepay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-applepay-dark"></span>
</td>
</tr>
<tr>
<td>Bancontact</td>
<td><code>bancontact</code></td>
<td class="w-1"><span class="payment payment-provider-bancontact"></span>
</td>
<td class="w-1"><span class="payment payment-provider-bancontact-dark"></span>
</td>
</tr>
<tr>
<td>Bitcoin</td>
<td><code>bitcoin</code></td>
<td class="w-1"><span class="payment payment-provider-bitcoin"></span>
</td>
<td class="w-1"><span class="payment payment-provider-bitcoin-dark"></span>
</td>
</tr>
<tr>
<td>Bitpay</td>
<td><code>bitpay</code></td>
<td class="w-1"><span class="payment payment-provider-bitpay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-bitpay-dark"></span>
</td>
</tr>
<tr>
<td>Blik</td>
<td><code>blik</code></td>
<td class="w-1"><span class="payment payment-provider-blik"></span>
</td>
<td class="w-1"><span class="payment payment-provider-blik-dark"></span>
</td>
</tr>
<tr>
<td>Cirrus</td>
<td><code>cirrus</code></td>
<td class="w-1"><span class="payment payment-provider-cirrus"></span>
</td>
<td class="w-1"><span class="payment payment-provider-cirrus-dark"></span>
</td>
</tr>
<tr>
<td>Clickandbuy</td>
<td><code>clickandbuy</code></td>
<td class="w-1"><span class="payment payment-provider-clickandbuy"></span>
</td>
<td class="w-1"><span class="payment payment-provider-clickandbuy-dark"></span>
</td>
</tr>
<tr>
<td>Coinkite</td>
<td><code>coinkite</code></td>
<td class="w-1"><span class="payment payment-provider-coinkite"></span>
</td>
<td class="w-1"><span class="payment payment-provider-coinkite-dark"></span>
</td>
</tr>
<tr>
<td>Dinersclub</td>
<td><code>dinersclub</code></td>
<td class="w-1"><span class="payment payment-provider-dinersclub"></span>
</td>
<td class="w-1"><span class="payment payment-provider-dinersclub-dark"></span>
</td>
</tr>
<tr>
<td>Directdebit</td>
<td><code>directdebit</code></td>
<td class="w-1"><span class="payment payment-provider-directdebit"></span>
</td>
<td class="w-1"><span class="payment payment-provider-directdebit-dark"></span>
</td>
</tr>
<tr>
<td>Discover</td>
<td><code>discover</code></td>
<td class="w-1"><span class="payment payment-provider-discover"></span>
</td>
<td class="w-1"><span class="payment payment-provider-discover-dark"></span>
</td>
</tr>
<tr>
<td>Dotpay</td>
<td><code>dotpay</code></td>
<td class="w-1"><span class="payment payment-provider-dotpay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-dotpay-dark"></span>
</td>
</tr>
<tr>
<td>Dwolla</td>
<td><code>dwolla</code></td>
<td class="w-1"><span class="payment payment-provider-dwolla"></span>
</td>
<td class="w-1"><span class="payment payment-provider-dwolla-dark"></span>
</td>
</tr>
<tr>
<td>Ebay</td>
<td><code>ebay</code></td>
<td class="w-1"><span class="payment payment-provider-ebay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-ebay-dark"></span>
</td>
</tr>
<tr>
<td>Eway</td>
<td><code>eway</code></td>
<td class="w-1"><span class="payment payment-provider-eway"></span>
</td>
<td class="w-1"><span class="payment payment-provider-eway-dark"></span>
</td>
</tr>
<tr>
<td>Giropay</td>
<td><code>giropay</code></td>
<td class="w-1"><span class="payment payment-provider-giropay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-giropay-dark"></span>
</td>
</tr>
<tr>
<td>Googlewallet</td>
<td><code>googlewallet</code></td>
<td class="w-1"><span class="payment payment-provider-googlewallet"></span>
</td>
<td class="w-1"><span class="payment payment-provider-googlewallet-dark"></span>
</td>
</tr>
<tr>
<td>Ingenico</td>
<td><code>ingenico</code></td>
<td class="w-1"><span class="payment payment-provider-ingenico"></span>
</td>
<td class="w-1"><span class="payment payment-provider-ingenico-dark"></span>
</td>
</tr>
<tr>
<td>Jcb</td>
<td><code>jcb</code></td>
<td class="w-1"><span class="payment payment-provider-jcb"></span>
</td>
<td class="w-1"><span class="payment payment-provider-jcb-dark"></span>
</td>
</tr>
<tr>
<td>Klarna</td>
<td><code>klarna</code></td>
<td class="w-1"><span class="payment payment-provider-klarna"></span>
</td>
<td class="w-1"><span class="payment payment-provider-klarna-dark"></span>
</td>
</tr>
<tr>
<td>Laser</td>
<td><code>laser</code></td>
<td class="w-1"><span class="payment payment-provider-laser"></span>
</td>
<td class="w-1"><span class="payment payment-provider-laser-dark"></span>
</td>
</tr>
<tr>
<td>Maestro</td>
<td><code>maestro</code></td>
<td class="w-1"><span class="payment payment-provider-maestro"></span>
</td>
<td class="w-1"><span class="payment payment-provider-maestro-dark"></span>
</td>
</tr>
<tr>
<td>Mastercard</td>
<td><code>mastercard</code></td>
<td class="w-1"><span class="payment payment-provider-mastercard"></span>
</td>
<td class="w-1"><span class="payment payment-provider-mastercard-dark"></span>
</td>
</tr>
<tr>
<td>Mir</td>
<td><code>mir</code></td>
<td class="w-1"><span class="payment payment-provider-mir"></span>
</td>
<td class="w-1"><span class="payment payment-provider-mir-dark"></span>
</td>
</tr>
<tr>
<td>Monero</td>
<td><code>monero</code></td>
<td class="w-1"><span class="payment payment-provider-monero"></span>
</td>
<td class="w-1"><span class="payment payment-provider-monero-dark"></span>
</td>
</tr>
<tr>
<td>Neteller</td>
<td><code>neteller</code></td>
<td class="w-1"><span class="payment payment-provider-neteller"></span>
</td>
<td class="w-1"><span class="payment payment-provider-neteller-dark"></span>
</td>
</tr>
<tr>
<td>Ogone</td>
<td><code>ogone</code></td>
<td class="w-1"><span class="payment payment-provider-ogone"></span>
</td>
<td class="w-1"><span class="payment payment-provider-ogone-dark"></span>
</td>
</tr>
<tr>
<td>Okpay</td>
<td><code>okpay</code></td>
<td class="w-1"><span class="payment payment-provider-okpay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-okpay-dark"></span>
</td>
</tr>
<tr>
<td>Paybox</td>
<td><code>paybox</code></td>
<td class="w-1"><span class="payment payment-provider-paybox"></span>
</td>
<td class="w-1"><span class="payment payment-provider-paybox-dark"></span>
</td>
</tr>
<tr>
<td>Paymill</td>
<td><code>paymill</code></td>
<td class="w-1"><span class="payment payment-provider-paymill"></span>
</td>
<td class="w-1"><span class="payment payment-provider-paymill-dark"></span>
</td>
</tr>
<tr>
<td>Payone</td>
<td><code>payone</code></td>
<td class="w-1"><span class="payment payment-provider-payone"></span>
</td>
<td class="w-1"><span class="payment payment-provider-payone-dark"></span>
</td>
</tr>
<tr>
<td>Payoneer</td>
<td><code>payoneer</code></td>
<td class="w-1"><span class="payment payment-provider-payoneer"></span>
</td>
<td class="w-1"><span class="payment payment-provider-payoneer-dark"></span>
</td>
</tr>
<tr>
<td>Paypal</td>
<td><code>paypal</code></td>
<td class="w-1"><span class="payment payment-provider-paypal"></span>
</td>
<td class="w-1"><span class="payment payment-provider-paypal-dark"></span>
</td>
</tr>
<tr>
<td>Paysafecard</td>
<td><code>paysafecard</code></td>
<td class="w-1"><span class="payment payment-provider-paysafecard"></span>
</td>
<td class="w-1"><span class="payment payment-provider-paysafecard-dark"></span>
</td>
</tr>
<tr>
<td>Payu</td>
<td><code>payu</code></td>
<td class="w-1"><span class="payment payment-provider-payu"></span>
</td>
<td class="w-1"><span class="payment payment-provider-payu-dark"></span>
</td>
</tr>
<tr>
<td>Payza</td>
<td><code>payza</code></td>
<td class="w-1"><span class="payment payment-provider-payza"></span>
</td>
<td class="w-1"><span class="payment payment-provider-payza-dark"></span>
</td>
</tr>
<tr>
<td>Przelewy24</td>
<td><code>przelewy24</code></td>
<td class="w-1"><span class="payment payment-provider-przelewy24"></span>
</td>
<td class="w-1"><span class="payment payment-provider-przelewy24-dark"></span>
</td>
</tr>
<tr>
<td>Ripple</td>
<td><code>ripple</code></td>
<td class="w-1"><span class="payment payment-provider-ripple"></span>
</td>
<td class="w-1"><span class="payment payment-provider-ripple-dark"></span>
</td>
</tr>
<tr>
<td>Sage</td>
<td><code>sage</code></td>
<td class="w-1"><span class="payment payment-provider-sage"></span>
</td>
<td class="w-1"><span class="payment payment-provider-sage-dark"></span>
</td>
</tr>
<tr>
<td>Sepa</td>
<td><code>sepa</code></td>
<td class="w-1"><span class="payment payment-provider-sepa"></span>
</td>
<td class="w-1"><span class="payment payment-provider-sepa-dark"></span>
</td>
</tr>
<tr>
<td>Shopify</td>
<td><code>shopify</code></td>
<td class="w-1"><span class="payment payment-provider-shopify"></span>
</td>
<td class="w-1"><span class="payment payment-provider-shopify-dark"></span>
</td>
</tr>
<tr>
<td>Skrill</td>
<td><code>skrill</code></td>
<td class="w-1"><span class="payment payment-provider-skrill"></span>
</td>
<td class="w-1"><span class="payment payment-provider-skrill-dark"></span>
</td>
</tr>
<tr>
<td>Solo</td>
<td><code>solo</code></td>
<td class="w-1"><span class="payment payment-provider-solo"></span>
</td>
<td class="w-1"><span class="payment payment-provider-solo-dark"></span>
</td>
</tr>
<tr>
<td>Square</td>
<td><code>square</code></td>
<td class="w-1"><span class="payment payment-provider-square"></span>
</td>
<td class="w-1"><span class="payment payment-provider-square-dark"></span>
</td>
</tr>
<tr>
<td>Stripe</td>
<td><code>stripe</code></td>
<td class="w-1"><span class="payment payment-provider-stripe"></span>
</td>
<td class="w-1"><span class="payment payment-provider-stripe-dark"></span>
</td>
</tr>
<tr>
<td>Switch</td>
<td><code>switch</code></td>
<td class="w-1"><span class="payment payment-provider-switch"></span>
</td>
<td class="w-1"><span class="payment payment-provider-switch-dark"></span>
</td>
</tr>
<tr>
<td>Tpay</td>
<td><code>tpay</code></td>
<td class="w-1"><span class="payment payment-provider-tpay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-tpay-dark"></span>
</td>
</tr>
<tr>
<td>Ukash</td>
<td><code>ukash</code></td>
<td class="w-1"><span class="payment payment-provider-ukash"></span>
</td>
<td class="w-1"><span class="payment payment-provider-ukash-dark"></span>
</td>
</tr>
<tr>
<td>Unionpay</td>
<td><code>unionpay</code></td>
<td class="w-1"><span class="payment payment-provider-unionpay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-unionpay-dark"></span>
</td>
</tr>
<tr>
<td>Verifone</td>
<td><code>verifone</code></td>
<td class="w-1"><span class="payment payment-provider-verifone"></span>
</td>
<td class="w-1"><span class="payment payment-provider-verifone-dark"></span>
</td>
</tr>
<tr>
<td>Verisign</td>
<td><code>verisign</code></td>
<td class="w-1"><span class="payment payment-provider-verisign"></span>
</td>
<td class="w-1"><span class="payment payment-provider-verisign-dark"></span>
</td>
</tr>
<tr>
<td>Visa</td>
<td><code>visa</code></td>
<td class="w-1"><span class="payment payment-provider-visa"></span>
</td>
<td class="w-1"><span class="payment payment-provider-visa-dark"></span>
</td>
</tr>
<tr>
<td>Webmoney</td>
<td><code>webmoney</code></td>
<td class="w-1"><span class="payment payment-provider-webmoney"></span>
</td>
<td class="w-1"><span class="payment payment-provider-webmoney-dark"></span>
</td>
</tr>
<tr>
<td>Westernunion</td>
<td><code>westernunion</code></td>
<td class="w-1"><span class="payment payment-provider-westernunion"></span>
</td>
<td class="w-1"><span class="payment payment-provider-westernunion-dark"></span>
</td>
</tr>
<tr>
<td>Worldpay</td>
<td><code>worldpay</code></td>
<td class="w-1"><span class="payment payment-provider-worldpay"></span>
</td>
<td class="w-1"><span class="payment payment-provider-worldpay-dark"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
Copyright © 2020
<a href=".." class="link-secondary">Tabler</a>.
All rights reserved.
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>