# Overview The Headless API works with your existing packages, coupons, sales & creator codes. If you haven't already done so, we recommend having a read of our [quick start guide](https://docs.tebex.io/developers/getting-started) before beginning integration. You can query the Headless API to retrieve your packages/categories, build a basket for a user, and direct them to checkout - all from within your own frontend implementation (be that a website or in-game). The Headless API can be used with [Tebex.js](https://docs.tebex.io/developers/tebex.js) for a fully embedded checkout experience without the user ever leaving your own website. ## Headless API Flow Below is the expected flow your application should follow when utilizing the Headless API. For a list of all endpoints, please see the [Endpoints](https://docs.tebex.io/developers/headless-api/endpoints) page. ### Packages & Listings You can retrieve your store's listings in JSON format and display them however you wish: {% openapi src="" path="/accounts/{token}/categories" method="get" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/categories?includePackages=1" method="get" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/categories/{categoryId}" method="get" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/categories/{categoryId}?includePackages=1" method="get" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/packages/{packageId}" method="get" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/packages" method="get" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} ### Creating Baskets In order to purchase items, a basket must be created for the customer. Create a basket and allow the customer to login with their username or other OAuth login mechanism (e.g Steam or FiveM). {% hint style="info" %} {% endhint %} {% openapi src="" path="/accounts/{token}/baskets" method="post" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/baskets/{basketIdent}/auth?returnUrl={returnUrl}" method="get" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} ### Adding and Removing Packages You can add or remove packages programmatically to the created basket via the API as needed when the user interacts with your application. {% openapi src="" path="/baskets/{basketIdent}/packages" method="post" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/baskets/{basketIdent}/packages/remove" method="post" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} ### Coupons, Gift Cards, and Creator Codes Once all packages and quantities are selected, apply any relevant coupons, gift cards, or creator codes with these endpoints. {% openapi src="" path="/accounts/{token}/baskets/{basketIdent}/creator-codes" method="post" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/baskets/{basketIdent}/creator-codes/remove" method="post" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/baskets/{basketIdent}/giftcards" method="post" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/baskets/{basketIdent}/giftcards/remove" method="post" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/baskets/{basketIdent}/coupons" method="post" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} {% openapi src="" path="/accounts/{token}/baskets/{basketIdent}/coupons/remove" method="post" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} ### Checkout When the user is ready to checkout, fetch the basket and direct the user to the `links.checkout` URL. {% openapi src="" path="/accounts/{token}/baskets/{basketIdent}" method="get" %} [headless-api.yaml](https://924803319-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaRz9HUAxrYuZsSDWhYnu%2Fuploads%2F7Z5I0T5QbbgoGzyObgml%2Fheadless-api.yaml?alt=media\&token=62e71089-ed13-428f-828e-d0f3eeee20b9) {% endopenapi %} ## Starter Template To get started with your own integration of the Headless API you're able to use our example integration built upon Nuxt.js, Vue & Typescript. Take a look at the [tebexio/Headless-Template](https://github.com/tebexio/Headless-Template) GitHub repo to begin. ## Examples The following websites are built using the Headless API - hosted via our customers own infrastructure, using frontend frameworks such as Vue or React.
MCC Islandhttps://store.mccisland.net
mccisland.pnghttps://store.mccisland.net/
Power Scriptshttps://power-scripts.comlogo.pnghttps://power-scripts.com/
--- # 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://docs.tebex.io/developers/headless-api/overview.md?ask= ``` 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.