panariga/ibanpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve rendering

Browse Source
This commit is contained in:
O K
2025-11-15 12:29:48 +02:00
parent 1c12eac4f7
commit ff410dd79a
2 changed files with 154 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ibanpro.php
View File

@@ -277,6 +277,12 @@ class IbanPro extends PaymentModule
// 5. If 'qrencode' is not found, assign the placeholder.
$qr = $this->context->smarty->fetch($this->local_path . 'views/templates/front/emptyQR.svg');
}
if ($order->payment == $this->paymentMethodName) {
$this->context->smarty->assign([
'paymentMethodName' => 'ibanpro',
]);
}
$this->context->smarty->assign([
'reciever_name' => Configuration::get('IBANTRANSFER_RECEIVER_NAME'),
'iban' => Configuration::get('IBANTRANSFER_IBAN'),
@@ -303,10 +309,10 @@ class IbanPro extends PaymentModule
mb_convert_encoding('2', 'ASCII'),
mb_convert_encoding('UCT', 'ASCII'),
'',
mb_convert_encoding($this->reciever_name, 'windows-1251'),
mb_convert_encoding(Configuration::get('IBANTRANSFER_RECEIVER_NAME'), 'windows-1251'),
mb_convert_encoding(Configuration::get('IBANTRANSFER_IBAN'), 'ASCII'),
mb_convert_encoding($ibanSUM, 'ASCII'),
mb_convert_encoding($this->reciever_code, 'windows-1251'),
mb_convert_encoding(Configuration::get('IBANTRANSFER_RECEIVER_CODE'), 'windows-1251'),
'',
'',
mb_convert_encoding($description, 'windows-1251'),
@@ -338,6 +344,7 @@ class IbanPro extends PaymentModule
public function hookPaymentOptions($params)
{
if (!$this->active) {
return;
}

286
views/templates/front/displayOrderConfirmation.tpl
View File

@@ -1,18 +1,22 @@
<div class="order-confirmation__details card bg-light border-1 mb-3" id="wire-payment-details">
<div class="order-confirmation__details card bg-light border-1 mb-3 " id="iban-payment">
<div class="card shadow-sm">
<div class="card shadow-sm accordion-item">
<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>
<h5 class="mb-0"> <button class="btn accordion-button icon-link" type="button" data-bs-toggle="collapse"
data-bs-target="#iban-payment-details" aria-expanded="true" aria-controls="iban-payment-details">
Реквізити для оплати замовлення переказом IBAN &nbsp;&nbsp;<i class="material-icons me-2">unfold_more</i>
</button></h5>
</div>
<div class="card-body">
<div class="card-body accordion-collapse collapse {if $paymentMethodName == 'ibanpro'} show {/if}}"
id="iban-payment-details">
<!-- ============== 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">
@@ -60,7 +64,7 @@
<!-- Separator & Manual Details -->
<div class="d-flex justify-content-center align-items-center py-2 border-bottom">
{* <div class="d-flex align-items-center">
{* <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>
@@ -140,33 +144,33 @@
{* --- CSS and JavaScript --- *}
<style>
{literal}
.copy-btn {
padding: 0.25rem 0.5rem;
line-height: 1;
border: 1px solid #ccc;
}
.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;
}
.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;
}
.font-monospace {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.bank-logo {
height: 24px;
margin-right: 12px;
}
.bank-logo {
height: 24px;
margin-right: 12px;
}
.bank-btn {
display: flex;
align-items-center;
justify-content: center;
font-size: 1.1rem;
padding: 0.75rem;
}
.bank-btn {
display: flex;
align-items-center;
justify-content: center;
font-size: 1.1rem;
padding: 0.75rem;
}
{/literal}
</style>
@@ -185,139 +189,139 @@
<!-- Step 2: Main JavaScript logic -->
<script>
{literal}
document.addEventListener('DOMContentLoaded', function() {
// The `paymentDetails` object is now available here.
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",
// --- 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();
// --- 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);
// --- 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",
}
// Standard iOS custom scheme structure
return baseNbuLink.replace("https://", bank.packageIOS + "://");
];
// --- 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
}
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()}`;
// --- 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');
// 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 += `
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 += `
});
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;
}
});
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);
// --- 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>