Paywall.js 🛡️

Simple payment reminder - makes websites fade out when payment is overdue.

📖 ¿Prefieres leer en español? Ver README en español

Installation

npm install paywall-js

📦 Package: paywall-js on npm

Quick Start

<script src="node_modules/paywall-js/dist/paywall.min.js"></script>
<script>
  new Paywall({
    dueDate: '2025-07-15',
    daysDeadline: 10
  });
</script>

Visual Effects

Paywall offers three different visual effects to remind users about overdue payments:

🎨 Gradient Effect (Default)

Beautiful gradient overlay that intensifies over time.

new Paywall({
  dueDate: '2025-07-15',
  daysDeadline: 10
  // Use default gradient effect
});

🔴 Solid Effect

Solid color overlay that darkens gradually.

new Paywall({
  dueDate: '2025-07-15',
  daysDeadline: 10,
  effect: 'solid',
  color: '#ff0000'
});

🌫️ Fade Effect

Simple opacity reduction of the body (original method).

new Paywall({
  dueDate: '2025-07-15',
  daysDeadline: 10,
  effect: 'fade'
});

Configuration

| Option | Type | Required | Default | Description | |--------|------|-----------|-------------|-------------| | dueDate | String | ✅ Yes | - | Payment due date (YYYY-MM-DD) | | daysDeadline | Number | ❌ No | 60 | Days after which the effect is maximum | | effect | String | ❌ No | 'gradient' | Effect type: 'gradient', 'solid', 'fade' | | color | String | ❌ No | '#ff0000' | Color for solid effect (hex or name) | | gradientFrom | String | ❌ No | '#ff0000' | Initial gradient color | | gradientTo | String | ❌ No | '#000000' | Final gradient color | | enabled | Boolean | ❌ No | true | Enables or disables the effect globally |

How it works

1. Configure: Define your due date and deadline
2. Automatic Check: The library checks if the payment is overdue
3. Visual Effect: Applies the selected effect based on the delay
4. Gradual Intensification: The effect becomes stronger over time
5. Maximum Impact: When the deadline is reached, the effect reaches full intensity

Examples

Basic Usage (Default Gradient)

new Paywall({
  dueDate: '2025-07-15',
  daysDeadline: 10
  // Automatically uses default gradient effect with default colors
});

Custom Gradient Colors

new Paywall({
  dueDate: '2025-07-15',
  daysDeadline: 10,
  effect: 'gradient',
  gradientFrom: '#ff6600',
  gradientTo: '#cc0000'
});

Solid Blue Overlay

new Paywall({
  dueDate: '2025-07-15',
  daysDeadline: 10,
  effect: 'solid',
  color: '#0066cc'
});

Simple Fade

new Paywall({
  dueDate: '2025-07-15',
  daysDeadline: 10,
  effect: 'fade'
});

Disable on load (opt-out)

new Paywall({
  dueDate: '2025-07-15',
  enabled: false // library loaded but effect not applied
});

Runtime control

const paywall = new Paywall({ dueDate: '2025-07-15' });

// Temporarily disable
paywall.disable();

// Re-enable and re-apply effect
paywall.enable();

// Update configuration on the fly
paywall.update({ effect: 'solid', color: '#0066cc' });

// Completely remove any effect
paywall.destroy();

Features

• 🚀 Simple Configuration - Only includes the script and configures
• 🎨 Multiple Effects - Choose between gradient, solid, or fade
• ⚡ Automatic - No manual intervention required
• 🎯 Customizable - Configure colors, dates, and deadlines
• 📱 Responsive - Works on all devices
• 🔒 Lightweight - Minimal size, no dependencies

Use Cases

• Freelancers: Ensure clients pay on time
• Agencies: Protect against non-payment
• Developers: Ensure web project payments
• Consultants: Maintain payment discipline
• Service Providers: Automatic payment reminders

Demo Pages

Check out the live demos to see each effect in action:

• 🏠 Simple Demo - Basic usage with gradient effect
• 📖 Documentation - Complete guide and API reference
• 🏭 CDN Demo - Simple demo using unpkg CDN
• 📦 npm Demo - Professional website using npm install
• 🎨 Gradient Effect Demo - Beautiful gradient overlay
• 🔴 Solid Effect Demo - Clean solid color overlay
• 🌫️ Fade Effect Demo - Simple opacity reduction

Browser Compatibility

• ✅ Chrome (latest version)
• ✅ Firefox (latest version)
• ✅ Safari (latest version)
• ✅ Edge (latest version)
• ✅ Internet Explorer 11+

Author

Paywall.js was inspired by the original concept of @kleampa and developed with improvements by Alberto Guaman for publication on npm.

• Original Concept: @kleampa
• Developer: Alberto Guaman - Tinguar (Digital Agency)

License

MIT