1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 18:04:26 +04:00
Files
tabler/demo/docs/payments.html
2020-01-10 23:08:18 +01:00

1292 lines
65 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 v1.0.0-alpha
* @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"/>
<meta http-equiv="Content-Language" content="en"/>
<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"/>
<title>Payments - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- Libs CSS -->
<link href="../dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
<link href="../dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
<link href="../dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
<link href="../dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
<!-- Tabler Core -->
<link href="../dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="../dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
<link href="../dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
<link href="../dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
</head>
<body class="antialiased">
<div class="wrapper">
<div class="content">
<header class="topnav">
<div class="container">
<div class="navbar navbar-expand-lg navbar-light">
<a href=".." class="navbar-brand mr-4">
<img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
<img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
</a>
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
<a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" 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>
Source code
</a>
</li>
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/004f.jpg)"></span>
<span class="ml-2 d-none d-lg-block lh-1">
Leesa Beaty
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Profile
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
Settings
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
Need help?
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Sign out
</a>
</div>
</li>
</ul>
</div>
</div>
</header>
<header class="topnav">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../form-elements.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
</span>
Form elements
</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
</span>
Base
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="../blank.html" >
Starter page
</a>
</li>
<li >
<a class="dropdown-item" href="../buttons.html" >
Buttons
<span class="badge bg-green ml-auto">New</span>
</a>
</li>
<li >
<a class="dropdown-item" href="../cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="../datatables.html" >
Data 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="../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">
<a class="nav-link" href="../charts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</span>
Charts
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</span>
Error pages
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="../400.html" >
400 page
</a>
</li>
<li >
<a class="dropdown-item" href="../401.html" >
401 page
</a>
</li>
<li >
<a class="dropdown-item" href="../403.html" >
403 page
</a>
</li>
<li >
<a class="dropdown-item" href="../404.html" >
404 page
</a>
</li>
<li >
<a class="dropdown-item" href="../500.html" >
500 page
</a>
</li>
<li >
<a class="dropdown-item" href="../503.html" >
503 page
</a>
</li>
<li >
<a class="dropdown-item" href="../maintenance.html" >
Maintenance page
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
aria-expanded="false" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</span>
A
</a>
<ul class="dropdown-menu">
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
B
</a>
<div class="dropdown-menu">
<a href="../tmp.html" class="dropdown-item">C</a>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../layouts.html" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
</span>
Layouts
<span class="badge bg-green ml-2">New</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-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</span>
Extra
</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="../search-results.html" >
Search results
</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="true" >
<span class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</span>
Documentation
</a>
<ul class="dropdown-menu">
<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/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/layout.html" >
Layout
</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/ribbons.html" >
Ribbons
<span class="badge bg-green ml-auto">New</span>
</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="navbar-search d-none d-xl-block">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</span>
<input type="text" class="form-control" placeholder="Search&hellip;">
</div>
</form>
</div>
</div>
</div>
</header>
<div class="content-page">
<main class="container my-4 flex-fill">
<!-- Page title -->
<div class="page-title-box">
<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="col-lg-3 order-lg-1 mb-4">
<a href="https://github.com/tabler/tabler" class="btn btn-secondary mb-4 btn-block" target="_blank">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" 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>
<div class="list-group list-group-transparent mb-0">
<a href="../docs/index.html" class="list-group-item list-group-item-action">
Introduction
</a>
<a href="../docs/alerts.html" class="list-group-item list-group-item-action">
Alerts
</a>
<a href="../docs/autosize.html" class="list-group-item list-group-item-action">
Autosize
</a>
<a href="../docs/avatars.html" class="list-group-item list-group-item-action">
Avatars
</a>
<a href="../docs/badges.html" class="list-group-item list-group-item-action">
Badges
</a>
<a href="../docs/breadcrumb.html" class="list-group-item list-group-item-action">
Breadcrumb
</a>
<a href="../docs/buttons.html" class="list-group-item list-group-item-action">
Buttons
</a>
<a href="../docs/cards.html" class="list-group-item list-group-item-action">
Cards
</a>
<a href="../docs/carousel.html" class="list-group-item list-group-item-action">
Carousel
</a>
<a href="../docs/colors.html" class="list-group-item list-group-item-action">
Colors
</a>
<a href="../docs/countup.html" class="list-group-item list-group-item-action">
Countup
</a>
<a href="../docs/cursors.html" class="list-group-item list-group-item-action">
Cursors
</a>
<a href="../docs/charts.html" class="list-group-item list-group-item-action">
Charts
</a>
<a href="../docs/divider.html" class="list-group-item list-group-item-action">
Divider
</a>
<a href="../docs/empty.html" class="list-group-item list-group-item-action">
Empty states
</a>
<a href="../docs/flags.html" class="list-group-item list-group-item-action">
Flags
</a>
<a href="../docs/form-elements.html" class="list-group-item list-group-item-action">
Form elements
</a>
<a href="../docs/form-helpers.html" class="list-group-item list-group-item-action">
Form helpers
</a>
<a href="../docs/input-mask.html" class="list-group-item list-group-item-action">
Form input mask
</a>
<a href="../docs/layout.html" class="list-group-item list-group-item-action">
Layout
</a>
<a href="../docs/progress.html" class="list-group-item list-group-item-action">
Progress
</a>
<a href="../docs/payments.html" class="list-group-item list-group-item-action active">
Payments
</a>
<a href="../docs/ribbons.html" class="list-group-item list-group-item-action">
Ribbons
<span class="badge bg-green ml-auto">New</span>
</a>
<a href="../docs/spinners.html" class="list-group-item list-group-item-action">
Spinners
</a>
<a href="../docs/steps.html" class="list-group-item list-group-item-action">
Steps
</a>
<a href="../docs/tables.html" class="list-group-item list-group-item-action">
Tables
</a>
<a href="../docs/tabs.html" class="list-group-item list-group-item-action">
Tabs
</a>
<a href="../docs/timelines.html" class="list-group-item list-group-item-action">
Timelines
</a>
<a href="../docs/toasts.html" class="list-group-item list-group-item-action">
Toasts
</a>
<a href="../docs/tooltips.html" class="list-group-item list-group-item-action">
Tooltips
</a>
<a href="../docs/typography.html" class="list-group-item list-group-item-action">
Typography
</a>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-3">Payments
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-green"><polyline points="20 6 9 17 4 12"></polyline></svg>
</h2>
<div class="alert alert-info">This module is available in <code>tabler-payments</code>
plugin.
</div>
<h3 id="payment">Payment</h3>
<div class="example">
<span class="payment payment-provider-shopify"></span>
<span class="payment payment-provider-visa"></span>
<span class="payment payment-provider-paypal"></span>
</div>
<div 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"</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"</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"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</div>
<h3 id="payment-sizes">Payment sizes</h3>
<p>Using Bootstraps typical naming structure, you can create a standard payment, or scale it up to different sizes based on whats needed.</p>
<div class="example">
<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-provider-amazon"></span>
</div>
<div 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"</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"</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"</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-amazon"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</div>
<h3 id="types">Types</h3>
<table>
<tr>
<td><span class="payment payment-provider-2checkout-dark"></span>
</td>
<td><code>2checkout-dark</code></td>
<td>2checkout Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-2checkout"></span>
</td>
<td><code>2checkout</code></td>
<td>2checkout</td>
</tr>
<tr>
<td><span class="payment payment-provider-alipay-dark"></span>
</td>
<td><code>alipay-dark</code></td>
<td>Alipay Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-alipay"></span>
</td>
<td><code>alipay</code></td>
<td>Alipay</td>
</tr>
<tr>
<td><span class="payment payment-provider-amazon-dark"></span>
</td>
<td><code>amazon-dark</code></td>
<td>Amazon Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-amazon"></span>
</td>
<td><code>amazon</code></td>
<td>Amazon</td>
</tr>
<tr>
<td><span class="payment payment-provider-americanexpress-dark"></span>
</td>
<td><code>americanexpress-dark</code></td>
<td>Americanexpress Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-americanexpress"></span>
</td>
<td><code>americanexpress</code></td>
<td>Americanexpress</td>
</tr>
<tr>
<td><span class="payment payment-provider-applepay-dark"></span>
</td>
<td><code>applepay-dark</code></td>
<td>Applepay Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-applepay"></span>
</td>
<td><code>applepay</code></td>
<td>Applepay</td>
</tr>
<tr>
<td><span class="payment payment-provider-bancontact-dark"></span>
</td>
<td><code>bancontact-dark</code></td>
<td>Bancontact Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-bancontact"></span>
</td>
<td><code>bancontact</code></td>
<td>Bancontact</td>
</tr>
<tr>
<td><span class="payment payment-provider-bitcoin-dark"></span>
</td>
<td><code>bitcoin-dark</code></td>
<td>Bitcoin Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-bitcoin"></span>
</td>
<td><code>bitcoin</code></td>
<td>Bitcoin</td>
</tr>
<tr>
<td><span class="payment payment-provider-bitpay-dark"></span>
</td>
<td><code>bitpay-dark</code></td>
<td>Bitpay Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-bitpay"></span>
</td>
<td><code>bitpay</code></td>
<td>Bitpay</td>
</tr>
<tr>
<td><span class="payment payment-provider-cirrus-dark"></span>
</td>
<td><code>cirrus-dark</code></td>
<td>Cirrus Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-cirrus"></span>
</td>
<td><code>cirrus</code></td>
<td>Cirrus</td>
</tr>
<tr>
<td><span class="payment payment-provider-clickandbuy-dark"></span>
</td>
<td><code>clickandbuy-dark</code></td>
<td>Clickandbuy Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-clickandbuy"></span>
</td>
<td><code>clickandbuy</code></td>
<td>Clickandbuy</td>
</tr>
<tr>
<td><span class="payment payment-provider-coinkite-dark"></span>
</td>
<td><code>coinkite-dark</code></td>
<td>Coinkite Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-coinkite"></span>
</td>
<td><code>coinkite</code></td>
<td>Coinkite</td>
</tr>
<tr>
<td><span class="payment payment-provider-dinersclub-dark"></span>
</td>
<td><code>dinersclub-dark</code></td>
<td>Dinersclub Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-dinersclub"></span>
</td>
<td><code>dinersclub</code></td>
<td>Dinersclub</td>
</tr>
<tr>
<td><span class="payment payment-provider-directdebit-dark"></span>
</td>
<td><code>directdebit-dark</code></td>
<td>Directdebit Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-directdebit"></span>
</td>
<td><code>directdebit</code></td>
<td>Directdebit</td>
</tr>
<tr>
<td><span class="payment payment-provider-discover-dark"></span>
</td>
<td><code>discover-dark</code></td>
<td>Discover Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-discover"></span>
</td>
<td><code>discover</code></td>
<td>Discover</td>
</tr>
<tr>
<td><span class="payment payment-provider-dwolla-dark"></span>
</td>
<td><code>dwolla-dark</code></td>
<td>Dwolla Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-dwolla"></span>
</td>
<td><code>dwolla</code></td>
<td>Dwolla</td>
</tr>
<tr>
<td><span class="payment payment-provider-ebay-dark"></span>
</td>
<td><code>ebay-dark</code></td>
<td>Ebay Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-ebay"></span>
</td>
<td><code>ebay</code></td>
<td>Ebay</td>
</tr>
<tr>
<td><span class="payment payment-provider-eway-dark"></span>
</td>
<td><code>eway-dark</code></td>
<td>Eway Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-eway"></span>
</td>
<td><code>eway</code></td>
<td>Eway</td>
</tr>
<tr>
<td><span class="payment payment-provider-giropay-dark"></span>
</td>
<td><code>giropay-dark</code></td>
<td>Giropay Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-giropay"></span>
</td>
<td><code>giropay</code></td>
<td>Giropay</td>
</tr>
<tr>
<td><span class="payment payment-provider-googlewallet-dark"></span>
</td>
<td><code>googlewallet-dark</code></td>
<td>Googlewallet Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-googlewallet"></span>
</td>
<td><code>googlewallet</code></td>
<td>Googlewallet</td>
</tr>
<tr>
<td><span class="payment payment-provider-ingenico-dark"></span>
</td>
<td><code>ingenico-dark</code></td>
<td>Ingenico Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-ingenico"></span>
</td>
<td><code>ingenico</code></td>
<td>Ingenico</td>
</tr>
<tr>
<td><span class="payment payment-provider-jcb-dark"></span>
</td>
<td><code>jcb-dark</code></td>
<td>Jcb Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-jcb"></span>
</td>
<td><code>jcb</code></td>
<td>Jcb</td>
</tr>
<tr>
<td><span class="payment payment-provider-klarna-dark"></span>
</td>
<td><code>klarna-dark</code></td>
<td>Klarna Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-klarna"></span>
</td>
<td><code>klarna</code></td>
<td>Klarna</td>
</tr>
<tr>
<td><span class="payment payment-provider-laser-dark"></span>
</td>
<td><code>laser-dark</code></td>
<td>Laser Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-laser"></span>
</td>
<td><code>laser</code></td>
<td>Laser</td>
</tr>
<tr>
<td><span class="payment payment-provider-maestro-dark"></span>
</td>
<td><code>maestro-dark</code></td>
<td>Maestro Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-maestro"></span>
</td>
<td><code>maestro</code></td>
<td>Maestro</td>
</tr>
<tr>
<td><span class="payment payment-provider-mastercard-dark"></span>
</td>
<td><code>mastercard-dark</code></td>
<td>Mastercard Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-mastercard"></span>
</td>
<td><code>mastercard</code></td>
<td>Mastercard</td>
</tr>
<tr>
<td><span class="payment payment-provider-monero-dark"></span>
</td>
<td><code>monero-dark</code></td>
<td>Monero Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-monero"></span>
</td>
<td><code>monero</code></td>
<td>Monero</td>
</tr>
<tr>
<td><span class="payment payment-provider-neteller-dark"></span>
</td>
<td><code>neteller-dark</code></td>
<td>Neteller Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-neteller"></span>
</td>
<td><code>neteller</code></td>
<td>Neteller</td>
</tr>
<tr>
<td><span class="payment payment-provider-ogone-dark"></span>
</td>
<td><code>ogone-dark</code></td>
<td>Ogone Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-ogone"></span>
</td>
<td><code>ogone</code></td>
<td>Ogone</td>
</tr>
<tr>
<td><span class="payment payment-provider-okpay-dark"></span>
</td>
<td><code>okpay-dark</code></td>
<td>Okpay Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-okpay"></span>
</td>
<td><code>okpay</code></td>
<td>Okpay</td>
</tr>
<tr>
<td><span class="payment payment-provider-paybox-dark"></span>
</td>
<td><code>paybox-dark</code></td>
<td>Paybox Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-paybox"></span>
</td>
<td><code>paybox</code></td>
<td>Paybox</td>
</tr>
<tr>
<td><span class="payment payment-provider-paymill-dark"></span>
</td>
<td><code>paymill-dark</code></td>
<td>Paymill Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-paymill"></span>
</td>
<td><code>paymill</code></td>
<td>Paymill</td>
</tr>
<tr>
<td><span class="payment payment-provider-payone-dark"></span>
</td>
<td><code>payone-dark</code></td>
<td>Payone Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-payone"></span>
</td>
<td><code>payone</code></td>
<td>Payone</td>
</tr>
<tr>
<td><span class="payment payment-provider-payoneer-dark"></span>
</td>
<td><code>payoneer-dark</code></td>
<td>Payoneer Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-payoneer"></span>
</td>
<td><code>payoneer</code></td>
<td>Payoneer</td>
</tr>
<tr>
<td><span class="payment payment-provider-paypal-dark"></span>
</td>
<td><code>paypal-dark</code></td>
<td>Paypal Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-paypal"></span>
</td>
<td><code>paypal</code></td>
<td>Paypal</td>
</tr>
<tr>
<td><span class="payment payment-provider-paysafecard-dark"></span>
</td>
<td><code>paysafecard-dark</code></td>
<td>Paysafecard Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-paysafecard"></span>
</td>
<td><code>paysafecard</code></td>
<td>Paysafecard</td>
</tr>
<tr>
<td><span class="payment payment-provider-payu-dark"></span>
</td>
<td><code>payu-dark</code></td>
<td>Payu Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-payu"></span>
</td>
<td><code>payu</code></td>
<td>Payu</td>
</tr>
<tr>
<td><span class="payment payment-provider-payza-dark"></span>
</td>
<td><code>payza-dark</code></td>
<td>Payza Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-payza"></span>
</td>
<td><code>payza</code></td>
<td>Payza</td>
</tr>
<tr>
<td><span class="payment payment-provider-ripple-dark"></span>
</td>
<td><code>ripple-dark</code></td>
<td>Ripple Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-ripple"></span>
</td>
<td><code>ripple</code></td>
<td>Ripple</td>
</tr>
<tr>
<td><span class="payment payment-provider-sage-dark"></span>
</td>
<td><code>sage-dark</code></td>
<td>Sage Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-sage"></span>
</td>
<td><code>sage</code></td>
<td>Sage</td>
</tr>
<tr>
<td><span class="payment payment-provider-sepa-dark"></span>
</td>
<td><code>sepa-dark</code></td>
<td>Sepa Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-sepa"></span>
</td>
<td><code>sepa</code></td>
<td>Sepa</td>
</tr>
<tr>
<td><span class="payment payment-provider-shopify-dark"></span>
</td>
<td><code>shopify-dark</code></td>
<td>Shopify Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-shopify"></span>
</td>
<td><code>shopify</code></td>
<td>Shopify</td>
</tr>
<tr>
<td><span class="payment payment-provider-skrill-dark"></span>
</td>
<td><code>skrill-dark</code></td>
<td>Skrill Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-skrill"></span>
</td>
<td><code>skrill</code></td>
<td>Skrill</td>
</tr>
<tr>
<td><span class="payment payment-provider-solo-dark"></span>
</td>
<td><code>solo-dark</code></td>
<td>Solo Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-solo"></span>
</td>
<td><code>solo</code></td>
<td>Solo</td>
</tr>
<tr>
<td><span class="payment payment-provider-square-dark"></span>
</td>
<td><code>square-dark</code></td>
<td>Square Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-square"></span>
</td>
<td><code>square</code></td>
<td>Square</td>
</tr>
<tr>
<td><span class="payment payment-provider-stripe-dark"></span>
</td>
<td><code>stripe-dark</code></td>
<td>Stripe Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-stripe"></span>
</td>
<td><code>stripe</code></td>
<td>Stripe</td>
</tr>
<tr>
<td><span class="payment payment-provider-switch-dark"></span>
</td>
<td><code>switch-dark</code></td>
<td>Switch Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-switch"></span>
</td>
<td><code>switch</code></td>
<td>Switch</td>
</tr>
<tr>
<td><span class="payment payment-provider-ukash-dark"></span>
</td>
<td><code>ukash-dark</code></td>
<td>Ukash Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-ukash"></span>
</td>
<td><code>ukash</code></td>
<td>Ukash</td>
</tr>
<tr>
<td><span class="payment payment-provider-unionpay-dark"></span>
</td>
<td><code>unionpay-dark</code></td>
<td>Unionpay Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-unionpay"></span>
</td>
<td><code>unionpay</code></td>
<td>Unionpay</td>
</tr>
<tr>
<td><span class="payment payment-provider-verifone-dark"></span>
</td>
<td><code>verifone-dark</code></td>
<td>Verifone Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-verifone"></span>
</td>
<td><code>verifone</code></td>
<td>Verifone</td>
</tr>
<tr>
<td><span class="payment payment-provider-verisign-dark"></span>
</td>
<td><code>verisign-dark</code></td>
<td>Verisign Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-verisign"></span>
</td>
<td><code>verisign</code></td>
<td>Verisign</td>
</tr>
<tr>
<td><span class="payment payment-provider-visa-dark"></span>
</td>
<td><code>visa-dark</code></td>
<td>Visa Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-visa"></span>
</td>
<td><code>visa</code></td>
<td>Visa</td>
</tr>
<tr>
<td><span class="payment payment-provider-webmoney-dark"></span>
</td>
<td><code>webmoney-dark</code></td>
<td>Webmoney Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-webmoney"></span>
</td>
<td><code>webmoney</code></td>
<td>Webmoney</td>
</tr>
<tr>
<td><span class="payment payment-provider-westernunion-dark"></span>
</td>
<td><code>westernunion-dark</code></td>
<td>Westernunion Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-westernunion"></span>
</td>
<td><code>westernunion</code></td>
<td>Westernunion</td>
</tr>
<tr>
<td><span class="payment payment-provider-worldpay-dark"></span>
</td>
<td><code>worldpay-dark</code></td>
<td>Worldpay Dark</td>
</tr>
<tr>
<td><span class="payment payment-provider-worldpay"></span>
</td>
<td><code>worldpay</code></td>
<td>Worldpay</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js?1578694044"></script>
</body>
</html>