IPS - Instant Payment Serbia

  • 10 minute(s) read
Prev Next

The IPS-RS (Instant Payment Serbia) component is a comprehensive payment solution that enables real-time payments
in Serbia. This enhanced version includes full internationalization support with 8 languages, complete CSS customization
capabilities with 100+ CSS variables, and precise responsive behavior.

Setup & Integration

Step 1: Include Monri.js Script

The ips-rs component is available as part of Monri.js. Include the script directly from monri.com for PCI
compliance:

Test Environment:


<script src="https://ipgtest.monri.com/dist/components.js"></script>

Production Environment:


<script src="https://ipg.monri.com/dist/components.js"></script>

Step 2: Backend Requirements

When generating the client_secret on your backend via the /v2/payment/new endpoint, ensure:

{
  "ch_full_name": "Customer Full Name",
  "supported_payment_methods": [
    "ips-rs"
  ],
  "amount": 100,
  "currency": "RSD"
}

Critical: If ch_full_name is missing, the client_secret will be invalid and the component will fail to
initialize.

Step 3: Initialize Monri and Components

const monri = Monri('<authenticity-token>', {
    locale: 'ba-hr' // Set default language
});
const components = monri.components({clientSecret: '<client-secret>'});

Step 4: Create Payment Form Container


<div id="ips-rs-element"></div>

Step 5: Component Creation with Enhanced Options

const ips = components.create("ips-rs", {
    trx_token: "<trx_token>",
    environment: isTestSystem ? "test" : "prod",
    lang: "ba-hr",  // Set initial language
    style: {
        // See complete styling section below
        container: {
            maxWidth: "600px",
            margin: "0 auto"
        }
        // ... additional styling options
    }
});

// Mount the component
ips.mount("ips-rs-element");

Component Dimensions & Responsive Behavior

The IPS payment component automatically adjusts its dimensions based on content and user interactions. Here are the
minimum requirements for proper integration:

Minimum Dimensions by Platform

Mobile Devices (≤768px width)

Initial State (no bank selected):

  • Minimum width: 340px
  • Minimum height: 360px

Bank Selected State:

  • Minimum width: 340px
  • Minimum height: 420px

Desktop/Web (>768px width)

All States:

  • Minimum width: 400px
  • Minimum height: 250px (dynamically adjusts based on content)

Bank Selection Logic

The component detects when a bank is selected by checking:

  1. Bank selection dropdown has value
  2. Bank logo is visible (display !== 'none')
  3. Bank logo has valid source URL

Auto-Resize Functionality

  • Component automatically sends RESIZE_IFRAME messages to parent element
  • Height adjustments happen in real-time based on content changes
  • Minimum thresholds are always maintained regardless of content

###️ Integration Requirements

Container Setup:

Ensure your iframe container can accommodate:

/* Mobile */
@media (max-width: 768px) {
    .payment-iframe {
        min-width: 340px;
        min-height: 420px; /* Allows expansion for bank selection */
    }
}

/* Desktop */
@media (min-width: 769px) {
    .payment-iframe {
        min-width: 400px;
        min-height: 250px;
    }
}

Important Notes

  • Always reserve space for expanded state (420px height on mobile)
  • Component internally handles responsive behavior
  • Minimum widths are enforced to ensure payment form usability
  • Bank selection triggers immediate height recalculation
  • Due to integration fixes, changes will be live soon - recommend adjusting code per above settings

Language Management

Dynamic Language Switching

The enhanced IPS-RS component supports real-time language switching:

// Set language during component creation
const ips = components.create("ips-rs", {
    trx_token: "<trx_token>",
    environment: "test",
    lang: "hr"  // Croatian
});

// Change language after component is mounted
ips.setLanguage("de");  // Switch to German
ips.setLanguage("en");  // Switch to English

Supported Languages

Language Code Language Region
en English International
ba-hr Bosnian-Croatian Bosnia and Herzegovina
hr Croatian Croatia
de German Germany
me Montenegrin Montenegro
sl Slovenian Slovenia
sr Serbian Serbia
sr-Cyrl Serbian (Cyrillic) Serbia
mk Macedonian North Macedonia

Translation Keys

All UI text uses these translation keys:

Key English Serbian (BA-HR)
MBANKING_INSTRUCTION "Using the mbanking application..." "Mbanking aplikacijom koju imate instaliranu..."
CLICK_AND_REFRESH "Click and refresh" "Klikni i obnovi"
REFRESH_QR_CODE "Refresh QR code" "Obnovi QR kôd"
INDIVIDUAL_PERSON "Individual" "Fizičko lice"
LEGAL_ENTITY "Legal entity or entrepreneur" "Pravno lice ili preduzetnik"
SELECT_BANK "Select bank..." "Izaberite banku..."
PAY_WITH_APP "Pay with app" "Plati aplikacijom"
ENV_NOT_SET "Environment is not set" "Okruženje nije postavljeno"
LANG_NOT_SET "Language is not set" "Jezik nije postavljen"

Complete CSS Customization Guide

CSS Custom Properties Overview

The IPS-RS component supports 100+ CSS custom properties for complete visual customization. All values can be
overridden using CSS custom properties (CSS variables).

CSS Customization Categories

1. Layout & Container Styling

:root {
    /* Main container */
    --ips-container-width: 100%;
    --ips-container-display: block;
    --ips-container-flex-direction: column;
    --ips-container-max-width: none;
    --ips-container-margin: 0;
    --ips-container-gap: 0;
    --ips-container-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Content layout */
    --ips-content-width: 100%;

    /* Desktop layout */
    --desktop-layout-display: flex;
    --desktop-layout-flex-direction: row;
    --desktop-layout-gap: 1rem;

    /* Mobile layout */
    --mobile-layout-display: flex;
    --mobile-layout-flex-direction: column;
    --mobile-layout-gap: 1rem;
    --mobile-layout-padding: 16px;
}

2. Loading State Styling

:root {
    /* Loading wrapper */
    --loading-wrapper-display: flex;
    --loading-wrapper-justify-content: center;
    --loading-wrapper-align-items: center;
    --loading-wrapper-min-height: 200px;

    /* Loading spinner */
    --loading-spinner-width: 40px;
    --loading-spinner-height: 40px;
    --loading-spinner-border-width: 4px;
    --loading-spinner-border-color: #f3f3f3;
    --loading-spinner-border-top-color: #3498db;
    --loading-spinner-border-radius: 50%;
    --loading-spinner-animation: spin 1s linear infinite;
}

3. Text & Typography Styling

:root {
    /* Instruction text */
    --instruction-text-display: block;
    --instruction-text-font-size: 14px;
    --instruction-text-line-height: 1.6;
    --instruction-text-color: #333;
    --instruction-text-text-align: left;
    --instruction-text-margin-bottom: 1rem;
    --instruction-text-font-family: inherit;

    /* Mobile instruction text specific */
    --mobile-instruction-margin-bottom: 1rem;
    --mobile-instruction-font-size: 14px;
    --mobile-instruction-color: #333;
    --mobile-instruction-display: block;
    --mobile-instruction-font-family: inherit;
}

4. Logo & Image Styling

:root {
    /* IPS logo */
    --ips-logo-width: 120px; /* Desktop: 120px, Mobile: 35vw */
    --ips-logo-max-width: 120px; /* Desktop: none, Mobile: 120px */
    --ips-logo-align-self: flex-start;
    --ips-logo-display: flex;
    --ips-logo-margin-bottom: 0;

    /* Mobile logo specific */
    --ips-logo-mobile-width: 120px;
    --ips-logo-mobile-align-self: center;

    /* Bank logo */
    --bank-logo-display: block;
    --bank-logo-width: 100%;
    --bank-logo-height: 70px;
    --bank-logo-object-fit: contain;

    /* Bank logo container */
    --bank-logo-container-margin: 0 auto 1rem;
    --bank-logo-container-width: 100%;
    --bank-logo-container-display: flex;
    --bank-logo-container-justify-content: center;
    --bank-logo-container-mobile-width: 200px;
}

5. QR Code Styling

:root {
    /* QR section */
    --qr-section-display: flex;
    --qr-section-justify-content: center;

    /* QR container */
    --qr-container-display: flex;
    --qr-container-justify-content: center;
    --qr-container-margin-bottom: 0;

    /* QR regeneration */
    --qr-regenerate-display: flex;
    --qr-regenerate-justify-content: center;
    --qr-regenerate-margin-bottom: 0;
    --qr-regenerate-cursor: pointer;

    /* QR regeneration overlay */
    --qr-regenerate-overlay-position: relative;
    --qr-regenerate-overlay-max-height: 164px;

    /* QR placeholder (164x164px - matches QR code size) */
    --qr-placeholder-display: block;
    --qr-placeholder-width: 164px;
    --qr-placeholder-height: 164px;
}

6. Button Styling

:root {
    /* Regenerate button (QR overlay) */
    --regenerate-button-position: absolute;
    --regenerate-button-z-index: 2;
    --regenerate-button-left: 0;
    --regenerate-button-top: 0;
    --regenerate-button-right: 0;
    --regenerate-button-bottom: 0;
    --regenerate-button-background: rgba(255, 255, 255, 0.85) url(https://uac-test.app.monri.com/ips-rs-images/images/refresh.svg) no-repeat center 33%;
    --regenerate-button-border: none;
    --regenerate-button-cursor: pointer;
    --regenerate-button-text-transform: uppercase;
    --regenerate-button-backdrop-filter: blur(3px);
    --regenerate-button-font-size: 1rem;
    --regenerate-button-font-weight: bold;
    --regenerate-button-color: #333;

    /* Pay button */
    --pay-button-width: 100%;
    --pay-button-margin: auto;
    --pay-button-padding: 12px 24px;
    --pay-button-max-width: 150px;
    --pay-button-background-color: #FCF5FF;
    --pay-button-color: white;
    --pay-button-border-radius: 4px;
    --pay-button-cursor: pointer;
    --pay-button-transition: background-color 0.3s;
    --pay-button-font-size: 16px;
    --pay-button-font-weight: bold;
    --pay-button-font-family: inherit, serif;

    /* Pay button disabled state */
    --pay-button-disabled-color: #ACACAC;
    --pay-button-disabled-background-color: #d8d8d8;
    --pay-button-disabled-cursor: not-allowed;

    /* Refresh button */
    --refresh-button-flex: 1;
    --refresh-button-padding: 12px 24px;
    --refresh-button-background-color: #b36cd5;
    --refresh-button-color: white;
    --refresh-button-border-color: transparent;
    --refresh-button-border-radius: 4px;
    --refresh-button-font-size: 14px;
    --refresh-button-font-weight: bold;
    --refresh-button-transition: background-color 0.3s;
    --refresh-button-font-family: inherit;
    --refresh-button-max-width: none;

    /* Refresh button hover state */
    --refresh-button-hover-background-color: #8132A7FF;
    --refresh-button-hover-color: white;
}

7. Form Elements Styling

:root {
    /* User type selection */
    --user-type-selection-margin-bottom: 1rem;
    --user-type-selection-display: flex;
    --user-type-selection-gap: 1rem;
    --user-type-selection-flex-wrap: wrap;

    /* Mobile user type selection */
    --user-type-selection-mobile-flex-direction: column;
    --user-type-selection-mobile-gap: 0.5rem;

    /* Radio labels */
    --radio-label-display: inline-flex;
    --radio-label-align-items: center;
    --radio-label-cursor: pointer;
    --radio-label-font-size: 14px;
    --radio-label-margin-right: 0;
    --radio-label-font-family: inherit;
    --radio-label-color: inherit;

    /* Radio inputs */
    --radio-input-scale: 1.2;
    --radio-input-margin: 0 0.5rem 0 0;
    --radio-input-padding: 0;

    /* Bank selection dropdown */
    --bank-select-width: 100%;
    --bank-select-margin-bottom: 1rem;
    --bank-select-padding: 12px;
    --bank-select-border-width: 1px;
    --bank-select-border-color: #ddd;
    --bank-select-border-radius: 4px;
    --bank-select-background-color: white;
    --bank-select-color: inherit;
    --bank-select-font-weight: normal;
    --bank-select-cursor: pointer;
    --bank-select-font-family: inherit;

    /* Bank select focus state */
    --bank-select-focus-outline: none;
    --bank-select-focus-border-color: #007bff;
    --bank-select-focus-box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

8. Timer & Actions Styling

:root {
    /* Timer */
    --timer-opacity: 0;
    --timer-text-align: center;
    --timer-font-size: 16px;
    --timer-font-weight: bold;
    --timer-color: #666;
    --timer-margin-top: 0;
    --timer-font-family: inherit;

    /* Actions container */
    --actions-display: flex;
    --actions-gap: 1rem;
    --actions-opacity: 0;

    /* Visible class */
    --visible-opacity: 1;
}

9. Layout Containers Styling

:root {
    /* Left content (desktop) */
    --left-content-flex: 1;
    --left-content-display: flex;
    --left-content-flex-direction: column;
    --left-content-gap: 1rem;
    --left-content-max-width: 300px;

    /* Right container (desktop) */
    --right-container-flex-shrink: 0;
    --right-container-display: flex;
    --right-container-flex-direction: column;
    --right-container-align-items: center;
    --right-container-gap: 0.5rem;

    /* Header (mobile) */
    --header-display: flex;
    --header-gap: 1rem;
    --header-margin-bottom: 1rem;
    --header-justify-content: space-between;
    --header-align-items: center;

    /* Mobile header specific */
    --header-mobile-flex-direction: column;
    --header-mobile-gap: 0.5rem;

    /* Mobile section */
    --mobile-section-display: block;
    --mobile-section-margin-bottom: 1rem;
}

10. Error State Styling

:root {
    /* Error messages */
    --error-padding: 16px;
    --error-background-color: #f8d7da;
    --error-color: #721c24;
    --error-border-width: 1px;
    --error-border-color: #f5c6cb;
    --error-border-radius: 4px;
    --error-margin-bottom: 1rem;
    --error-font-family: inherit;
    --error-font-size: inherit;
}

11. Responsive Breakpoint

:root {
    /* Mobile breakpoint */
    --mobile-breakpoint: 768px;
}

Style Configuration Object

Instead of using CSS variables, you can also pass styles directly to the component:

const ips = components.create("ips-rs", {
    trx_token: "<trx_token>",
    environment: "test",
    style: {
        // Use any of these keys for direct styling
        container: { /* CSS properties */},
        loadingWrapper: { /* CSS properties */},
        loadingSpinner: { /* CSS properties */},
        ipsContent: { /* CSS properties */},
        desktopLayout: { /* CSS properties */},
        leftContent: { /* CSS properties */},
        rightContainer: { /* CSS properties */},
        mobileLayout: { /* CSS properties */},
        header: { /* CSS properties */},
        text: { /* CSS properties */},
        logo: { /* CSS properties */},
        qrSection: { /* CSS properties */},
        qrCodeContainer: { /* CSS properties */},
        qrRegenerate: { /* CSS properties */},
        qrRegenerateOverlay: { /* CSS properties */},
        regenerateButton: { /* CSS properties */},
        qrPlaceholder: { /* CSS properties */},
        timer: { /* CSS properties */},
        ifMobile: { /* CSS properties */},
        mobileLabel: { /* CSS properties */},
        userTypeSelection: { /* CSS properties */},
        radioLabel: { /* CSS properties */},
        radioInput: { /* CSS properties */},
        bankSelect: { /* CSS properties */},
        bankLogoContainer: { /* CSS properties */},
        bankLogo: { /* CSS properties */},
        generateQRButton: { /* CSS properties */},
        payButton: { /* CSS properties */},
        actions: { /* CSS properties */},
        error: { /* CSS properties */}
    }
});

Advanced Styling Examples

Example 1: Modern Theme

:root {
    /* Modern color palette */
    --ips-container-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --ips-container-border-radius: 20px;
    --ips-container-padding: 30px;
    --ips-container-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

    /* Modern typography */
    --instruction-text-color: white;
    --instruction-text-font-family: 'Inter', 'Segoe UI', sans-serif;
    --instruction-text-font-size: 16px;
    --instruction-text-line-height: 1.7;

    /* Modern buttons */
    --pay-button-background-color: #4facfe;
    --pay-button-border-radius: 25px;
    --pay-button-padding: 15px 40px;
    --pay-button-font-size: 18px;
    --pay-button-box-shadow: 0 10px 30px rgba(79, 172, 254, 0.3);
    --pay-button-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Modern forms */
    --bank-select-background-color: rgba(255, 255, 255, 0.1);
    --bank-select-border: 2px solid rgba(255, 255, 255, 0.2);
    --bank-select-border-radius: 12px;
    --bank-select-color: white;
    --bank-select-backdrop-filter: blur(10px);

    /* Modern QR container */
    --qr-container-background: rgba(255, 255, 255, 0.95);
    --qr-container-border-radius: 15px;
    --qr-container-padding: 25px;
    --qr-container-backdrop-filter: blur(10px);
}

Example 2: Corporate Theme

:root {
    /* Corporate colors */
    --ips-container-background-color: #ffffff;
    --ips-container-border: 2px solid #e1e5e9;
    --ips-container-border-radius: 8px;

    /* Corporate typography */
    --instruction-text-color: #2c3e50;
    --instruction-text-font-family: 'Roboto', 'Arial', sans-serif;
    --instruction-text-font-size: 15px;
    --instruction-text-line-height: 1.6;

    /* Corporate buttons */
    --pay-button-background-color: #3498db;
    --pay-button-border-radius: 6px;
    --pay-button-font-weight: 600;
    --pay-button-text-transform: uppercase;
    --pay-button-letter-spacing: 0.5px;

    /* Corporate forms */
    --bank-select-border: 1px solid #bdc3c7;
    --bank-select-border-radius: 4px;
    --bank-select-padding: 12px 16px;
    --bank-select-font-size: 14px;

    /* Corporate spacing */
    --mobile-layout-padding: 24px;
    --desktop-layout-gap: 2rem;
    --user-type-selection-gap: 1.5rem;
}

Example 3: Dark Theme

:root {
    /* Dark theme colors */
    --ips-container-background-color: #2c3e50;
    --ips-container-color: #ecf0f1;

    /* Dark typography */
    --instruction-text-color: #ecf0f1;
    --mobile-instruction-color: #bdc3c7;
    --radio-label-color: #ecf0f1;

    /* Dark buttons */
    --pay-button-background-color: #e74c3c;
    --pay-button-color: #ffffff;
    --refresh-button-background-color: #f39c12;

    /* Dark forms */
    --bank-select-background-color: #34495e;
    --bank-select-color: #ecf0f1;
    --bank-select-border-color: #4a5f7a;

    /* Dark QR container */
    --qr-container-background: rgba(52, 73, 94, 0.8);
    --qr-container-border: 1px solid #4a5f7a;

    /* Dark error states */
    --error-background-color: #c0392b;
    --error-color: #ecf0f1;
    --error-border-color: #a93226;
}

Event Handling

Component Events

// Listen for component events
ips.on('change', (event) => {
    console.log('Component state changed:', event);
});

ips.on('ready', () => {
    console.log('Component is ready');
});

// Listen for iframe resize events
window.addEventListener('message', (event) => {
    if (event.data.type === 'RESIZE_IFRAME') {
        console.log('Component height changed to:', event.data.data.minHeight);
        // Optional: Handle resize if needed
    }
});

// Listen for payment completion
window.addEventListener('message', (event) => {
    if (event.data.type === 'PAYMENT_RESULT') {
        const {transaction} = event.data;
        if (transaction.status === 'approved') {
            console.log('Payment successful:', transaction);
        } else {
            console.log('Payment failed:', transaction);
        }
    }
});

Integration Examples

Example 1: Basic Integration with Responsive Styling

<!DOCTYPE html>
<html>
<head>
    <title>IPS-RS Integration</title>
    <script src="https://ipgtest.monri.com/dist/components.js"></script>
    <style>
        /* Required iframe container styling */
        .payment-container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Mobile */
        @media (max-width: 768px) {
            .payment-iframe {
                min-width: 340px;
                min-height: 240px;
                max-height: 380px
                width: 100%;
                border: none;
            }
        }

        /* Desktop */
        @media (min-width: 769px) {
            .payment-iframe {
                min-width: 400px;
                min-height: 260px;
                width: 100%;
                border: none;
            }
        }

        /* Custom IPS styling */
        :root {
            --ips-container-max-width: 600px;
            --ips-container-margin: 0 auto;
            --ips-container-padding: 20px;
            --pay-button-background-color: #007bff;
            --instruction-text-font-size: 16px;
        }
    </style>
</head>
<body>
<div class="payment-container">
    <h2>Complete Your Payment</h2>
    <div id="ips-rs-element"></div>

    <!-- Language switcher -->
    <div class="language-switcher">
        <button onclick="changeLanguage('ba-hr')">Bosanski/Hrvatski</button>
        <button onclick="changeLanguage('sr')">Српски</button>
        <button onclick="changeLanguage('en')">English</button>
    </div>
</div>

<script>
    let ipsComponent;

    // Initialize component
    function initializeIPS() {
        const monri = window.Monri('your-authenticity-token', {
            locale: 'ba-hr'
        });

        const components = monri.components({
            clientSecret: 'your-client-secret'
        });

        ipsComponent = components.create('ips-rs', {
            trx_token: 'your-transaction-token',
            environment: 'test',
            lang: 'ba-hr'
        });

        ipsComponent.mount('ips-rs-element');
    }

    // Language switching function
    function changeLanguage(langCode) {
        if (ipsComponent) {
            ipsComponent.setLanguage(langCode);
        }
    }

    // Handle resize events
    window.addEventListener('message', (event) => {
        if (event.data.type === 'RESIZE_IFRAME') {
            console.log('Component resized to:', event.data.data.minHeight);
        }
    });

    // Initialize when page loads
    document.addEventListener('DOMContentLoaded', initializeIPS);
</script>
</body>
</html>
Related articles
  • Components
    Manuals > Monri Online (IPG) > WebPay > Integrations > Components
  • PayCek
    Manuals > Monri Online (IPG) > WebPay > Integrations > Components > Payment Methods via Components
  • Keks Pay
    Manuals > Monri Online (IPG) > WebPay > Integrations > Components > Payment Methods via Components