WP Manifestindependent plugin directory
manifest / builders / renters-rent-calculator

Renters Calculator Widget

A custom Elementor widget for a responsive rent payment calculator with style controls and configurable CTA URL.

by Md Waseel · github.com/mdwaseel/renters-rent-calculator

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/mdwaseel/renters-rent-calculator/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/mdwaseel/renters-rent-calculator ↗

Renters Calculator Widget for Elementor

A professional, fully-featured WordPress plugin that adds a customizable rent payment calculator widget to Elementor. Calculate monthly payments with support for multiple banks, interest rates, and installment plan fees.

📋 Features

  • 🏦 Multi-Bank Support - Pre-configured with 15+ UAE banks (ADCB, FAB, ENBD, HSBC, DIB, and more)
  • 💰 Accurate Interest Calculations - Monthly recurring interest like traditional loans
  • 📊 Payment Schedule - Detailed breakdown showing principal and interest per month
  • 🎨 Fully Customizable - Control colors, styles, and CTA URLs through Elementor
  • 📱 Responsive Design - Mobile-first design that looks great on all devices
  • ♿ Accessible - ARIA labels and semantic HTML for screen readers
  • ⚡ Lightweight - No external dependencies, pure vanilla JavaScript
  • 🔒 Secure - Follows WordPress and Elementor best practices

🎯 Use Cases

Perfect for:

  • Real estate websites
  • Property rental platforms
  • Financial service providers
  • Tenant payment processing companies
  • Property management firms

📸 Screenshots

Calculator Interface

The widget displays a clean, professional interface with bank selection, amount input, tenure options, and instant calculations.

Payment Schedule

Expandable payment schedule shows month-by-month breakdown of principal and interest payments.

Elementor Integration

Seamlessly integrates with Elementor's editor with full style controls.

🚀 Installation

Method 1: Upload via WordPress Admin

  1. Download the renters-calculator-widget.php file
  2. Go to WordPress Admin → Plugins → Add New → Upload Plugin
  3. Choose the file and click "Install Now"
  4. Activate the plugin
  5. Add the widget through Elementor editor

Method 2: Manual Installation

  1. Download the plugin file
  2. Upload to /wp-content/plugins/renters-calculator/ directory
  3. Activate through the WordPress Plugins menu
  4. Add the widget through Elementor editor

Method 3: GitHub Installation

cd wp-content/plugins/
git clone [https://github.com/Mdwaseel/Renters-Rent-Calculator](https://github.com/Mdwaseel/Renters-Rent-Calculator.git)

Then activate through WordPress admin.

📦 Requirements

  • WordPress: 5.0 or higher
  • PHP: 7.0 or higher
  • Elementor: 3.0 or higher (Free or Pro)

🎨 Usage

Adding the Widget

  1. Edit any page with Elementor
  2. Search for "Renters Calculator" in the widget panel
  3. Drag and drop onto your page
  4. Customize settings in the left panel

Customization Options

Style Controls

  • Widget Background - Main container background color
  • Card Background - Calculator card background
  • Text Color - Primary text color
  • Muted Text - Secondary text color
  • Primary Color - Buttons and highlights
  • Primary Hover - Button hover state
  • Border Color - Card and input borders

Content Controls

  • CTA Button URL - Customize where "Start Your Rent Plan" button redirects
    • Query parameters automatically appended: amount, tenure, bank, method
    • Example: https://yoursite.com/pay?amount=10000&tenure=6&bank=ADCB&method=epp

Supported Banks

The widget includes the following UAE banks with their respective fee structures:

Bank Min Amount Interest Rates Processing Fees
ADCB AED 500 0.7% - 0.65% -
Ajman Bank AED 1,000 1.5% - 0.99% -
Al Hilal AED 1,000 0.33% - 0.25% -
Arab Bank UAE AED 1,000 0.5% AED 49
CBD AED 1,000 0% 1.5% - 3%
CBI AED 500 1% AED 35
Deem Finance AED 1,000 0% 1% - 3%
Dubai Islamic AED 1,000 0% 3% - 4.8%
Emirates Islamic AED 500 0% 2%
ENBD AED 750 2.51% - 2.54% AED 49
FAB AED 500 1.2% - 1.1% -
HSBC AED 500 0.99% - 0.69% -
RAK AED 1,000 0% AED 149 - 199
SCB AED 500 0% AED 49 - 98

💡 How It Works

Interest Calculation

The calculator uses a monthly recurring interest model similar to car or home loans:

Monthly Interest = Principal × Monthly Rate × Number of Months
Total Amount = Principal + Total Interest + Processing Fees
Monthly Payment = Total Amount ÷ Number of Months

Example:

  • Principal: AED 10,000
  • Bank: ADCB
  • Tenure: 6 months
  • Interest Rate: 0.7% per month

Calculation:

  • Total Interest: 10,000 × 0.007 × 6 = AED 420
  • Total Amount: 10,000 + 420 = AED 10,420
  • Monthly Payment: 10,420 ÷ 6 = AED 1,736.67
    • Principal per month: AED 1,666.67
    • Interest per month: AED 70.00

Processing Fees

Processing fees are one-time charges applied at the start:

  • Can be percentage-based (e.g., 2% of principal)
  • Can be fixed amount (e.g., AED 49)
  • Added to total amount and distributed across monthly payments

🔧 Customization

Modifying Bank Data

Bank data is stored in JSON format within the widget. To add or modify banks:

  1. Locate the `