Skip to content

Enhancing the payment QR template email and frontend UI experience #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vpseuro wants to merge 6 commits into
base: master
Choose a base branch
from
+190 −238
Open

Enhancing the payment QR template email and frontend UI experience #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
077a733
Revise payment slip template for stacked QR code
vpseuro Mar 27, 2026
a7d05f0
Enhance responsive design for payment slip template
vpseuro Mar 27, 2026
c8a00ff
Update documentation comments in payment-slip-qr-code.php
vpseuro Mar 27, 2026
c467e2d
Clean up comments in payment-slip-qr-code.php Signed-off-by: vpseuro …
vpseuro Mar 27, 2026
57d2209
Clean up comments in payment-slip-qr-code.php Signed-off-by: vpseuro …
vpseuro Mar 27, 2026
8c885d3
Update company-settings.php
vpseuro Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions config/company-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,25 @@
'desc_tip' => true,
),

array(
'title' => \__( 'Business Number', 'serbian-addons-for-woocommerce' ),
'desc' => \__( 'Registration business number', 'serbian-addons-for-woocommerce' ),
'id' => 'woocommerce_business_number',
'default' => '',
'type' => 'text',
'desc_tip' => true,
),


array(
'title' => \__( 'PIB Number', 'serbian-addons-for-woocommerce' ),
'desc' => \__( 'PIB business number', 'serbian-addons-for-woocommerce' ),
'id' => 'woocommerce_pib_business_number',
'default' => '',
'type' => 'text',
'desc_tip' => true,
),

array(
'title' => \__( 'Address line 1', 'woocommerce' ),
'desc' => \__( 'The street address for your business location.', 'woocommerce' ),
Expand Down
112 changes: 61 additions & 51 deletions woocommerce/checkout/payment-slip-qr-code.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,75 @@
<?php //phpcs:disable SlevomatCodingStandard.Functions.RequireMultiLineCall.RequiredMultiLineCall
<?php
/**
* Payment Slip template
* Stacked QR Code Payment Slip Template (Web + Email)
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/payment-slip-qr-code.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package Serbian Addons for WooCommerce
* @subpackage Templates
* @version 2.3.0
*
* @version 2.8.0
* @var string $alt QR Code image alt.
* @var string $src QR Code image.
*/

defined( 'ABSPATH' ) || exit;
?>

<section class="woocommerce-order-ips-qr-code">
<?php if ( '' !== $src ) : ?>
<h2><?php esc_html_e( 'Instant payment', 'serbian-addons-for-woocommerce' ); ?></h2>
<table class="qr-code">
<tbody>
<tr>
<td class="qr-code-wrap">
<div class="qr-code-holder">
<img src="<?php echo esc_attr( $src ); ?>" alt="<?php echo esc_attr( $alt ); ?>">
</div>
</td>
<td class="qr-code-desc">
<p>
<?php esc_html_e( 'The NBS IPS QR code is an innovative way to perform instant payments using mobile devices.', 'serbian-addons-for-woocommerce' ); ?>
</p>
<p>
<?php esc_html_e( ' Security is guaranteed by the standards of the National Bank of Serbia.', 'serbian-addons-for-woocommerce' ); ?>
</p>
<h3>
<?php esc_html_e( 'How to pay', 'serbian-addons-for-woocommerce' ); ?>
</h3>
<ol>
<li>
<?php esc_html_e( 'Select IPS SCAN in the m-banking app', 'serbian-addons-for-woocommerce' ); ?>
</li>
<li>
<?php esc_html_e( 'Scan the QR code', 'serbian-addons-for-woocommerce' ); ?>
</li>
<li>
<?php esc_html_e( 'Confirm with your PIN or fingerprint', 'serbian-addons-for-woocommerce' ); ?>
</li>
<li>
<?php esc_html_e( 'Payment is complete', 'serbian-addons-for-woocommerce' ); ?>
</li>
</ol>
</td>
</tr>
</tbody>
<section class="woocommerce-order-ips-qr-code" style="font-family: Arial, sans-serif; max-width:600px; margin:auto; padding:10px;">
<h2 style="text-align:center; font-size:18px; margin-bottom:15px;">
<?php esc_html_e( 'Instant payment', 'serbian-addons-for-woocommerce' ); ?>
</h2>

<!-- Outer table for stacking -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; table-layout:fixed;">

<!-- Description header -->
<tr>
<td style="background-color:#f0f0f0; padding:8px; font-weight:bold;">
<?php esc_html_e( 'Description', 'serbian-addons-for-woocommerce' ); ?>
</td>
</tr>

<!-- Description content -->
<tr>
<td style="padding:8px;">
<p style="margin:5px 0;"><?php esc_html_e( 'The NBS IPS QR code is an innovative way to perform instant payments using mobile devices.', 'serbian-addons-for-woocommerce' ); ?></p>
<p style="margin:5px 0;"><?php esc_html_e( 'Security is guaranteed by the standards of the National Bank of Serbia.', 'serbian-addons-for-woocommerce' ); ?></p>
</td>
</tr>

<!-- QR Code image -->
<tr>
<td style="text-align:center; padding:10px;">
<img src="<?php echo esc_attr( $src ); ?>" alt="<?php echo esc_attr( $alt ); ?>" style="width:150px; max-width:100%; height:auto; display:block; margin:auto;">
</td>
</tr>

<!-- How to pay header -->
<tr>
<td style="background-color:#f0f0f0; padding:8px; font-weight:bold;">
<?php esc_html_e( 'How to pay', 'serbian-addons-for-woocommerce' ); ?>
</td>
</tr>

<!-- How to pay instructions -->
<tr>
<td style="padding:8px;">
<ol style="margin:5px 0; padding-left:20px;">
<li><?php esc_html_e( 'Select IPS SCAN in the m-banking app', 'serbian-addons-for-woocommerce' ); ?></li>
<li><?php esc_html_e( 'Scan the QR code', 'serbian-addons-for-woocommerce' ); ?></li>
<li><?php esc_html_e( 'Confirm with your PIN or fingerprint', 'serbian-addons-for-woocommerce' ); ?></li>
<li><?php esc_html_e( 'Payment is complete', 'serbian-addons-for-woocommerce' ); ?></li>
</ol>
</td>
</tr>
</table>
<?php endif; ?>

<!-- Print-friendly styles -->
<style>
@media print {
body * { visibility: hidden; }
.woocommerce-order-ips-qr-code, .woocommerce-order-ips-qr-code * { visibility: visible; }
.woocommerce-order-ips-qr-code { position:absolute; top:0; left:0; width:100%; }
}
</style>
</section>
<?php endif; ?>
Loading