### Initialize ApphudSDK

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Initialize the SDK with your API key. This should be done at the start of your application. Debug mode provides additional logging.

```javascript
await apphud.init({
  apiKey: "your_api_key_here",
  debug: true,
});
```

--------------------------------

### Initialize Payment Form

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Setup the HTML structure and initialize the payment form using the Apphud SDK.

```HTML
<form id="apphud-payment-form">    <div id="payment-element">        <!-- here will be printed form from payment provider like stripe / paddle -->    </div>    <button id="submit">Subscribe</button>    <div id="error-message">        <!-- here will be printed form validation errors -->    </div></form>
```

```JS
apphud.paymentForm();
```

--------------------------------

### Displaying Product Variables with data-aph-var

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Example of displaying old and new prices from the currently selected product using `data-aph-var`.

```html
<div>
  <p>Old Price: <span data-aph-var=",-1,old-price"></span></p>
  <p>New Price: <span data-aph-var=",-1,new-price"></span></p>
</div>
```

--------------------------------

### Manage Product Selections and Variables

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Handle product selection and update displayed variables. This example updates the active product button and reloads variables when a product is selected.

```html
<div class="products" id="products">
  <button class="active" data-product-index="0">
    <s><span class="old-price" data-aph-var="main_web,0,old-price"></span></s> <span data-aph-var="main_web,0,new-price">$
    ~</span>
  </button>
  <button data-product-index="1">
    <s><span class="old-price" data-aph-var="main_web,1,old-price"></span></s> <span data-aph-var="main_web,1,new-price">$
    ~</span>
  </button>
  <button data-product-index="2">
    <s><span class="old-price" data-aph-var="main_web,2,old-price"></span></s> <span data-aph-var="main_web,2,new-price">$
    ~</span>
  </button>
</div>
```

```javascript
const productsContainer = document.getElementById('products');
const productButtons = productsContainer.querySelectorAll('button');
productButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Update active product
    productButtons.forEach(btn => btn.classList.remove('active'));
    button.classList.add('active');
    // Update SDK product and reload variables
    apphud.selectPlacementProduct(apphud.currentPlacement().identifier, button.dataset.productIndex);
    apphud.operateVariables();
  });
});
```

--------------------------------

### Manage Product Selections and Variables

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Dynamically update product selections and reload variables based on user interaction. This example handles button clicks to change the active product.

```html
<div class="products" id="products">
  <button class="active" data-product-index="0">
    <s><span class="old-price" data-aph-var="main_web,0,old-price"></span></s> <span data-aph-var="main_web,0,new-price">$~</span>
  </button>
  <button data-product-index="1">
    <s><span class="old-price" data-aph-var="main_web,1,old-price"></span></s> <span data-aph-var="main_web,1,new-price">$~</span>
  </button>
  <button data-product-index="2">
    <s><span class="old-price" data-aph-var="main_web,2,old-price"></span></s> <span data-aph-var="main_web,2,new-price">$~</span>
  </button>
</div>
```

```javascript
const productsContainer = document.getElementById('products');
const productButtons = productsContainer.querySelectorAll('button');

productButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Update active product
    productButtons.forEach(btn => btn.classList.remove('active'));
    button.classList.add('active');

    // Update SDK product and reload variables
    apphud.selectPlacementProduct(apphud.currentPlacement().identifier, button.dataset.productIndex);
    apphud.operateVariables();
  });
});
```

--------------------------------

### Track User Events

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Log user events with optional event-specific data. This example tracks a button click and passes the button's name and user age.

```html
<button id="track-event" data-event-name="any-event-name">Track!</button>
```

```javascript
document.getElementById('track-event').addEventListener('click', (e) => {
  apphud.track('button_click', { buttonName: e.target.dataset.eventName }, { age: 29 });
});
```

--------------------------------

### GET /user

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Apphud.html

Retrieves the current user details from the Apphud SDK.

```APIDOC
## GET /user

### Description
Gets the current user details.

### Method
GET

### Endpoint
/user

### Response
#### Success Response (200)
- **user** (User) - The current user object.
```

--------------------------------

### Get Current Placement Information

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Retrieve information about the current placement using the `currentPlacement` method. This is useful for managing grouped products and paywalls.

```javascript
const currentPlacement = apphud.currentPlacement();
console.log("Current placement:", currentPlacement.identifier);
```

--------------------------------

### Set User Email

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Save a user's email address using the `setEmail` method. This example uses input fields and a button to capture and submit the email.

```html
<input type="email" placeholder="Email" id="email-input" />
<button id="save-email-button">Submit</button>
```

```javascript
const emailInput = document.getElementById('email-input');
const saveEmailButton = document.getElementById('save-email-button');

saveEmailButton.addEventListener('click', async () => {
  await apphud.setEmail(emailInput.value);
});
```

--------------------------------

### init

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Apphud.html

Initializes the Apphud SDK with the provided configuration options.

```APIDOC
## init

### Description
Initializes the Apphud SDK with the provided configuration options.

### Parameters
- **options** (Config) - Required - The configuration options for initialization.

### Returns
- **Promise<void>** - A promise that resolves when initialization is complete.
```

--------------------------------

### Listen for SDK Ready Event

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Use `apphud.on('ready', callback)` to execute code once the Apphud SDK is fully initialized and ready for use.

```javascript
// Listen for when the SDK is initialized
apphud.on("ready", () => {
  console.log("Apphud SDK ready!");
  // You can start using SDK methods now
});
```

--------------------------------

### Initialize Theme and Show Page

Source: https://github.com/apphud/apphud.js/blob/master/docs/types/LifecycleEventCallback.html

Sets the theme from local storage and controls the initial display of the page content. Use this to manage the application's theme and initial loading state.

```javascript
document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";
document.body.style.display="none";
setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)
```

--------------------------------

### SDK Initialization

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Initializes the Apphud SDK with the required API key.

```APIDOC
## apphud.init

### Description
Initializes the Apphud SDK. This must be called as soon as the application starts.

### Parameters
- **apiKey** (string) - Required - Your Apphud API key.
- **debug** (boolean) - Optional - Enables logging for debugging purposes.

### Request Example
```javascript
await apphud.init({
  apiKey: "your_api_key_here",
  debug: true
});
```
```

--------------------------------

### ApphudSDK Initialization

Source: https://github.com/apphud/apphud.js/blob/master/docs/variables/default.html

The primary entry point for the Apphud SDK, defined as the default export.

```APIDOC
## default (ApphudSDK)

### Description
The default export representing the ApphudSDK instance used for managing in-app purchases and subscriptions.

### Definition
- **Variable**: default
- **Type**: ApphudSDK
- **Source**: index.ts:6
```

--------------------------------

### Listen for Payment Form Ready Event

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Use `apphud.on('payment_form_ready', callback)` to react when the payment form is fully prepared and displayed to the user. The callback receives an event object.

```javascript
// Listen for when the payment form is ready
apphud.on("payment_form_ready", (event) => {
  console.log("Payment form is ready:", event);
});
```

--------------------------------

### Debugging

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Enable debugging logs in the browser console during initialization.

```APIDOC
## Debugging

Enable debugging by setting `debug: true` during initialization. Logs will appear in the browser console.
```

--------------------------------

### Product Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Product.html

Defines the structure for product objects in Apphud.js.

```APIDOC
## Interface Product

### Description
Represents a product within the Apphud system, including its identification, pricing, and store-specific details.

### Properties

#### base_plan_id
- **Type**: `string`
- **Description**: The base plan ID associated with the product.
- **Defined in**: types/apphud.ts:62

#### created_automatically
- **Type**: `boolean`
- **Optional**: true
- **Description**: Indicates if the product was created automatically.
- **Defined in**: types/apphud.ts:63

#### db_id
- **Type**: `string`
- **Optional**: true
- **Description**: The database ID of the product.
- **Defined in**: types/apphud.ts:64

#### id
- **Type**: `string`
- **Description**: The unique identifier for the product.
- **Defined in**: types/apphud.ts:58

#### name
- **Type**: `string`
- **Description**: The display name of the product.
- **Defined in**: types/apphud.ts:59

#### payment_provider_id
- **Type**: `string`
- **Optional**: true
- **Description**: The ID of the payment provider for this product.
- **Defined in**: types/apphud.ts:65

#### product_id
- **Type**: `string`
- **Description**: The product identifier used by the store (e.g., Apple App Store, Google Play Store).
- **Defined in**: types/apphud.ts:60

#### properties
- **Type**: `ApphudHash`
- **Optional**: true
- **Description**: Additional properties or metadata for the product.
- **Defined in**: types/apphud.ts:67

#### store
- **Type**: `string`
- **Optional**: true
- **Description**: The store where the product is available (e.g., 'app_store', 'google_play').
- **Defined in**: types/apphud.ts:61

#### store_id
- **Type**: `string`
- **Optional**: true
- **Description**: The product's identifier within a specific store.
- **Defined in**: types/apphud.ts:66
```

--------------------------------

### Listen to SDK Events

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Register callbacks for Apphud lifecycle events.

```JavaScript
apphud.on(eventName, callback);
```

--------------------------------

### Listen for Apphud SDK events

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Use apphud.on to register callbacks for SDK lifecycle events such as initialization, payment form readiness, and payment outcomes.

```javascript
// Listen for when the SDK is initializedapphud.on("ready", () => {  console.log("Apphud SDK ready!");  // You can start using SDK methods now});// Listen for when the payment form is readyapphud.on("payment_form_ready", (event) => {  console.log("Payment form is ready:", event);});// Listen for successful paymentsapphud.on("payment_success", (event) => {  console.log("Payment was successful:", event);  alert("Thank you for your purchase!");});// Listen for failed paymentsapphud.on("payment_failure", (event) => {  console.error("Payment failed:", event);  alert("Unfortunately, the payment failed. Please try again.");});
```

--------------------------------

### Placement Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Placement.html

Defines the structure of a Placement object, which includes an ID, identifier, name, and an array of associated Paywalls.

```APIDOC
## Interface: Placement

### Description
Represents a placement for in-app purchase offers, containing details like its unique identifier, name, and the paywalls associated with it.

### Properties

#### id
- **Type**: `string`
- **Description**: The unique identifier for the placement.

#### identifier
- **Type**: `string`
- **Description**: A programmatic identifier for the placement.

#### name
- **Type**: `string`
- **Description**: The human-readable name of the placement.

#### paywalls
- **Type**: `Paywall[]`
- **Description**: An array of `Paywall` objects associated with this placement.
```

--------------------------------

### Listening to Events with apphud.on

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Listen for lifecycle events emitted by the Apphud SDK using the apphud.on method.

```APIDOC
## Listening to Events with `apphud.on`

The `apphud.on` method allows you to listen for lifecycle events emitted by the Apphud SDK. This is useful for reacting to specific moments in the SDK's lifecycle, such as when it has been initialized or when a payment form is ready.

### Syntax

```javascript
apphud.on(eventName, callback);
```

**Parameters:**
- `eventName` *(string)*: The name of the lifecycle event you want to listen to.
- `callback` *(function)*: The function to execute when the event is emitted. The callback receives an event object as its parameter.

### Available Events

The following lifecycle events can be listened to:

- **`"ready"`**: Triggered when the SDK is fully initialized and ready to use.
- **`"payment_form_initialized"`**: Triggered when the payment form has been successfully initialized.
- **`"payment_form_ready"`**: Triggered when the payment form is fully ready and displayed to the user.
- **`"payment_success"`**: Triggered after a successful payment.
- **`"payment_failure"`**: Triggered when a payment fails.
- **`"product_changed"`**: Triggered when user chooses product.

### Example Usage

Here's an example of how to listen for events and handle them using `apphud.on`:

```javascript
// Listen for when the SDK is initialized
apphud.on("ready", () => {
  console.log("Apphud SDK ready!");
  // You can start using SDK methods now
});

// Listen for when the payment form is ready
apphud.on("payment_form_ready", (event) => {
  console.log("Payment form is ready:", event);
});

// Listen for successful payments
apphud.on("payment_success", (event) => {
  console.log("Payment was successful:", event);
  alert("Thank you for your purchase!");
});

// Listen for failed payments
apphud.on("payment_failure", (event) => {
  console.error("Payment failed:", event);
  alert("Unfortunately, the payment failed. Please try again.");
});
```

By using these event listeners, you can create a seamless user experience by responding dynamically to changes in the Apphud SDK lifecycle.
```

--------------------------------

### on

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Apphud.html

Subscribes to an event with the given name.

```APIDOC
## on

### Description
Subscribes to an event with the given name.

### Parameters
- **eventName** (LifecycleEventName) - Required - The name of the event.
- **callback** (LifecycleEventCallback) - Required - The callback to execute when the event occurs.
```

--------------------------------

### Integrate Payment Form

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Use the `paymentForm` method to display the payment form for a selected product. Specify the payment provider and optional success/failure URLs.

```html
<form id="apphud-payment-form">
    <div id="payment-element">
        <!-- here will be printed form from payment provider like stripe / paddle -->
    </div>
    <button id="submit">Subscribe</button>
    <div id="error-message">
        <!-- here will be printed form validation errors -->
    </div>
</form>
```

```javascript
apphud.paymentForm({
    paymentProvider: "stripe", // Optional: "stripe" or "paddle"
    successUrl: "https://your-success-url.com", // Optional
});
```

--------------------------------

### selectPlacementProduct

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Apphud.html

Selects a product for a given placement index.

```APIDOC
## selectPlacementProduct

### Description
Selects a product for a given placement index.

### Parameters
- **placementIndex** (string) - Required - The index of the placement.
- **productIndex** (number) - Required - The index of the product within the placement.
```

--------------------------------

### Initialize Analytics Tracking

Source: https://github.com/apphud/apphud.js/blob/master/example/index.html

Initializes Google Analytics and Facebook Pixel tracking scripts on the page.

```javascript
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-ENXCE5ZWG0'); !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '7600403403324046'); fbq('track', 'PageView');
```

--------------------------------

### Apphud SDK Methods

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Apphud.html

Core methods for retrieving user and session-related information from the Apphud SDK.

```APIDOC
## Apphud SDK Methods

### Description
Methods to retrieve current state information such as user ID, active paywalls, placements, products, and deep links.

### Methods
- **getUserID()**: Returns the current user ID or undefined.
- **currentProduct()**: Returns the current product or null.
- **currentPlacement()**: Returns the current placement or null.
- **currentPaywall()**: Returns the current paywall or null.
- **getDeepLink()**: Returns the current deep link or null.

### Response
#### Success Response (200)
- **data** (string | object | null) - The requested information based on the method called.
```

--------------------------------

### Include ApphudSDK JavaScript

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Include the ApphudSDK JavaScript file in your project via a script tag to begin using its features.

```html
<script src="https://js.apphud.com/web/v1/apphud.js"></script>
```

--------------------------------

### Displaying Specific Product Variables with data-aph-var

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Use this syntax to display variables from a specific product within a placement. Provide the `placement_identifier` and `productIndex`.

```html
<div>
  <p>Old Price: <span data-aph-var="main_web,0,old-price"></span></p>
  <p>New Price: <span data-aph-var="main_web,0,new-price"></span></p>
</div>
```

--------------------------------

### Listen for Payment Failure Event

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Use `apphud.on('payment_failure', callback)` to handle payment failures. The callback receives an event object with error details.

```javascript
// Listen for failed payments
apphud.on("payment_failure", (event) => {
  console.error("Payment failed:", event);
  alert("Unfortunately, the payment failed. Please try again.");
});
```

--------------------------------

### Manage Placements

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Retrieve and log the current placement identifier.

```JavaScript
const currentPlacement = apphud.currentPlacement();console.log("Current placement:", currentPlacement.identifier);
```

--------------------------------

### Displaying Selected Product Variables with data-aph-var

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Use this syntax to display variables from the currently selected product. Ensure `placement_identifier` is omitted or empty and `productIndex` is -1.

```html
<span data-aph-var=",-1,varName"></span>
```

--------------------------------

### Payment Form Integration

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Displays the payment form for the selected product.

```APIDOC
## apphud.paymentForm

### Description
Displays the payment form provided by the configured payment provider.

### Parameters
- **paymentProvider** (string) - Optional - The payment provider to use ('stripe' or 'paddle').
- **successUrl** (string) - Optional - Redirect URL after successful payment.
- **failureUrl** (string) - Optional - Redirect URL after payment failure.

### Request Example
```javascript
apphud.paymentForm({
    paymentProvider: "stripe",
    successUrl: "https://your-success-url.com"
});
```
```

--------------------------------

### Working with data-aph-var

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Dynamically display variables from selected products or specific placements using the data-aph-var attribute.

```APIDOC
## Working with `data-aph-var`

The `data-aph-var` attribute in the Apphud SDK allows you to dynamically display variables from selected products or specific placements. This is especially useful for personalizing the user interface with real-time product details such as prices, descriptions, or other properties.

### Syntax

The syntax for `data-aph-var` is:

```
data-aph-var="placement_identifier,productIndex,varName"
```

**Parameters:**
- `placement_identifier` *(string)*: The identifier of the placement where the product resides.
    - Omit this value if you want to work with the currently selected placement.
- `productIndex` *(number)*: The index of the product within the placement.
    - Use `-1` to refer to the currently selected product.
- `varName` *(string)*: The name of the variable to display.

### Displaying Variables from the Selected Product

To display a variable from the currently selected product, set `placement_identifier` to an empty string or omit it, and set `productIndex` to `-1`. For example:

```html
<span data-aph-var=",-1,varName"></span>
```

In this example:
- `varName` will be replaced by the corresponding variable value from the selected product.

### Example Usage

Here's an example of how you might use `data-aph-var` in your HTML:

```html
<div>
  <p>Old Price: <span data-aph-var=",-1,old-price"></span></p>
  <p>New Price: <span data-aph-var=",-1,new-price"></span></p>
</div>
```

### Displaying Variables from a Specific Product

If you want to display a variable from a specific product (rather than the currently selected one), specify the `placement_identifier` and `productIndex`. For example:

```html
<div>
  <p>Old Price: <span data-aph-var="main_web,0,old-price"></span></p>
  <p>New Price: <span data-aph-var="main_web,0,new-price"></span></p>
</div>
```

### Dynamic Updates

The Apphud SDK provides the method `apphud.operateVariables()` to automatically update all elements with `data-aph-var` attributes based on the current state. Call this method after changing the selected product to refresh the displayed variables.

### Example JavaScript

Here's an example of updating variables dynamically when the product is changed:

```javascript
// Update variables after selecting a product
apphud.selectPlacementProduct("main_web", 1); // Select a product
apphud.operateVariables(); // Refresh displayed variables
```

By using `data-aph-var` effectively, you can create a highly dynamic and personalized user experience by displaying product-specific data in real-time.
```

--------------------------------

### Listen for Payment Success Event

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Use `apphud.on('payment_success', callback)` to handle successful payment events. The callback receives an event object containing details about the transaction.

```javascript
// Listen for successful payments
apphud.on("payment_success", (event) => {
  console.log("Payment was successful:", event);
  alert("Thank you for your purchase!");
});
```

--------------------------------

### Subscription Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Subscription.html

Defines the structure of a subscription object.

```APIDOC
## Interface Subscription

### Description
Represents a subscription object with optional client secret and deep link, and a required ID.

### Properties

#### `Optional` client_secret
- **client_secret** (string) - The client secret for the subscription.

#### `Optional` deep_link
- **deep_link** (string) - A deep link associated with the subscription.

#### `Required` id
- **id** (string) - The unique identifier for the subscription.

### Defined in
types/api.ts:19
```

--------------------------------

### Currency Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Currency.html

Defines the structure for currency information within the Apphud.js SDK.

```APIDOC
## Interface Currency

### Description
Represents currency information, including its code and the associated country code.

### Properties

*   **code** (string) - Required - The currency code (e.g., "USD", "EUR").
*   **country_code** (string) - Required - The ISO 3166-1 alpha-2 country code associated with the currency (e.g., "US", "DE").

### Defined in
types/apphud.ts:52
```

--------------------------------

### Display Dynamic Variables

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Use data-aph-var attributes to display product variables in the UI.

```HTML
data-aph-var="placement_identifier,productIndex,varName"
```

```HTML
<span data-aph-var=",-1,varName"></span>
```

```HTML
<div>  <p>Old Price: <span data-aph-var=",-1,old-price"></span></p>  <p>New Price: <span data-aph-var=",-1,new-price"></span></p></div>
```

```HTML
<div>  <p>Old Price: <span data-aph-var="main_web,0,old-price"></span></p>  <p>New Price: <span data-aph-var="main_web,0,new-price"></span></p></div>
```

--------------------------------

### Interface: Price

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Price.html

Defines the structure of the Price object used within the Apphud.js SDK.

```APIDOC
## Interface: Price

### Description
Represents the pricing details for a specific product, including currency and the product object itself.

### Properties
- **currency** (Currency) - The currency associated with the price.
- **price** (number) - The numeric value of the price.
- **product** (Product) - The product associated with this price.
- **readProperty** (function) - A method that accepts a string key and returns a string or null value.
```

--------------------------------

### Event Tracking

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Logs user events within the application.

```APIDOC
## apphud.track

### Description
Logs a custom user event with associated data.

### Parameters
- **eventName** (string) - Required - The name of the event.
- **properties** (object) - Optional - Event-specific data.
- **userProperties** (object) - Optional - User-specific data.

### Request Example
```javascript
apphud.track('button_click', { buttonName: 'submit' }, { age: 29 });
```
```

--------------------------------

### Events Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Events.html

Defines the structure for event data, including device ID, a list of events, JSON string representation of events, and user ID.

```APIDOC
## Events Interface

### Description
Represents the structure for event data within the apphud.js SDK. It allows for tracking events associated with a specific device and user.

### Properties

#### `Optional` device_id
- **Type**: `null | string`
- **Description**: The unique identifier for the device.
- **Defined in**: types/apphud.ts:222

#### `Optional` events
- **Type**: `Array<EventData>`
- **Description**: An array of event data objects.
- **Defined in**: types/apphud.ts:221

#### `Optional` events_json
- **Type**: `string`
- **Description**: A JSON string representation of the events.
- **Defined in**: types/apphud.ts:224

#### `Optional` user_id
- **Type**: `null | string`
- **Description**: The unique identifier for the user.
- **Defined in**: types/apphud.ts:223
```

--------------------------------

### track

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Apphud.html

Tracks an event with the specified name and properties.

```APIDOC
## track

### Description
Tracks an event with the specified name and properties.

### Parameters
- **name** (string) - Required - The name of the event to track.
- **properties** (ApphudHash) - Required - Event-specific properties.
- **userProperties** (ApphudHash) - Required - User-specific properties.

### Returns
- **boolean** - True if tracking was successful, otherwise false.
```

--------------------------------

### PaymentForm Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/PaymentForm.html

The PaymentForm interface provides methods for displaying payment forms and managing paywalls.

```APIDOC
## Interface PaymentForm

### Description
Represents the interface for payment forms, allowing the display of payment-related UI elements.

### Methods

#### show

##### Description
Displays a payment form for a given product, optionally specifying a paywall and placement.

##### Parameters

- **productId** (string) - Required - The unique identifier of the product.
- **paywallId** (string) - Optional - The identifier of the paywall to display.
- **placementId** (string) - Optional - The identifier of the placement for the paywall.
- **options** (PaymentProviderFormOptions) - Optional - Additional options for the payment provider form.

##### Returns

- Promise<void> - A promise that resolves when the payment form is displayed or an error occurs.
```

--------------------------------

### PaymentProviderFormOptions Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/PaymentProviderFormOptions.html

Defines the optional configuration properties for payment provider forms in the Apphud SDK.

```APIDOC
## Interface: PaymentProviderFormOptions

### Description
Configuration options for payment provider forms, allowing the specification of redirect URLs upon completion or failure.

### Properties
- **successUrl** (string) - Optional - The URL to redirect to after a successful payment process.
- **failureUrl** (string) - Optional - The URL to redirect to after a failed payment process.

### Usage Example
{
  "successUrl": "https://myapp.com/success",
  "failureUrl": "https://myapp.com/error"
}
```

--------------------------------

### setEmail

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Apphud.html

Sets the email address for the current user.

```APIDOC
## setEmail

### Description
Sets the email address for the current user.

### Parameters
- **email** (string) - Required - The user's email address.

### Returns
- **Promise<void>** - A promise that resolves when the email is set.
```

--------------------------------

### User Management

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Manages user identity, specifically setting the user's email address.

```APIDOC
## apphud.setEmail

### Description
Saves the user's email address to the Apphud backend.

### Parameters
- **email** (string) - Required - The email address to save.

### Request Example
```javascript
await apphud.setEmail("user@example.com");
```
```

--------------------------------

### PaymentProvider Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/PaymentProvider.html

Defines the structure of a payment provider object, including its ID, identifier, kind, and name.

```APIDOC
## Interface PaymentProvider

### Description
Represents a payment provider within the Apphud system. It includes unique identifiers and descriptive information.

### Properties

#### id
- **id** (string) - Required - A unique identifier for the payment provider.

#### identifier
- **identifier** (string) - Required - A system-specific identifier for the payment provider.

#### kind
- **kind** ([PaymentProviderKind](../types/PaymentProviderKind.html)) - Required - The type or category of the payment provider.

#### name
- **name** (string) - Required - The human-readable name of the payment provider.

### Example
```json
{
  "id": "pp_12345",
  "identifier": "stripe_connect",
  "kind": "stripe",
  "name": "Stripe Connect"
}
```
```

--------------------------------

### User Interface Definition

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/User.html

The User interface defines the structure of user objects used within the apphud.js library.

```APIDOC
## User Interface

### Description
Represents a user entity within the Apphud system, containing profile information and associated subscription or payment data.

### Properties
- **currency** (Currency) - The currency associated with the user.
- **email** (string | null | undefined) - The user's email address.
- **id** (string) - The unique identifier for the user.
- **payment_providers** (PaymentProvider[]) - Optional list of payment providers associated with the user.
- **paywalls** (Paywall[]) - Optional list of paywalls available to the user.
- **placements** (Placement[]) - Optional list of placements for the user.
- **prices** (Price[]) - Optional list of prices associated with the user.
- **user_id** (string) - The user's internal user ID.
```

--------------------------------

### Set User Email

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Save a user's email address using the `setEmail` method. This requires an input field for the email and a button to trigger the action.

```html
<input type="email" placeholder="Email" id="email-input" /><button id="save-email-button">Submit</button>
```

```javascript
const emailInput = document.getElementById('email-input');
const saveEmailButton = document.getElementById('save-email-button');
saveEmailButton.addEventListener('click', async () => {
  await apphud.setEmail(emailInput.value);
});
```

--------------------------------

### PaymentFormBuilder Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/PaymentFormBuilder.html

The PaymentFormBuilder interface allows developers to programmatically show payment forms with specified product, paywall, and placement IDs, along with custom options.

```APIDOC
## PaymentFormBuilder Interface

### Description
Provides methods to display payment forms.

### Method
`show`

### Endpoint
N/A (Client-side SDK method)

### Parameters
#### show
- **productId** (string) - Required - The ID of the product to be purchased.
- **paywallId** (string) - Optional - The ID of the paywall to use.
- **placementId** (string) - Optional - The ID of the placement where the form is shown.
- **options** (PaymentProviderFormOptions) - Optional - Additional options for the payment form.

### Request Example
```javascript
apphud.PaymentFormBuilder.show(
  "com.example.product1",
  "default_paywall",
  "banner_placement",
  { /* PaymentProviderFormOptions */ }
);
```

### Response
This method does not return a value directly, but triggers the display of a payment form.
```

--------------------------------

### Dynamically Update Variables with operateVariables

Source: https://github.com/apphud/apphud.js/blob/master/README.md

Call `apphud.operateVariables()` after selecting a product to refresh all elements with `data-aph-var` attributes.

```javascript
// Update variables after selecting a product
apphud.selectPlacementProduct("main_web", 1); // Select a product
apphud.operateVariables(); // Refresh displayed variables
```

--------------------------------

### SubscriptionParams Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/SubscriptionParams.html

Definition of the SubscriptionParams interface used for subscription requests.

```APIDOC
## SubscriptionParams Interface

### Description
Defines the parameters required to initiate or manage a subscription within the Apphud SDK.

### Properties
- **user_id** (string) - Required - The unique identifier for the user.
- **product_id** (string) - Required - The unique identifier for the product.
- **paywall_id** (string) - Optional - The unique identifier for the paywall.
- **placement_id** (string) - Optional - The unique identifier for the placement.
```

--------------------------------

### Interface: Message

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Message.html

Defines the structure of the Message interface used in apphud.js.

```APIDOC
## Interface: Message

### Description
The Message interface represents a standard message object structure used within the application.

### Properties
- **message** (string) - The content of the message.

### Definition
Defined in `types/apphud.ts:10`
```

--------------------------------

### CustomerData Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/CustomerData.html

The CustomerData interface defines the structure for customer-related information within the apphud.js SDK.

```APIDOC
## CustomerData Interface

### Description
This interface represents the data structure for customer information, including details about their device, app usage, and subscription status.

### Properties

- **app_version** (string) - Required - The current version of the application.
- **country_code** (string) - Required - The country code of the user's location.
- **country_iso_code** (string) - Required - The ISO code for the user's country.
- **currency_code** (undefined | string) - Required - The currency code for transactions.
- **device_family** (string) - Optional - The family of the device (e.g., 'iPhone', 'iPad').
- **device_id** (string) - Optional - A unique identifier for the device.
- **device_type** (string) - Optional - The type of the device (e.g., 'phone', 'tablet').
- **email** (null | string) - Optional - The email address of the user.
- **is_debug** (boolean) - Required - Indicates if the app is running in debug mode.
- **is_sandbox** (boolean) - Required - Indicates if the app is running in a sandbox environment.
- **locale** (string) - Required - The locale of the user's device.
- **need_paywalls** (boolean) - Required - Flag indicating if paywalls are needed.
- **need_placements** (boolean) - Required - Flag indicating if placements are needed.
- **os_version** (string) - Required - The version of the operating system.
- **page_url** (string) - Required - The URL of the current page.
- **platform** (string) - Required - The platform the app is running on (e.g., 'iOS', 'Android').
- **referrer** (null | string) - Optional - The referrer URL.
- **start_app_version** (string) - Required - The version of the app when it was first started.
- **time_zone** (string) - Required - The time zone of the user's device.
- **user_agent** (string) - Required - The user agent string of the device's browser.
- **user_id** (string) - Optional - A unique identifier for the user.
```

--------------------------------

### Paywall Interface Definition

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Paywall.html

The Paywall interface defines the properties available for a paywall object in the apphud.js SDK.

```APIDOC
## Interface: Paywall

### Description
Represents a paywall configuration object containing identifiers, experiment data, and associated products.

### Properties
- **default** (boolean) - Indicates if this is the default paywall.
- **experiment_id** (null | string) - The ID of the experiment associated with the paywall, if any.
- **id** (string) - The unique identifier of the paywall.
- **identifier** (string) - The human-readable identifier for the paywall.
- **items** (Product[]) - An array of products associated with this paywall.
- **json** (string) - The raw JSON representation of the paywall configuration.
```

--------------------------------

### Update Variables Dynamically

Source: https://github.com/apphud/apphud.js/blob/master/docs/index.html

Refresh UI elements with data-aph-var attributes after changing the selected product.

```JavaScript
// Update variables after selecting a productapphud.selectPlacementProduct("main_web", 1); // Select a productapphud.operateVariables(); // Refresh displayed variables
```

--------------------------------

### Config Type Alias

Source: https://github.com/apphud/apphud.js/blob/master/docs/types/Config.html

The Config object is used to configure the Apphud.js SDK. It includes settings for API keys, debug mode, HTTP retries, language, and more.

```APIDOC
## Type Alias Config

Config: {
    _baseURL: string;
    _stripeLiveKey: string;
    _stripeTestKey: string;
    apiKey: string;
    debug: boolean;
    headers: HeadersInit;
    httpRetriesCount: number;
    httpRetryDelay: number;
    language: string;
    redirectDelay: number;
    websiteVersion: string;
}

*   Defined in types/apphud.ts:195
```

--------------------------------

### LifecycleEvent Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/LifecycleEvent.html

The LifecycleEvent interface defines the structure for lifecycle events within the Apphud SDK, including event data and the associated payment provider.

```APIDOC
## Interface LifecycleEvent

### Description
Represents a lifecycle event within the Apphud SDK, containing event-specific data and the payment provider that triggered it.

### Properties

#### event
- **event** (any) - Description of the event data.

#### paymentProvider
- **paymentProvider** ([PaymentProviderKind](../types/PaymentProviderKind.html)) - The kind of payment provider associated with the event.

### Defined in
types/paymentForm.ts:23
```

--------------------------------

### Error Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Error.html

Defines the structure for error objects within the Apphud.js library.

```APIDOC
## Interface Error

### Description
Represents an error object with an ID and a title.

### Properties
- **id** (string) - Required - A unique identifier for the error.
- **title** (string) - Required - A human-readable title describing the error.

### Defined in
types/api.ts:1
```

--------------------------------

### BackendResponse Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/BackendResponse.html

The BackendResponse interface defines the standard structure for API responses, containing a data object and an array of errors.

```APIDOC
## BackendResponse Interface

### Description
The BackendResponse interface represents the standard structure returned by the Apphud backend services.

### Properties
- **data** (object) - Contains the response payload.
  - **meta** (object) - Metadata associated with the request.
  - **results** (object) - The primary result data.
- **errors** (Array<Error>) - A list of error objects if the request failed.
```

--------------------------------

### Interface: Country

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/Country.html

Defines the structure of a country object used in the application.

```APIDOC
## Interface: Country

### Description
Represents a country entity with a unique code and a display name.

### Properties
- **code** (string) - The ISO country code.
- **name** (string) - The full name of the country.

### Definition
Defined in `types/paymentForm.ts:18`
```

--------------------------------

### AttributionData Type Alias

Source: https://github.com/apphud/apphud.js/blob/master/docs/types/AttributionData.html

Defines the structure of attribution data used within the Apphud.js SDK.

```APIDOC
## Type Alias AttributionData

### Description
Represents attribution data as a key-value map where keys are strings and values can be either strings or arrays of strings.

### Type Definition
`AttributionData: Record<string, string | string[]>`

### Defined In
types/apphud.ts:30
```

--------------------------------

### ApphudHash Type Alias

Source: https://github.com/apphud/apphud.js/blob/master/docs/types/ApphudHash.html

Defines the structure of the ApphudHash type used for generic key-value storage.

```APIDOC
## Type Alias: ApphudHash

### Description
A type alias representing a hash object with string keys and any value type.

### Definition
```typescript
ApphudHash: { [key: string]: any; }
```

### Location
Defined in `types/apphud.ts:6`
```

--------------------------------

### Interface: SuccessMessage

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/SuccessMessage.html

The SuccessMessage interface defines the structure of a standard success response object.

```APIDOC
## Interface: SuccessMessage

### Description
Represents a standard success response object used within the Apphud SDK.

### Properties
- **success** (boolean) - Indicates whether the operation was successful.
```

--------------------------------

### LifecycleEventCallback Type Alias

Source: https://github.com/apphud/apphud.js/blob/master/docs/types/LifecycleEventCallback.html

Defines the callback function signature for handling lifecycle events in Apphud.js.

```APIDOC
## LifecycleEventCallback

### Description
A type alias representing a callback function that handles lifecycle events within the payment form integration.

### Definition
LifecycleEventCallback: ((event: LifecycleEvent) => void)

### Location
Defined in types/paymentForm.ts:28
```

--------------------------------

### Config Type Alias Definition

Source: https://github.com/apphud/apphud.js/blob/master/docs/types/Config.html

Defines the structure for configuration objects used in Apphud.js. It specifies properties for API keys, network settings, and localization.

```typescript
Config: { 
    _baseURL: string; 
    _stripeLiveKey: string; 
    _stripeTestKey: string; 
    apiKey: string;
    debug: boolean;
    headers: HeadersInit;
    httpRetriesCount: number;
    httpRetryDelay: number;
    language: string;
    redirectDelay: number;
    websiteVersion: string;
}
```

--------------------------------

### ApphudFunc Type Alias

Source: https://github.com/apphud/apphud.js/blob/master/docs/types/ApphudFunc.html

Defines the ApphudFunc type alias used for callback functions within the SDK.

```APIDOC
## Type Alias: ApphudFunc

### Description
A type alias representing a function that accepts any number of arguments and returns void.

### Definition
`type ApphudFunc = (...args: any[]) => void`

### Location
Defined in `types/apphud.ts` at line 8.
```

--------------------------------

### EventData Interface

Source: https://github.com/apphud/apphud.js/blob/master/docs/interfaces/EventData.html

The EventData interface defines the structure for event objects in apphud.js. It includes properties for device ID, event ID, insertion ID, event name, custom properties, timestamp, user ID, and user properties.

```APIDOC
## Interface EventData

### Description
Defines the structure for event objects.

### Properties

- **device_id** (string) - Optional - The ID of the device.
- **id** (string) - Optional - The unique identifier for the event.
- **insert_id** (string) - Optional - The ID used for insertion.
- **name** (string) - Required - The name of the event.
- **properties** (ApphudHash) - Required - Custom properties associated with the event.
- **timestamp** (number) - Optional - The timestamp when the event occurred.
- **user_id** (string) - Optional - The ID of the user associated with the event.
- **user_properties** (ApphudHash) - Optional - Custom properties associated with the user.
```

--------------------------------

### Define LifecycleEventName type alias

Source: https://github.com/apphud/apphud.js/blob/master/docs/types/LifecycleEventName.html

This type alias enumerates the specific string values used for lifecycle events in the application.

```typescript
LifecycleEventName:  
	| "payment_form_initialized"  
	| "ready"  
	| "payment_form_ready"  
	| "payment_success"  
	| "payment_failure"  
	| "product_changed"
```

--------------------------------

### LifecycleEvents Type Alias

Source: https://github.com/apphud/apphud.js/blob/master/docs/types/LifecycleEvents.html

The LifecycleEvents type alias defines the structure for event listeners, where each key is a string representing an event name, and the value is an array of LifecycleEventCallback functions.

```APIDOC
## Type Alias: LifecycleEvents

### Description
Represents an object where keys are event names (strings) and values are arrays of callback functions.

### Type Definition
```typescript
{
    [eventName: string]: LifecycleEventCallback[];
}
```

### Defined In
types/paymentForm.ts:7
```