> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supertab.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Supertab.createPaywall

> API reference for `Supertab.createPaywall`

## Parameters

| Key                | Type     | Required | Description                                                         |
| :----------------- | :------- | :------- | :------------------------------------------------------------------ |
| `experienceId`     | `string` | Yes      | ID of the Paywall experience created in the Business Portal         |
| `purchaseMetadata` | `object` | No       | Key-value pairs of custom information associated with the purchase. |

## Returns

A promise that resolves to the initial state of the Paywall and methods for showing it to users. Type of the response is [`PaywallExperienceResult`](#paywallexperienceresult).

| Field          | Type                                    | Description                                                                                                                                     |
| :------------- | :-------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- |
| `initialState` | `ExperienceStateSummary`                | The state of the paywall immediately after config is loaded, can be used to check if the user is logged in or has a priort entitlement already. |
| `logIn`        | `() => Promise<ExperienceStateSummary>` | Launch an auth flow immediately, if necessary. The returned promise resolves when the login flow is completed.                                  |
| `show`         | `() => Promise<ExperienceStateSummary>` | Display the paywall to the user, the returned promise resolves when the paywall closes.                                                         |
| `destroy`      | `() => void`                            | Clean up and remove all Supertab elements from the DOM.                                                                                         |

## Example

```javascript theme={null}
const supertabClient = new Supertab({clientId: "client.your_client"});

const supertabPaywall = await supertabClient.createPaywall({
    experienceId: "experience.your_experience"
});
```

## Types

### `ExperienceStateSummary`

```typescript ExperienceStateSummary type definition theme={null}
interface ExperienceStateSummary {
    priorEntitlement: EntitlementStatus[] | null;
    authStatus: AuthStatus;
    purchase: Purchase | null;
    purchasedOffering: Offering | null;
    tab: Tab | null;
    paymentResult: boolean;
}

type EntitlementStatus = {
    contentKey: string;
    hasEntitlement: boolean;
    expires: string;
    recursAt: Date | null;
}

enum AuthStatus {
    MISSING = "missing",
    EXPIRED = "expired",
    VALID = "valid"
}

type Purchase = {
    id: string;
    offeringId?: string | null;
    purchasedAt: string | null;
    completedAt: string | null;
    description: string;
    price: Price;
    status: PurchaseStatus;
    metadata: Metadata;
    entitlementStatus: EntitlementStatus | null;
}

type Metadata = Record<string, string | number | boolean | null>;

enum PurchaseStatus {
    PENDING = "pending",
    COMPLETED = "completed",
    ABANDONED = "abandoned"
}

type Price = {
    amount: number;
    currency: Currency;
}

type Currency = {
    code: string;
    symbol: string;
    name: string;
    baseUnit: number;
}

type Offering = {
    id: string;
    description: string;
    entitlementDetails: EntitlementDetails;
    price: Price;
    isPayNow: boolean;
}

type EntitlementDetails = {
    contentKey: string;
    duration: string;
    isRecurring: boolean;
}

type Tab = {
    testMode: boolean;
    currency: Currency;
    total: Price;
    limit: Price;
    purchases: Purchase[];
}
```

### `PaywallExperienceResult`

```typescript PaywallExperienceResult type definition theme={null}
interface PaywallExperienceResult {
    show: () => Promise<ExperienceStateSummary>;
    logIn: () => Promise<ExperienceStateSummary>;
    destroy: () => void;
    initialState: ExperienceStateSummary;
}
```