payfade

v1.0.5

Published

8 months ago

Payfade is an open source application for developers to make sure your client pays for your work. It's an improved and web-based version of [Client Did Not Pay](https://github.com/kleampa/not-paid) js file. This project extends the mentioned repo's idea a

0High
0Medium
0Low

scienmanas

💫 PayFade

Payfade is an open source application for developers to make sure your client pays for your work. It's an improved and web-based version of Client Did Not Pay js file. This project extends the mentioned repo's idea and gives complete credits of this creativity to the original inventors of this idea.

Supports:

✅ Next.js (Server and Client Components)
✅ React.js, Vanilla JS , and other frameworks
✅ Basically , any JavaScript environment 😊

✨ Install

npm install payfade
# or
yarn add payfade

Variables & Configuration

apiKey: Your website apiKey (required)
delay: Optional delay in milliseconds before applying the opacity value (default value: 2000)

📦 Usage

For Next.Js

There are two ways to add it:

If you want to keep your Next.Js app server -side rendered, add the following to the root layout

import { PayFade } from "payfade";

<PayFade apiKey="YOUR _API_KEY" />

If you want to use client-side rendering, add the following to the root layout.

import { PayFadeClient } from "payfade";

  useEffect(() => {
    PayFadeClient({ apiKey: "API_KEY" });
  }, []);

For React.Js

Add this code inside any component, rest the package will handle 😊.

import { PayFadeClient } from "payfade";

  useEffect(() => {
    PayFadeClient({ apiKey: "API_KEY" });
  }, []);

For Vanilla Js / other frameworks

import { PayFadeClient } from "payfade";

PayFadeClient({ apiKey: "API_KEY" });

Examples

Keeping the Next.Js app server-side rendered

import type { Metadata } from "next";
import "./globals.css";
import { PayFade } from "payfade";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="antialiased">
        {children}
        <PayFade apiKey="API_KEY" />
      </body>
    </html>
  );
}

Keeping Next.Js app client-side rendered

"use client";

import "./globals.css";
import { PayFadeClient } from "payfade";
import { useEffect } from "react";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  useEffect(() => {
    PayFadeClient({ apiKey: "API_KEY" });
  }, []);

  return (
    <html lang="en">
      <body className="antialiased">{children}</body>
    </html>
  );
}

React JS

import { PayFadeClient } from "payfade";
import { useEffect } from "react";

export default function AnyComponent() {

  // Add this code to your component - changes opacity
  useEffect(() => {
    PayFadeClient({ apiKey: "API_KEY" });
  }, []);

  return (
    <div>Some component</div>
  );
}

Vanilla Js

import { PayFadeClient } from "payfade";

PayFadeClient({ apiKey: "API_KEY" });

Contribution and Reporting

While we always test the package before releasing a new version, if you encounter any issues, please report them to us. You can do this by creating an issue on the github