> ## Documentation Index
> Fetch the complete documentation index at: https://supertab-feature-merchant-auth-change-again.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Off-App Purchases

> Enable seamless purchases through your app with a simple redirect flow.

## Overview

Off-App Purchases let you generate a URL that your users can use to purchase a specific offering from your web or mobile app.

When opening the Off-App Purchase URL, customers sign up and confirm their purchase with Supertab. After completion,
Supertab redirects the customer back to your app.

## Prerequisites

Before generating a URL, make sure you have:

* A <a href="/supertab-experiences/sites">Website</a> with a URL you wish to use as the post-purchase redirect destination.
* An <a href="/supertab-experiences/products-offerings-pricing">Offering</a> available for purchase.

## Creating a Purchase Link

Include the following required query parameters to generate a valid purchase link:

* `client_id` – A live or test client ID associated with the <a href="/supertab-experiences/sites">Website</a> you created.
* `offering_id` – The ID of the <a href="/supertab-experiences/offerings">Offering</a> the user is purchasing.

```text Purchase URL theme={null}
https://purchase.supertab.co/?client_id=client.your_client&offering_id=offering.your_offering
```

### Metadata

You can optionally include a `metadata` parameter with custom key-value pairs. This metadata:

* Is returned in the `metadata` query parameter during the redirect back to your app.
* Is also attached to the purchase object after confirmation.

**How to encode metadata:**

1. Format metadata as a URL query string (e.g. `user_id=123&nonce=456`).
2. Then encode using URL component encoding (e.g. `user_id%3D123%26nonce%3D456`).

<CodeGroup>
  ```javascript js theme={null}
  const metadata = {
      user_id: "123",
      nonce: "456",
      timestamp: Date.now()
  };

  const queryString = new URLSearchParams(metadata).toString();
  const encodedMetadata = encodeURIComponent(queryString);

  const purchaseUrl = `https://purchase.supertab.co/?client_id=client.your_client&offering_id=offering.your_offering&metadata=${encodedMetadata}`;
  ```
</CodeGroup>

**Example with metadata:**

```text Purchase URL with Metadata theme={null}
https://purchase.supertab.co/?client_id=client.your_client&offering_id=offering.your_offering&metadata=user_id%3D123%26nonce%3D456
```

## Handling the Redirect

The customer is redirected to your app when they have completed the purchase flow.

| Parameter     | Description                                                                                                                            | Example                                         |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| `purchase_id` | The ID of the purchase.                                                                                                                | "purchase.cf637646-71a4-430d-aaea-a66f1a48a83c" |
| `status`      | The purchase status. <ul><li>`completed` – the purchase was successful</li><li>`abandoned` – the user abandoned the purchase</li></ul> | "completed"                                     |
| `offering_id` | The ID of the selected offering, passed in the original purchase URL.                                                                  | "offering.4df706b5-297a-49c5-a4cd-2a10eca12ff9" |
| `metadata`    | The custom key-value metadata you included in the original URL.                                                                        | "user\_id=123\&nonce=456"                       |