I have a JavaScript function that retrieves card information based on its first 6 digits (BIN).
const getCardInfo = async (cardNumber, isLive = false) => {
const binCode = cardNumber.substring(0, 6);
const cachedData = sessionStorage.getItem(`bin_${binCode}`);
if (cachedData) {
const jsonParsedData = JSON.parse(cachedData);
const cardType = jsonParsedData.type === "CREDIT" ? "Credit" : "Debit" ?? "Unknown";
const country = jsonParsedData.country || "Unknown";
const cardVendor = jsonParsedData.vendor || "Unknown";
let cardInfoText = '';
if (isLive) {
cardInfoText = `LIVE [${cardVendor} - ${country} - ${cardType}]`;
} else {
cardInfoText = `[${cardVendor} - ${country} - ${cardType}]`;
}
return cardInfoText;
}
else {
const response = await fetch(`https://apilink.com/api/${binCode}`);
const jsonParsedData = await response.json();
if (!jsonParsedData.result) {
return "UNKNOWN";
}
const cardType = jsonParsedData.data.type === "CREDIT" ? "Credit" : "Debit" ?? "Unknown";
const country = jsonParsedData.data.country || "Unknown";
const cardVendor = jsonParsedData.data.vendor || "Unknown";
// Store information in cache only if it does not exist already
const cachedData = sessionStorage.getItem(`bin_${binCode}`);
if (!cachedData) {
sessionStorage.setItem(`bin_${binCode}`, JSON.stringify(jsonParsedData.data));
}
let cardInfoText = '';
if (isLive) {
cardInfoText = `- LIVE [${cardVendor} - ${country} - ${cardType}]`;
} else {
cardInfoText = `[${cardVendor} - ${country} - ${cardType}]`;
}
return cardInfoText;
}
};
The function works fine, as confirmed by the browser's network section under "Preview" and "response":
{"bin":542343,"vendor":"MASTERCARD","type":"CREDIT","level":"STANDARD","bank":"BANCA COMERCIALA CARPATICA S.A.","country":"ROMANIA","countryInfo":{"name":"Romania","emoji":"🇷🇴","unicode":"U+1F1F7 U+1F1F4","code":"RO"}}}
Instead of displaying all this data, you just want to show cardNumber - LIVE. How can you achieve this without much experience?