323 lines
15 KiB
Smarty
323 lines
15 KiB
Smarty
<div class="order-confirmation__details card bg-light border-1 mb-3" id="wire-payment-details">
|
||
|
||
<div class="card shadow-sm">
|
||
<div class="card-header bg-light d-flex align-items-center">
|
||
<i class="material-icons me-2">account_balance</i>
|
||
<h5 class="mb-0">Реквізити для оплати замовлення</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<!-- ============== DYNAMIC CONTENT AREA ============== -->
|
||
<!-- This area will be populated by JavaScript based on device -->
|
||
|
||
<!-- 1. FOR DESKTOP: QR Code is primary -->
|
||
<div id="desktop-payment-section" class="d-none d-lg-block text-center p-3 mb-4 bg-light rounded border">
|
||
|
||
<p class="text-muted">Відскануйте QR-код у банківському додатку на телефоні. Усі реквізити та сума будуть
|
||
заповнені автоматично.</p>
|
||
<div class="my-3">
|
||
{$qr nofilter}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. FOR MOBILE: Deep links are primary -->
|
||
{* <div id="mobile-payment-section" class="d-lg-none mb-4">
|
||
<div class="text-center">
|
||
<h6 class="mb-2"><strong>Найшвидший спосіб на телефоні</strong></h6>
|
||
<p class="text-muted">Оберіть ваш банк для автоматичного відкриття додатку з реквізитами.</p>
|
||
</div>
|
||
<div id="mobile-bank-links-container" class="d-grid gap-2 mt-3">
|
||
<!-- Bank buttons will be injected here by JS -->
|
||
</div>
|
||
</div> *}
|
||
|
||
<!-- 3. FOR DESKTOP: Accordion with links is secondary -->
|
||
{* <div class="d-none d-lg-block mb-4">
|
||
<div class="accordion" id="desktopBankLinksAccordion">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingOne">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||
data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
|
||
<i class="material-icons me-2">touch_app</i>
|
||
Оплата через посилання (для мобільних пристроїв)
|
||
</button>
|
||
</h2>
|
||
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
|
||
data-bs-parent="#desktopBankLinksAccordion">
|
||
<div class="accordion-body">
|
||
<p class="text-muted">Ці посилання призначені для швидкої оплати на смартфоні. Ви можете надіслати їх
|
||
собі на телефон.</p>
|
||
<div id="desktop-bank-links-container">
|
||
<!-- Bank links list will be injected here by JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> *}
|
||
|
||
<!-- ============== END DYNAMIC CONTENT AREA ============== -->
|
||
|
||
<!-- Separator & Manual Details -->
|
||
<div class="d-flex justify-content-center align-items-center py-2 border-bottom">
|
||
{* <div class="d-flex align-items-center">
|
||
<button id="copy-nbulink" class="d-none">{$NBULink}</button>
|
||
<a class="btn btn-sm btn-outline-secondary me-2" href="{$NBULink}" target="_blank" title="Копіювати">
|
||
Посилання НБУ <i class="material-icons">open_in_new</i>
|
||
</a>
|
||
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="copy-nbulink" title="Копіювати">
|
||
<i class="material-icons">content_copy</i>
|
||
</button>
|
||
</div> *}
|
||
<div class="d-flex align-items-center">
|
||
<button id="copy-nbulink" class="d-none">{$NBULink}</button>
|
||
<a class="btn btn-sm btn-outline-secondary me-2" href="{$NBULink}" target="_blank" title="Копіювати">
|
||
Посилання НБУ <i class="material-icons">open_in_new</i>
|
||
</a>
|
||
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="copy-nbulink" title="Копіювати">
|
||
<i class="material-icons">content_copy</i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="manual-payment-info">
|
||
<!-- The copy-pasteable details from the first variant go here unchanged -->
|
||
<div class="d-flex flex-wrap justify-content-between align-items-center py-2 border-bottom">
|
||
<span class="text-muted p-2">Отримувач:</span>
|
||
<div class="d-flex align-items-center">
|
||
<strong id="copy-receiver" class="me-2">{$reciever_name}</strong>
|
||
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="copy-receiver"
|
||
title="Копіювати">
|
||
<i class="material-icons">content_copy</i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex flex-wrap justify-content-between align-items-center py-2 border-bottom">
|
||
<span class="text-muted p-2">Код отримувача (ЄДРПОУ):</span>
|
||
<div class="d-flex align-items-center">
|
||
<strong id="copy-code" class="me-2 font-monospace">{$reciever_code}</strong>
|
||
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="copy-code" title="Копіювати">
|
||
<i class="material-icons">content_copy</i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex flex-wrap justify-content-between align-items-center py-2 border-bottom">
|
||
<span class="text-muted p-2">IBAN:</span>
|
||
<div class="d-flex align-items-center">
|
||
<strong id="copy-iban" class="me-2 font-monospace">{$iban}</strong>
|
||
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="copy-iban" title="Копіювати">
|
||
<i class="material-icons">content_copy</i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex flex-wrap justify-content-between align-items-center py-2 border-bottom">
|
||
<span class="text-muted p-2">Призначення платежу:</span>
|
||
<div class="d-flex align-items-center">
|
||
|
||
<strong id="copy-description" class="me-2">{$description}</strong>
|
||
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="copy-description"
|
||
title="Копіювати">
|
||
<i class="material-icons">content_copy</i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex flex-wrap justify-content-between align-items-center py-2">
|
||
<span class="text-muted p-2">Сума до сплати:</span>
|
||
<div class="d-flex align-items-center">
|
||
<strong id="copy-amount" class="h5 mb-0 text-primary">{$total|round:2}</strong><strong
|
||
class="h5 mb-0 me-2 text-primary"> ₴</strong>
|
||
<button class="btn btn-sm btn-outline-secondary copy-btn" data-copy-target="copy-amount" title="Копіювати">
|
||
<i class="material-icons">content_copy</i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{* --- CSS and JavaScript --- *}
|
||
<style>
|
||
{literal}
|
||
.copy-btn {
|
||
padding: 0.25rem 0.5rem;
|
||
line-height: 1;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
.copy-btn .material-icons-outlined {
|
||
font-size: 1rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.font-monospace {
|
||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
}
|
||
|
||
.bank-logo {
|
||
height: 24px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.bank-btn {
|
||
display: flex;
|
||
align-items-center;
|
||
justify-content: center;
|
||
font-size: 1.1rem;
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
{/literal}
|
||
</style>
|
||
|
||
<!-- Step 1: Pass Smarty variables to JavaScript -->
|
||
<script>
|
||
const paymentDetails = {
|
||
iban: '{$iban|escape:'javascript':'UTF-8'}',
|
||
receiverName: '{$reciever_name|escape:'javascript':'UTF-8'}',
|
||
receiverCode: '{$reciever_code|escape:'javascript':'UTF-8'}',
|
||
description: '{$description|escape:'javascript':'UTF-8'}',
|
||
amount: '{$total|round:2}'
|
||
};
|
||
</script>
|
||
|
||
<!-- Step 2: Main JavaScript logic -->
|
||
<script>
|
||
{literal}
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// The `paymentDetails` object is now available here.
|
||
|
||
// --- OS Detection ---
|
||
function getMobileOS() {
|
||
const ua = navigator.userAgent;
|
||
if (/android/i.test(ua)) { return "Android"; }
|
||
if (/iPad|iPhone|iPod/.test(ua)) { return "iOS"; }
|
||
return "Desktop";
|
||
}
|
||
const userOS = getMobileOS();
|
||
|
||
// --- Bank Configuration ---
|
||
const banks = [{
|
||
name: "Mono",
|
||
logo: `<svg class="bank-logo" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="256" cy="256" r="256" fill="black"></circle><path d="M256.001 120.477C182.285 120.477 123.719 179.043 123.719 252.759C123.719 326.475 182.285 385.041 256.001 385.041C329.717 385.041 388.283 326.475 388.283 252.759C388.283 179.043 329.717 120.477 256.001 120.477ZM281.425 291.637C281.425 311.237 266.331 326.331 246.731 326.331H214.243V179.187H246.731C266.331 179.187 281.425 194.281 281.425 213.881V291.637Z" fill="white"></path></svg>`,
|
||
packageAndroid: "com.ftband.mono",
|
||
packageIOS: "mono",
|
||
},
|
||
{
|
||
name: "Приват24",
|
||
logo: `<svg class="bank-logo" viewBox="0 0 512 512" fill="#84C634" xmlns="http://www.w3.org/2000/svg"><path d="M473.61,250.68c-12.4-58-47.3-107.1-97.5-139.7c-50.2-32.5-111-40.8-168.3-24.8c-57.3,16-105.4,55.5-135.5,110.1 C42.11,251.08,42,328.68,72.21,383.48c30.2,54.7,88.3,94.2,154.5,103.1c66.2,8.9,132.3-14.7,181.1-61.9 C456.61,429.38,485.91,308.68,473.61,250.68z M256.01,411.78c-85.8,0-155.4-69.6-155.4-155.4s69.6-155.4,155.4-155.4 s155.4,69.6,155.4,155.4C411.31,342.18,341.81,411.78,256.01,411.78z"></path><path d="M256,128.98c-70.1,0-127,56.9-127,127s56.9,127,127,127s127-56.9,127-127S326.1,128.98,256,128.98z M316.4,269.88 c-10,0-17.7-7.6-17.7-17.6v-25.2c0-9.9,7.8-17.6,17.7-17.6h25.4v60.3h-25.4V269.88z M213.3,209.58c9.9,0,17.6,7.8,17.6,17.6v50.3 c0,9.9-7.8,17.6-17.6,17.6h-37.4v-85.5h37.4V209.58z" fill="#FFF"></path></svg>`,
|
||
packageAndroid: "ua.privatbank.ap24",
|
||
packageIOS: "https://www.privat24.ua/rd/send_qr/",
|
||
},
|
||
{
|
||
name: "Пумб",
|
||
logo: `<svg class="bank-logo" viewBox="0 0 100 100" fill="#E6443A" xmlns="http://www.w3.org/2000/svg"><path d="M50 0a50 50 0 100 100A50 50 0 0050 0zm0 88a38 38 0 110-76 38 38 0 010 76z" fill="#fff"/><path d="M50 20a30 30 0 100 60 30 30 0 000-60zm-7 42h-6V38h19a12 12 0 110 24h-13z" fill="#fff"/></svg>`,
|
||
packageAndroid: "com.fuib.android.spot.online",
|
||
packageIOS: "pumb-online.app",
|
||
},
|
||
{
|
||
name: "Sense Bank",
|
||
logo: `<svg class="bank-logo" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100" fill="#262626"/><path d="M149.33 162.3L100 7.7 50.67 162.3H149.33zM100 37.9L129.8 141.7H70.2L100 37.9z" fill="#fff"/></svg>`,
|
||
packageAndroid: "ua.alfabank.mobile.android",
|
||
packageIOS: "ua.alfabank.mobile.ios",
|
||
},
|
||
{
|
||
name: "Ukrsibbank",
|
||
logo: `<svg class="bank-logo" viewBox="0 0 200 200" fill="#1C5B41" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h200v200H0z"/><path d="M100 30L30 100l70 70 70-70-70-70zm0 12l58 58-58 58-58-58 58-58z" fill="#fff"/></svg>`,
|
||
packageAndroid: "com.ukrsibbank.uso.android",
|
||
packageIOS: "com.ukrsibbank.ukrsibonline.new",
|
||
},
|
||
{
|
||
name: "Креді Агріколь",
|
||
logo: `<svg class="bank-logo" viewBox="0 0 100 100" fill="#007A33" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 50V0h10v10H10v30h30V10H20V0h20v10h10v30h30V10H60V0h20v10h10v30h10V0h10v50h-10v40H60V50H40v40H10V50H0zm90 40V50h-10v30H60v10h30zm-80 0V50H0v40h30V80H20V60h10v20H10z" fill="#fff"/></svg>`,
|
||
packageAndroid: "ua.creditagricole.mobile.app",
|
||
packageIOS: "ua.creditagricole.mobile.app",
|
||
},
|
||
{
|
||
name: "ОТП БАНК",
|
||
logo: `<svg class="bank-logo" viewBox="0 0 100 100" fill="#4CAF50" xmlns="http://www.w3.org/2000/svg"><path d="M50 0a50 50 0 100 100A50 50 0 0050 0zm0 88a38 38 0 110-76 38 38 0 010 76z" fill="#fff"/><path d="M69 31h-7l-12 24-12-24h-7l19 38 19-38z" fill="#4CAF50"/></svg>`,
|
||
packageAndroid: "ua.otpbank.android",
|
||
packageIOS: "otpbankua",
|
||
}
|
||
];
|
||
|
||
// --- Deep Link Generation ---
|
||
function constructBankUrl(bank, baseNbuLink, os) {
|
||
if (os === 'iOS') {
|
||
// Privat24 on iOS has a special redirector URL structure
|
||
if (bank.name === 'Приват24') {
|
||
return bank.packageIOS + encodeURIComponent(baseNbuLink);
|
||
}
|
||
// Standard iOS custom scheme structure
|
||
return baseNbuLink.replace("https://", bank.packageIOS + "://");
|
||
}
|
||
if (os === 'Android') {
|
||
// Standard Android Intent structure
|
||
return baseNbuLink.replace("https://", "intent://") + `#Intent;scheme=https;package=${bank.packageAndroid};end`;
|
||
}
|
||
return baseNbuLink; // Fallback for desktop
|
||
}
|
||
|
||
// --- Render UI ---
|
||
// First, construct the standard NBU payment link. This is the base for all deep links.
|
||
const nbuBaseUrl = "https://bank.gov.ua/ua/iban-qr";
|
||
const nbuParams = new URLSearchParams({
|
||
iban: paymentDetails.iban,
|
||
amount: paymentDetails.amount, // NBU uses base units, e.g., 1500.00
|
||
purpose: paymentDetails.description,
|
||
});
|
||
const nbuLink = `${nbuBaseUrl}?${nbuParams.toString()}`;
|
||
|
||
// Get containers
|
||
const mobileLinksContainer = document.getElementById('mobile-bank-links-container');
|
||
const desktopLinksContainer = document.getElementById('desktop-bank-links-container');
|
||
|
||
if (userOS === "iOS" || userOS === "Android") {
|
||
let mobileHtml = '';
|
||
banks.forEach(bank => {
|
||
const bankUrl = constructBankUrl(bank, nbuLink, userOS);
|
||
mobileHtml += `
|
||
<a href="${bankUrl}" class="btn btn-outline-primary bank-btn" role="button">
|
||
${bank.logo}
|
||
<span>${bank.name}</span>
|
||
</a>
|
||
`;
|
||
});
|
||
mobileLinksContainer.innerHTML = mobileHtml;
|
||
} else { // Desktop
|
||
let desktopHtml = '<ul class="list-group list-group-flush">';
|
||
banks.forEach(bank => {
|
||
desktopHtml += `
|
||
<li class="list-group-item d-flex align-items-center">
|
||
${bank.logo}
|
||
<span>${bank.name}</span>
|
||
</li>
|
||
`;
|
||
});
|
||
desktopHtml += '</ul>';
|
||
// desktopLinksContainer.innerHTML = desktopHtml;
|
||
}
|
||
|
||
// --- Copy-to-Clipboard functionality ---
|
||
const copyButtons = document.querySelectorAll('.copy-btn');
|
||
copyButtons.forEach(button => {
|
||
button.addEventListener('click', () => {
|
||
const targetId = button.getAttribute('data-copy-target');
|
||
const textToCopy = document.getElementById(targetId).innerText;
|
||
navigator.clipboard.writeText(textToCopy).then(() => {
|
||
const originalIcon = button.innerHTML;
|
||
button.innerHTML = '<i class="material-icons">check</i>';
|
||
button.classList.add('btn-success');
|
||
setTimeout(() => {
|
||
button.innerHTML = originalIcon;
|
||
button.classList.remove('btn-success');
|
||
}, 2000);
|
||
}).catch(err => {
|
||
console.error('Failed to copy: ', err);
|
||
});
|
||
});
|
||
});
|
||
});
|
||
{/literal}
|
||
</script> |