# 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/