Simple payment reminder - makes websites fade out when payment is overdue.
📖 ¿Prefieres leer en español? Ver README en español
npm install paywall-js📦 Package: paywall-js on npm
<script src="node_modules/paywall-js/dist/paywall.min.js"></script>
<script>
new Paywall({
dueDate: '2025-07-15',
daysDeadline: 10
});
</script>Paywall offers three different visual effects to remind users about overdue payments:
Beautiful gradient overlay that intensifies over time.
new Paywall({
dueDate: '2025-07-15',
daysDeadline: 10
// Use default gradient effect
});Solid color overlay that darkens gradually.
new Paywall({
dueDate: '2025-07-15',
daysDeadline: 10,
effect: 'solid',
color: '#ff0000'
});Simple opacity reduction of the body (original method).
new Paywall({
dueDate: '2025-07-15',
daysDeadline: 10,
effect: 'fade'
});| 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 |
- Configure: Define your due date and deadline
- Automatic Check: The library checks if the payment is overdue
- Visual Effect: Applies the selected effect based on the delay
- Gradual Intensification: The effect becomes stronger over time
- Maximum Impact: When the deadline is reached, the effect reaches full intensity
new Paywall({
dueDate: '2025-07-15',
daysDeadline: 10
// Automatically uses default gradient effect with default colors
});new Paywall({
dueDate: '2025-07-15',
daysDeadline: 10,
effect: 'gradient',
gradientFrom: '#ff6600',
gradientTo: '#cc0000'
});new Paywall({
dueDate: '2025-07-15',
daysDeadline: 10,
effect: 'solid',
color: '#0066cc'
});new Paywall({
dueDate: '2025-07-15',
daysDeadline: 10,
effect: 'fade'
});new Paywall({
dueDate: '2025-07-15',
enabled: false // library loaded but effect not applied
});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();- 🚀 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
- 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
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
- ✅ Chrome (latest version)
- ✅ Firefox (latest version)
- ✅ Safari (latest version)
- ✅ Edge (latest version)
- ✅ Internet Explorer 11+
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)
MIT