# Inline Script (Frontend)

## DevPayr SDK

The official JavaScript SDK for integrating **DevPayr** into your web or SaaS application. Use this SDK to verify license keys, enforce project-based payments, and load secure injectables dynamically.

***

### 🔧 Installation

You can either include the SDK directly in your HTML, or install it via `npm`/`yarn` for Node.js/ESM/CommonJS use.

#### ➤ Browser (via CDN or direct file)

```html
<script src="https://cdn.jsdelivr.net/npm/@devpayr/frontend-sdk@latest/dist/devpayr-frontend.js"></script>
```

#### ➤ Node.js / Build Tools

```bash
npm install @devpayr/frontend-sdk
```

```js
// ESM
import '@devpayr/frontend-sdk';

// CommonJS
require('@devpayr/frontend-sdk');
```

### 🚀 Usage

Before the SDK initializes, you must define a global config object in the browser’s `window` scope. This object allows the DevPayr SDK to read your license, configure behavior, and optionally handle secure injectables.

**✅ Basic Usage**

```html
<script>
    window.myapp = {
        license: 'YOUR_LICENSE_KEY', // Required
        onReady: function () {
            console.log('✅ License verified.');
        }
    };
</script>
<script src="https://cdn.devpayr.dev/devpayr-sdk.js"></script>
```

**💻 Minimal Modal with Default Text**

```html
<script>
    window.myapp = {
        license: 'LICENSE_ABC123',
        invalidBehavior: 'modal',
        debug: false
    };
</script>
```

> This shows the default DevPayr modal with fallback messaging when license is invalid or expired.

**🎨 Fully Themed Modal with Custom Text**

```html
<script>
    window.myapp = {
        license: 'LICENSE_456DEF',
        invalidBehavior: 'modal',
        modalText: '🚫 This application is not licensed. Please contact support.',
        modalTheme: {
            primary: '#10b981',        // emerald
            background: '#1a1a2e',
            text: '#e0f2f1',
            border: '#10b981',
            glow: true
        },
        onReady: function () {
            console.log('✅ All good.');
        }
    };
</script>
```

> Customize modal appearance using modalTheme.

**🔁 Persistent License (No Daily Recheck)**

```html
<script>
    window.myapp = {
        license: 'LICENSE_XYZ789',
        recheck: false,
        onReady: function () {
            console.log('🔓 Cached license still valid.');
        }
    };
</script>
```

> This skips license verification after the first success, unless storage is cleared.

**🔀 Redirect Instead of Modal on Failure**

```html
<script>
    window.myapp = {
        license: 'LICENSE_REDIRECT',
        invalidBehavior: 'redirect',
        redirectUrl: 'https://yourapp.com/upgrade',
        debug: true
    };
</script>
```

> When license is invalid, users are redirected instead of seeing a modal.

**🔐 Injectables Support (Advanced Usage)**

```html
<script>
    window.myapp = {
        license: 'LICENSE_INJECT',
        injectables: true,
        injectablesEndpoint: 'https://yourapp.com/sdk/receive',
        onReady: function () {
            console.log('🔐 License validated, injectables loading...');
        }
    };
</script>
```

> This sends retrieved injectables (if any) to your backend for secure use.

> 💡 **Tip:** You can name your global config variable anything — the SDK will automatically detect it\
> as long as it contains a `license` or `lk` property. This helps you keep the SDK integration hidden\
> or embedded in an existing namespace.

**🔧 Examples of custom config variable names**

```html
<script>
    window.sdkConfig = {
        license: 'YOUR_LICENSE_KEY',
        onReady: () => console.log('✅ sdkConfig verified')
    };
</script>

<script>
    window._devSettings = {
        lk: 'LICENSE_123ABC',
        debug: true,
        onReady: () => console.log('🔐 _devSettings verified')
    };
</script>
<script>
    window.anythingYouWant = {
        license: 'LICENSE_SOMETHING',
        injectables: true,
        onReady: () => console.log('🎯 anythingYouWant verified')
    };
</script>
```

> The SDK will scan all global variables at runtime and automatically use the first object that has a valid license or lk key. No additional configuration is needed.

#### 📦 Usage in Frameworks (ESM / CommonJS)

**➤ ESM (e.g. Vite, Nuxt, React, etc.)**

```js
import '@devpayr/frontend-sdk';

// Optionally inject config into window (for client detection)
window.devpayr = {
    license: 'YOUR_LICENSE_KEY',
    onReady: () => console.log('✅ Verified')
};
```

**➤ CommonJS (e.g. Webpack, Next.js)**

```js
require('@devpayr/frontend-sdk');

global.devpayr = {
    license: 'YOUR_LICENSE_KEY',
    injectables: true,
    injectablesEndpoint: 'https://yourapp.com/sdk/receive'
};
```

### 🔐 How It Works

* ✅ **Automatically detects** the license key from any global variable on the `window` scope.
* 🔍 **Verifies** the license against the DevPayr API in real-time.
* 🧠 **Caches** successful license checks using `localStorage` (with support for `recheck: false`).
* 🚫 If the license is **invalid**:
  * Shows a **modal** with customizable text and theme (`modalText`, `modalTheme`), or
  * **Redirects** the user if `invalidBehavior: 'redirect'` is set.
* 🔐 If `injectables` are enabled:
  * They are securely **forwarded** to your backend using the provided `injectablesEndpoint`.

> The SDK runs autonomously after being included — no need to manually call any methods.

### 💡 Notes

* 🧩 The global config key can be **named anything** (e.g., `window.myapp`, `window.licenseSettings`, etc.).\
  The SDK will automatically find the first object with a `license` or `lk` property.
* 🚫 The SDK **only runs once** and gracefully exits if license validation fails. Whenever an error is encountered, it will display the modal
* 🐞 You can enable `debug: true` in your config to see detailed logs in the browser console.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://devpayr.gitbook.io/devpayr-docs/documentation/sdks-and-integrations/inline-script-frontend.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.