ipay-buttons

Beautiful, framework-agnostic Web Components library for launching iPay flows from any site or app. Features 18 different button variants with consistent styling and hover effects, including an interactive calculator component, cart checkout component, and informational panel components.

Installation

npm install ipay-buttons
# or
yarn add ipay-buttons

Features

• 18 Button Variants: Multiple button designs for different use cases
• Cart Checkout Component: Handles multiple cart items (1-100) with customer info and delivery details
• Interactive Calculator: Full-featured calculator with client type selection, monthly rate slider, and dynamic calculations
• Web Components: Works in React, Vue, Angular, Svelte, and vanilla JS
• Zero dependencies and lightweight
• TypeScript-ready via standard DOM custom element typing
• Consistent API: Pass url, price, name, email, id to any button
• Modern Design: Dark blue theme with smooth hover effects and shadows
• Responsive: Adapts to content and maintains consistent styling

Button Components

Interactive Components

ipay-calculator

Interactive calculator component with:

• Client Type Tabs: Switch between "Klient indywidualny" (Individual client) and "Klient firmowy" (Business client)
• Monthly Rate Slider: Adjustable slider from 6 to 60 months with real-time rate calculation
• Dynamic Rate Display: Shows calculated monthly rate based on price and selected months (includes 2% interest)
• iRaty Button: Clickable button with checkmark icon and "Przejdź dalej" (Proceed) text
• Installment Badge: Displays current number of installments (e.g., "10 rat 0%")

The calculator automatically calculates monthly rates as (price × 1.02) / months and updates in real-time as the slider moves.

Standard Buttons

ipay-button

Main button with "dla osób i firm" text and iPay logo.

ipay-button-personal

Personal button with "dla osób" text.

ipay-button-leasing

Leasing button with "dla firm + leasing" text.

ipay-button-basic

Basic button with logo aligned to bottom.

ipay-button-rates

Standard rates button.

Specialized Buttons

ipay-button-leasing-rates

Two-part button with main section and "Rata od" component showing calculated rates.

ipay-button-leasing-small

Compact button: 60px tall × 220px wide.

ipay-button-leasing-small-wide

Small wide variant of the leasing button.

ipay-button-leasing-wrapped

Wrapped version of the leasing button.

ipay-button-double

Two-button stacked design with shadow hover effects.

Modal & Bubble Buttons

ipay-bubble

Horizontal button with "Kup na raty" text and arrow icon.

ipay-modal-side-short

Vertical button with dark blue top section and 180° rotated text.

ipay-modal-side

Side modal button variant.

ipay-modal-side-dark

Dark themed side modal button.

Cart Components

ipay-button-cart

Cart checkout button that handles multiple items (1-100) with customer information and delivery details. Each cart item requires url, price, and count. Supports optional product_id per item.

Features:

• Handles 1-100 cart items via JSON attribute
• Sends standard customer info (id, name, email, phone, delivery_price, product_id)
• Each cart item includes: url, price, count (and optional product_id per item)
• Error handling for invalid JSON
• Consistent styling with other iPay buttons

Informational Panel Components

ipay-modal-info

Informational panel component with header, main CTA button, step indicators, and footer. Perfect for displaying financing information and process steps.

Features:

• Header section with main title and subheader
• Main CTA button with green dot and chevron icon
• Three-step process indicators (Wniosek online, Zatwierdź umowę, Odbierz usługę lub towar)
• Footer with "Dowiedz się więcej" link and iPay logo
• Routes to individual application URL
• Uses Figma-designed icons for step indicators

ipay-modal-info-leasing

Leasing variant of the informational panel with different subheader text and footer layout.

Features:

• Same structure as ipay-modal-info but optimized for leasing
• Subheader: "Dostępne raty dla osób oraz raty i leasing dla firm"
• Footer layout with vertically stacked CTA and logo
• Routes to company application URL
• Uses same Figma-designed icons

Quick Start (Vanilla HTML/JS)

Important: You must provide id (partner ID), price, count, and product_id attributes for the buttons to work correctly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Use the UMD build directly in the browser -->
  <script src="./dist/index.umd.js"></script>
</head>
<body>
  <!-- Main button -->
  <ipay-button 
    id="PARTNER-12345"
    price="299.99"
    count="1"
    product_id="PROD-67890"
    name="John Doe"
    email="[email protected]"
    url="https:/example.com/product">
  </ipay-button>

  <!-- Interactive calculator with slider and rate display -->
  <ipay-calculator 
    id="PARTNER-12345"
    price="4604.40"
    count="1"
    product_id="PROD-67890"
    name="John Doe"
    email="[email protected]"
    url="https://example.com/product"
    tax="0"
    delivery_price="10.00">
  </ipay-calculator>

  <!-- Calculator with tax (2% interest) -->
  <ipay-calculator 
    id="PARTNER-12345"
    price="4604.40"
    count="1"
    product_id="PROD-67890"
    tax="2"
    name="Jane Doe"
    email="[email protected]">
  </ipay-calculator>

  <!-- Leasing rates button with dynamic rate calculation -->
  <ipay-button-leasing-rates 
    id="order-124"
    price="1200.00">
  </ipay-button-leasing-rates>

  <!-- Compact button -->
  <ipay-button-leasing-small 
    id="order-125"
    price="799.99">
  </ipay-button-leasing-small>

  <!-- Bubble button with arrow -->
  <ipay-bubble 
    id="order-126"
    price="149.99">
  </ipay-bubble>

  <!-- Cart button with multiple items -->
  <ipay-button-cart 
    id="PARTNER-12345"
    name="John Doe"
    email="[email protected]"
    phone="+48123456789"
    delivery_price="15.99"
    product_id="MAIN-PRODUCT-001"
    cart-items='[
      {"url": "https://example.com/product/1", "price": "299.99", "count": "2", "product_id": "PROD-001"},
      {"url": "https://example.com/product/2", "price": "149.99", "count": "1", "product_id": "PROD-002"}
    ]'>
  </ipay-button-cart>

  <!-- Informational panel for individuals -->
  <ipay-modal-info 
    id="PARTNER-12345"
    price="5000.00"
    name="John Doe"
    email="[email protected]"
    url="https://example.com/product">
  </ipay-modal-info>

  <!-- Informational panel for leasing/companies -->
  <ipay-modal-info-leasing 
    id="PARTNER-12345"
    price="5000.00"
    name="John Doe"
    email="[email protected]"
    url="https://example.com/product">
  </ipay-modal-info-leasing>
</body>
</html>

When clicked, any button will navigate to iPay website with the provided attributes encoded as query parameters.

Example navigation:

http://185.25.151.171:8411/new-individual-application?id=order-123&price=299.99&name=John%20Doe&email=john%40example.com

React Usage

The package registers custom elements. In React you can use them directly:

import 'ipay-buttons';

export default function App() {
  return (
    <div>
      {/* Main button */}
      <ipay-button 
        id="order-123"
        price="299.99"
        name="John Doe"
        email="[email protected]"
        url="https://example.com/product"
      />

      {/* Interactive calculator without tax */}
      <ipay-calculator 
        id="PARTNER-12345"
        price="4604.40"
        count="1"
        product_id="PROD-67890"
        name="John Doe"
        email="[email protected]"
        url="https://example.com/product"
        tax="0"
        delivery_price="10.00"
      />

      {/* Interactive calculator with 2% tax */}
      <ipay-calculator 
        id="PARTNER-12345"
        price="4604.40"
        count="1"
        product_id="PROD-67890"
        tax="2"
        name="Jane Doe"
        email="[email protected]"
      />

      {/* Leasing rates button */}
      <ipay-button-leasing-rates 
        id="order-124"
        price="1200.00"
      />

      {/* Double button */}
      <ipay-button-double 
        id="order-125"
        price="999.99"
      />

      {/* Cart button with multiple items */}
      <ipay-button-cart 
        id="PARTNER-12345"
        name="John Doe"
        email="[email protected]"
        phone="+48123456789"
        delivery_price="15.99"
        cart-items={JSON.stringify([
          { url: 'https://example.com/product/1', price: '299.99', count: '2' },
          { url: 'https://example.com/product/2', price: '149.99', count: '1' }
        ])}
      />

      {/* Informational panel for individuals */}
      <ipay-modal-info 
        id="PARTNER-12345"
        price="5000.00"
        name="John Doe"
        email="[email protected]"
        url="https://example.com/product"
      />

      {/* Informational panel for leasing/companies */}
      <ipay-modal-info-leasing 
        id="PARTNER-12345"
        price="5000.00"
        name="John Doe"
        email="[email protected]"
        url="https://example.com/product"
      />
    </div>
  );
}

If you prefer typed wrapper components:

import 'ipay-buttons';
import React from 'react';

type IpayButtonProps = {
  id?: string;
  price?: string | number;
  name?: string;
  email?: string;
  phone?: string;
  url?: string;
  count?: string | number;
};

export function IpayButton(props: IpayButtonProps) {
  const { id, price, name, email, phone, url, count } = props;
  return (
    <ipay-button
      id={id}
      price={price as any}
      name={name}
      email={email}
      phone={phone}
      url={url}
      count={count as any}
    />
  );
}

export function IpayButtonLeasingRates(props: IpayButtonProps) {
  const { id, price, name, email, phone, url, count } = props;
  return (
    <ipay-button-leasing-rates
      id={id}
      price={price as any}
      name={name}
      email={email}
      phone={phone}
      url={url}
      count={count as any}
    />
  );
}

export function IpayBubble(props: IpayButtonProps) {
  const { id, price, name, email, phone, url, count } = props;
  return (
    <ipay-bubble
      id={id}
      price={price as any}
      name={name}
      email={email}
      phone={phone}
      url={url}
      count={count as any}
    />
  );
}

Vue / Angular / Svelte

Import the package once (e.g., in your app entry) and use any of the button tags in templates. For Angular, ensure CUSTOM_ELEMENTS_SCHEMA is added.

// Angular example
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import 'ipay-buttons';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

<!-- Vue 3 example -->
<template>
  <div>
    <ipay-button id="order-1" price="99.00" url="https://example.com/pay" />
    <ipay-button-leasing-rates id="order-2" price="1200.00" />
    <ipay-bubble id="order-3" price="299.99" />
  </div>
</template>

<script setup>
import 'ipay-buttons';
</script>

<!-- Svelte example -->
<script>
  import 'ipay-buttons';
</script>

<div>
  <ipay-button id="order-1" price="149.00" url="https://example.com/product" />
  <ipay-button-double id="order-2" price="799.99" />
  <ipay-modal-side-short id="order-3" price="199.99" />
</div>

Props / Attributes

| Attribute | Type | Default | Description | |----------|-----------------|----------------------------------------------------|-------------------------------------| | id | string | undefined | Partner ID number (obtained from partner panel or through iPay) | | price | string/number | undefined | Price amount (required) | | name | string | undefined | Payer name | | email | string | undefined | Payer email | | phone | string | undefined | Payer phone number | | url | string | undefined | Product URL | | count | string/number | undefined | Product quantity (required) | | tax | string/number | 0 | Tax/interest rate percentage (e.g., "2" for 2%). Only used by ipay-calculator | | delivery_price | string/number | undefined | Delivery/shipping price | | product_id | string | undefined | Product identifier (required) | | cart-items | string (JSON) | undefined | JSON string with array of cart items - only for ipay-button-cart. Each item must have: url, price, count (optional: product_id) |

Required Attributes:

• id: Partner ID number (obtained from partner panel or through iPay) - Required
• price: Product price amount - Required
• count: Product quantity - Required
• product_id: Product identifier - Required

Behavior:

• On click, any component builds ?id=...&price=...&count=...&product_id=...&name=...&email=...&phone=...&delivery_price=... and navigates to url in the same tab.
• Only attributes present on the element are included in the query string.
• The price attribute is used by ipay-button-leasing-rates to calculate and display dynamic rates.
• The ipay-calculator component includes months and client_type parameters in the query string when clicked.
• The tax attribute is only used by ipay-calculator for monthly rate calculations (defaults to 0% if not provided).

Special Features:

Interactive Calculator (ipay-calculator)

• Client Type Selection: Toggle between individual and business client types
• Monthly Rate Calculation:
  • If tax is 0 or not provided: monthlyRate = price / months
  • If tax is provided: monthlyRate = (price × (1 + tax/100)) / months (bank-style calculation)
• Tax Prop: Accepts tax/interest rate as percentage (e.g., tax="2" for 2%). Defaults to 0% if not provided
• Slider Range: Adjustable from 6 to 60 months with real-time updates
• Dynamic Badge: Shows current installment count (e.g., "10 rat 0%") - only visible when tax is 0%
• Currency Formatting: Uses Polish locale (pl-PL) for proper number formatting
• Real-time Updates: Monthly rate, badge, and slider tooltip update as user adjusts the slider
• URL Routing: Navigates to different URLs based on client type:
  • Individual: /new-individual-application
  • Business: /new-company-application

Rate Calculation (ipay-button-leasing-rates)

• Automatically calculates rate as price / 10
• Displays "Rata od X zł" where X is the calculated rate
• Falls back to "Rata od 12,00 zł" if no price is provided

Cart Checkout (ipay-button-cart)

• Accepts multiple cart items (1-100) via JSON attribute
• Each cart item requires: url, price, count
• Optional product_id per item
• Sends data as: items[0][url], items[0][price], items[0][count], etc.
• Includes items_count parameter with total number of items
• Validates JSON and logs warnings/errors if invalid

Informational Panels (ipay-modal-info, ipay-modal-info-leasing)

• Display financing information with step-by-step process indicators
• Main CTA button with green dot and chevron icon
• Three-step process visualization (Wniosek online, Zatwierdź umowę, Odbierz usługę lub towar)
• Footer with "Dowiedz się więcej" link and iPay logo
• ipay-modal-info routes to individual application URL
• ipay-modal-info-leasing routes to company application URL
• Uses Figma-designed icons for professional appearance

Hover Effects

• All buttons have consistent hover effects with dark blue background (#003574)
• Text and icons change to white on hover
• Subtle lift animation and enhanced shadow effects
• Smooth transitions (0.2s ease)

Preview

A comprehensive preview file is hosted on: https://asszlag.github.io/ipay-buttons-lib/preview.html

Styling & Design

Color Scheme

• Primary Color: Dark blue (#003574)
• Background: White with subtle shadows
• Hover State: Dark blue background with white text/icons
• Borders: Light gray (#E5E7EB) with rounded corners

Typography

• Font Family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
• Font Weights: 400 (regular), 600 (semi-bold), 700 (bold)
• Font Sizes: 10px-24px depending on button variant

Layout

• Border Radius: 12px for modern appearance
• Padding: 8px-24px depending on button size
• Shadows: Subtle 0 1px 3px rgba(0, 0, 0, 0.1) with enhanced hover effects
• Transitions: Smooth 0.2s ease animations

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Any browser with Web Components support

License

MIT © [email protected]

Contributing

Contributions are welcome! Please open a PR or issue if you have suggestions.