payments-icons-library
Version:
Payments Icons Library can help you fetch icons for most of the payment methods in different sizes and format.Icons can be fetched individually or in bulk format by entering the names or ifsc code.
388 lines (329 loc) • 13.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="High quality png and svg icons to help you build apps for payments or finances">
<meta name="author" content="Bhaskar Aggarwal, Raj Nandan Sharma">
<title>Payments Icons | Cashfree Payments</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/starter-template/">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
pre {
border-radius: 4px;
}
#results img {
border: 1px solid #ccc;
border-radius: 2px;
}
.tooltip.show p {
text-align: left;
}
.tooltip-inner {
text-align: left;
}
.tooltip-inner {
max-width: 100% ;
}
.text-primary{
margin-bottom: 0.5rem;
}
</style>
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/5.0/examples/starter-template/starter-template.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
<script src="dist/image-library.js"></script>
</head>
<body>
<div class="col-lg-8 mx-auto p-3 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom" style="position:relative">
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
<svg width="40" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<defs>
<style>
.cls-1 {
fill: #d9e4e8;
}
.cls-2 {
fill: #40c168;
}
.cls-3 {
fill: #ffb24d;
}
.cls-4 {
fill: #141f38;
}
</style>
</defs>
<title>secure-payment-filled</title>
<path class="cls-1"
d="M332.8,326.4a32,32,0,0,1,32-32h6.4a51.26,51.26,0,0,1,51.2-51.2V140.8a51.26,51.26,0,0,0-51.2-51.2H64a51.26,51.26,0,0,0-51.2,51.2V320A51.26,51.26,0,0,0,64,371.2H332.8Z" />
<path class="cls-2"
d="M12.8,192V151.73A11,11,0,0,1,23.73,140.8H411.47a11,11,0,0,1,10.93,10.93V192Z" />
<rect class="cls-3" x="345.6" y="307.2" width="153.6" height="115.2" rx="19.2" ry="19.2" />
<path class="cls-4"
d="M64,256a12.8,12.8,0,0,1,12.8-12.8h76.8a12.8,12.8,0,0,1,0,25.6H76.8A12.8,12.8,0,0,1,64,256Zm153.6,38.4H76.8a12.8,12.8,0,0,0,0,25.6H217.6a12.8,12.8,0,0,0,0-25.6Zm294.4,32v76.8a32,32,0,0,1-32,32H364.8a32,32,0,0,1-32-32V384H64A64.19,64.19,0,0,1,0,320V140.8a64.19,64.19,0,0,1,64-64H371.2a64.19,64.19,0,0,1,64,64v104a51.29,51.29,0,0,1,38.4,49.58H480A32,32,0,0,1,512,326.4Zm-89.6-57.6a25.63,25.63,0,0,0-25.6,25.6H448A25.63,25.63,0,0,0,422.4,268.8ZM25.6,179.2h384V153.6H25.6ZM27.8,128H407.4a38.46,38.46,0,0,0-36.2-25.6H64A38.46,38.46,0,0,0,27.8,128Zm305,230.4v-32a32,32,0,0,1,32-32h6.4a51.29,51.29,0,0,1,38.4-49.58v-40H25.6V320A38.44,38.44,0,0,0,64,358.4Zm153.6-32A6.41,6.41,0,0,0,480,320H364.8a6.41,6.41,0,0,0-6.4,6.4v76.8a6.41,6.41,0,0,0,6.4,6.4H480a6.41,6.41,0,0,0,6.4-6.4Zm-64,19.2a12.8,12.8,0,0,0-12.8,12.8v12.8a12.8,12.8,0,1,0,25.6,0V358.4A12.8,12.8,0,0,0,422.4,345.6Z" />
</svg>
<span class="fs-4"> Payments Icons</span>
</a>
<img style="position: absolute;right: 10px;height:60px;"
src="https://cashfreelogo.cashfree.com/website/NavFooter/Cashfree-Dark.svg" alt="" srcset="">
</header>
<main>
<!-- -->
<h2>Get started with Payments Icons</h2>
<p>High quality png and svg icons to help you build apps for payments or finances</p>
<div class="row g-5">
<div class="col-md-6">
<p class="text-primary">Select Size</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="sm"
checked>
<label class="form-check-label" for="exampleRadios1">
sm (32x32)
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2"
value="md">
<label class="form-check-label" for="exampleRadios2">
md (64x64)
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3"
value="lg">
<label class="form-check-label" for="exampleRadios3">
lg (128x128)
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4"
value="svg">
<label class="form-check-label" for="exampleRadios3">
svg
</label>
</div>
<hr class="col-3 col-md-2 ">
<p class="text-primary">Search</p>
<div class="row">
<small id="emailHelp" class="form-text text-muted" style="margin-bottom: 10px;">Bank Names/ Short Codes/ IFSC Code</small>
<div class="col col-8">
<div class="form-group">
<input type="text" class="form-control" id="iconSearch" placeholder="sbi, sbin, hdfc, idib">
<small id="emailHelp" class="form-text text-muted">example: sbi, hdfc, state bank of
india,
bhim, phonepe,
idfc</small>
</div>
</div>
<div class="col col-4">
<button class="btn btn-primary" id="iconSearchBtn" type="button">Fetch Icons</button>
</div>
</div>
<hr class="col-3 col-md-2 ">
<p class="text-primary">or Select Type</p>
<div class="row">
<div class="col col-8 pr-1">
<div class="form-group">
<select class="form-control" id="getModeIcons" name="">
<option value="cardbanks">cardbanks</option>
<option value="cardschemes">cardschemes</option>
<option value="paylater">paylater</option>
<option value="upi">upi</option>
<option value="wallet">wallet</option>
<option value="cardless">cardless</option>
<option value="aggregators">aggregators</option>
</select>
</div>
</div>
<div class="col-4 col pl-0">
<button class="btn btn-primary" id="getModeIconsBtn" type="button">Fetch Icons</button>
</div>
</div>
</div>
<div class="col-md-6">
<p class="text-muted">
Hover on icons to reveal the JSON object
</p>
<div id="results" class="d-flex flex-row mb-3 flex-wrap">
</div>
</div>
</div>
<hr class="col-3 col-md-2 mt-5">
<div class="row">
<div class="col-md-12">
<h3>Documentation</h3>
<h5>Available Functions</h5>
<table class="table table-bordered table-responsive-md">
<thead>
<tr>
<th scope="col">Function Name</th>
<th scope="col">Usage</th>
<th scope="col">Output</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>getIcon</code>
</td>
<td>
<pre><code>getIcon("search_string","size");</code></pre>
</td>
<td>
<pre><code>{"icon_name": "sbi", "icon_url": "https://example.com/example.png", "icon_version": "1"}</code></pre>
</td>
</tr>
<tr>
<td>
<code>getIcons</code>
</td>
<td>
<pre><code>getIcons(["search_string1", "search_string2"],"size");</code></pre>
</td>
<td>
<pre><code>[{"icon_name": "sbi", "icon_url": "https://example.com/example.png", "icon_version": "1"},
{"icon_name": "icon2", "icon_url": "https://example.com/example2.png", "icon_version": "1"}]</code></pre>
</td>
</tr>
<tr>
<td>
<code>getModesIcons</code>
</td>
<td>
<pre><code>getModesIcons("mode_type","size");</code></pre>
</td>
<td>
<pre><code>[{"icon_name": "sbi", "icon_url": "https://example.com/example.png", "icon_version": "1"},
{"icon_name": "icon2", "icon_url": "https://example.com/example2.png", "icon_version": "1"}]</code></pre>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col">
<h5>Available <code>sizes</code></h5>
<ul>
<li><code>sm</code>: 32px by 32px</li>
<li><code>md</code>: 64px by 64px</li>
<li><code>lg</code>: 128px by 128px</li>
<li><code>svg</code>: size it accordingly</li>
</ul>
</div>
<div class="col">
<h5>Available <code>modeIcons</code></h5>
<ul>
<li><code>cardbanks</code>: icons for all bank images</li>
<li><code>cardschemes</code>: icons for all card schemes, exaxmple rupay, visa etc</li>
<li><code>paylater</code>: icons for paylater apps</li>
<li><code>upi</code>: icons for upi apps</li>
<li><code>wallet</code>: icons for wallet apps</li>
<li><code>cardless</code>: icons for cardless emi providers</li>
<li><code>aggregators</code>: icons for payment aggregators</li>
</ul>
</div>
</div>
<h5 class="text-muted">Using NPM</h5>
<p>Install</p>
<pre><code>npm <span class="hljs-selector-tag">i</span> payments-icons-library
</code></pre>
<p>Usage</p>
<pre><code>import icons from "payments-icons-library";
let sbiIcon = icons.getIcon('sbi', 'sm');
//{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}
let [sbiIcon, auIcon] = icons.getIcons(['sbi', 'au'], 'sm');
//[{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}, ...]
let banksLogo = icons.getModesIcons('cardbanks', 'sm');
//[{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}, ...]
</code></pre>
</div>
</div>
<!-- -->
<!-- -->
<h5 class="text-muted">Using Vanilla JS</h5>
<p>From CDN</p>
<pre><code><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/gh/cashfree/payments-icons-library@latest/dist/image-library.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code></pre>
<p>Usage</p>
<pre><code>let sbiIcon = paymentsIcons.getIcon('sbi', 'sm');
//{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}
let [sbiIcon, auIcon] = paymentsIcons.getIcons(['sbi', 'au'], 'sm');
//[{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}, ...]
let banksLogo = paymentsIcons.getModesIcons('cardbanks', 'sm');
//[{"icon_name": "sbi", "icon_url": "https://cashfreelogo.cashfree.com/assets_images/pg/nb/32/sbi.png", "icon_version": "1"}, ...]
</code></pre>
<!-- -->
<!-- -->
</main>
</div>
<script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
function highlightCode() {
var pres = document.querySelectorAll("pre>code");
for (var i = 0; i < pres.length; i++) {
hljs.highlightBlock(pres[i]);
}
}
highlightCode();
var debounce = null;
function render(res) {
$("#results").html("");
for (let i = 0; i < res.length; i++) {
const element = res[i];
var encodedStr = JSON.stringify(element).replaceAll('"', "'").replaceAll(',', ",<br> ")
.replaceAll('{', "{<br> ").replaceAll('}', "<br>}");
$("#results").append(
'<img data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="' + encodedStr +
'" class="m-1" src="' +
element.icon_url + '" alt="' + element.icon_name + '" >')
}
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
}
function searchIcons() {
let v = $('#iconSearch').val();
clearTimeout(debounce);
debounce = setTimeout(function () {
if (v.length > 0) {
let ar = v.split(",").map(function (v) {
return $.trim(v)
});
let res = paymentsIcons.getIcons(ar, $("input[type='radio'][name='exampleRadios']:checked").val())
render(res)
}
}, 1500);
}
$('#iconSearchBtn').on('click', function (e) {
searchIcons()
});
$("#getModeIconsBtn").click(function (e) {
let res = paymentsIcons.getModesIcons($("#getModeIcons").val(), $(
"input[type='radio'][name='exampleRadios']:checked").val())
render(res)
})
</script>
</body>
</html>