[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex checkout ui settings in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/updates/release-notes)

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/updates/release-notes)

Checkout UI Settings

The Checkout UI Settings app allows you to customize your store's through the terminal and the [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install).

The main advantage of using the app instead of the [store's admin](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/configure-template-in-smartcheckout-update--ToTE5XB39t0SwtHgpgwSv?locale=en) for this customization is that your Checkout scripts will behave as configurations for platform apps.

In practice, it means that Checkout UI Settings allows A/B testing in your store's scripts, in addition to the possibility of quick rollbacks for old scripts (i.e. scripts pertaining to older Checkout UI Settings app's versions).

## Configuration

1. Using your terminal and the [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install), log into the desired account;
2. Run `vtex list` to access the list of apps that are already installed on the account you're working on. If the Checkout UI Settings option already exists, you can skip to step 7 of this step-by-step;
3. If the Checkout UI Settings app was not found in the list of installed apps, run the `vtex init` command;
4. Select the `checkout-ui-settings` option;
5. Open the `checkout-ui-settings` app in whichever code editor you prefer;
6. In the `manifest.json` file, change the predefined default value `vendor` to the name of the account in which you want to install the app;
7. In the `checkout-ui-custom` folder, create the files in which the scripts will be included, just as you would do in the [admin's interface](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/configure-template-in-smartcheckout-update--ToTE5XB39t0SwtHgpgwSv?locale=en%23configure-code). Notice that a few defaults files already exist in the `checkout-ui-custom` folder, files which you can use to insert the scripts;
8. According to the Checkout customization you are looking for, open the most suitable file and insert the desired scripts;
9. Save your changes. Then, [publish](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-publishing-an-app) the app's new version;
10. Still logged into the desired account, [create a production workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-a-production-workspace) and [install the app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app);
11. If everything is working as expected, [promote the workspace to master](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-promoting-a-workspace-to-master).

## Modus Operandi

Once the app is deployed and installed in the account, every scripts contained in it will be automatically linked to your store and used to [build the templates](https://read.calvincode.net/reader?url=https://help.vtex.com/tutorial/configure-template-in-smartcheckout-update--ToTE5XB39t0SwtHgpgwSv?locale=en%23configuring-templates-from-the-code-menu) to customize your Checkout.

> If a prior app version was already installed and your want to change the scripts linked to it, you'll need to repeat the already existing code and thereafter launch the app's new version containing the changes you just did. Housekeeper is responsible for updating app versions in the accounts it's installed.

> You can create a workspace and install the app there. While using the app, you will need to apply your changes and copy/paste the content of the files to your portal.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/functional-apps/vtex-checkout-ui-settings.md)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/guides/vtex-checkout-ui-settings%23configuration)

[Modus Operandi](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/guides/vtex-checkout-ui-settings%23modus-operandi)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Store-Framework-Apps/functional-apps/vtex-checkout-ui-settings.md)

Copy page

On this page

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/guides/vtex-checkout-ui-settings%23configuration)

[Modus Operandi](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-checkout-ui-settings/docs/guides/vtex-checkout-ui-settings%23modus-operandi)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex io documentation cleaning cart data on log out in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-dealing-with-events)

[Collecting user session data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-collecting-user-session-data)

[Cleaning cart data on log out](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out)

[Improving filter navigator experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-improving-filter-navigator-experience)

[Using events to trigger side effects on store components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-using-events-to-trigger-side-effects-on-store-components)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/faststore)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework)

[Store Theme](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-store-theme)

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/getting-started-3)

Concepts

[Building pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-building-pages)

[Using components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-using-components)

[Using advanced layouts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-using-advanced-layouts)

[Working with Site Editor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-working-with-site-editor)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-styling)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-dealing-with-events)

[Collecting user session data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-collecting-user-session-data)

[Cleaning cart data on log out](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out)

[Improving filter navigator experience](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-improving-filter-navigator-experience)

[Using events to trigger side effects on store components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-using-events-to-trigger-side-effects-on-store-components)

[Configuring Analytics (Google Tag Manager)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-configuring-analytics-google-tag-manager)

[Setting up cross-border stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-setting-up-cross-border-stores)

[Handling internationalization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-multi-language-stores)

[Routing](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-routing)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-managing-performance)

[Improving store accessibility with semantic HTML migration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-semantic-html-migration)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-go-live)

[Updating live stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-updating-live-stores)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/storefront-best-practices)

---

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/storefront-development)

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework)

[Dealing with events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/store-framework-dealing-with-events)

[Cleaning cart data on log out](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out)

Cleaning cart data on log out

The VTEX shopping cart default behavior is to keep the cart alive until an order is placed. When this happens, a new cart is created. If a business rule requires a new cart every time a user logs out, we can use the [Session Watcher](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-collecting-user-session-data) to clear cart information.

> It is not possible to get a brand new cart, but we can repurpose the current cart by removing any existing information on it.

This document will guide you on how to use the [Session Watcher app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-collecting-user-session-data) to clean up an existing cart during logout.

## Clients

VTEX IO Service Context gives you access to external clients. Clients are additional services with methods that give you access to different core applications. Here is a list of out-of-the-box client services available.

* `apps`
* `assets`
* `billing`
* `billingMetrics`
* `builder`
* `events`
* `id`
* `licenseManager`
* `masterdata`
* `messagesGraphQL`
* `metadata`
* `registry`
* `router`
* `segment`
* `settings`
* `session`
* `tenant`
* `vbase`
* `workspaces`
* `catalogGraphQL`
* `paymentProvider`

You can always extend your App Clients if you need to give it access to external or internal providers.

## Checkout Client

The VTEX IO Service Context does not have an out-of-the-box checkout client. The following steps will guide you on this setup of a client from our internal APIs.

1. Create a new `./node/clients/checkout.ts` file where you can keep all the methods for the `Checkout` class. This class will extend **JanusClient** (VTEX’s internal router), you can import it from `@vtex/api`. It should look like the example below. Types are also imported from `@vtex/api`.

`1

import type { InstanceOptions, IOContext } from ‘@’vtex/api’

2

import { JanusClient } from ‘@vtex/api’

3

4

export class Checkout extends JanusClient {

5

 constructor(context: IOContext, options?: InstanceOptions) {

6

 super(context, { …options })

7

 }

8

}

`

1. These internal APIs are going through `portal.vtexcommercestable.com.br/api/*`, which means we need to declare it as an `outbound-access` in our `manifest.json` file under "policies".

`1

"policies": [

2

 {

3

 "name": "outbound-access",

4

 "attrs": {

5

 "host": "portal.vtexcommercestable.com.br",

6

 "path": "/api/*"

7

 }

8

},

`

The same thing is required if you're accessing an external endpoint. Always add the `host` and `path` as an `outbound-access`.

> Do not use protocol in the `host` (http, https). The `host` does not support wildcard within the address. It can be either fixed `host` or only `*` , never both. The `path` supports wildcard.

1. Now that you have an initial class setup, you can let your application know that it exists. Do this by importing it to the `Clients` constructor under `./node/clients/index.ts`

`1

import { IOClients } from ‘@vtex/api’

2

3

import { Checkout } from ‘@vtex/api’

4

5

// Extend the default IOClients implementation with our own custom clients.

6

export class Clients extends IOClients {

7

 public get checkout() {

8

 return this.getOrSet(‘checkout’, Checkout)

9

 }

10

}

`

The checkout client will now be available to our handler, just like the others.

`1

{

2

 "name": "outbound-access",

3

 "attrs": {

4

 "host": "portal.vtexcommercestable.com.br",

5

 "path": "/checkout/changeToAnonymousUser/*"

6

}

`

1. Now you need to create your methods. The first thing you need is to change our `orderForm` (shopping cart) to anonymous. This will erase the `clientProfileData`, but will not remove the items from the cart, which will be done in another moment.

This method uses a path starting with `/checkout`, which means we need to include it to our policy by creating a new `outbound-access` entry. Back to`checkout.ts`, add a new public method inside the `Checkout` class.

`` 1

public changeToAnonymous = (orderFormId: string) => {

2

 return this.http.getRaw(`/checkout/changeToAnonymousUser/$\{orderFormId\}`, {

3

 metric ‘change-to-anonymous’,

4

 })

5

}

 ``

> `JanusClient` gives you access to `http` and its methods. This example uses `getRaw`, which will return the entire response, including `httpCode`, headers, etc. If you do not need it, you can use only `get` instead. This `metric` property is used for logging, it is not not strictly necessary.

1. Create the other methods, `orderForm`, and `updateItems`, as shown below.

`` 1

public orderForm = (orderFormId: string) => {

2

 return this.http.post(

3

 `/api/checkout/pub/orderForm/$\{orderFormId\}`,

4

 { expectedOrderFormSections: [‘items’] },

5

 {

6

 metric: ‘get-orderForm’,

7

 }

8

 )

9

}

10

11

public updateItems = (orderFormId: string, orderItems: any) => {

12

 return this.http.post(

13

 `/api/checkout/pub/orderForm/$\{orderFormId\}/items/update`,

14

 { orderItems } ,

15

 {

16

 Metric: ‘update-orderForm-items’,

17

 }

18

 )

19

}

 ``

### Clear Cart handler

Back to `./resolvers/index.ts` load the checkout client from the context of our method `clearCart` and expose both `orderFormId` and `email` from the request body.

The logical flow is:

![{"base64":"  ","img":{"width":1672,"height":1428,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":218160,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-cleaning-cart-data-on-log-out-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-cleaning-cart-data-on-log-out-0.png)

You should have code similar to the example below.

`1

/* eslint-disable no-console */

2

import { json } from ‘co-body’

3

4

export const resolvers = {

5

 Routes: {

6

 clearCart: async (ctx: Context) => {

7

 Const {

8

 req,

9

 clients: { checkout },

10

 } = ctx

11

12

 const body: any = await json(req)

13

 const email = body?.authentication?.storeUserEmail?.value ?? null

14

 const orderFormId = body?.checkout?.orderFormId?.value ?? null

15

16

 console.log(‘clearCart =>’, body)

17

18

 ctx.set(‘Content-Type, ‘application/json’)

19

 ctx.set(‘Cache-Control’, ‘no-cache, no-store’)

20

21

 const res = {

22

 public: {

23

 demo: {

24

 value: email ? ‘User Authenticated’ : ‘User not authenticated’,

25

 },

26

 },

27

 }

28

29

 // If user is not authenticated, and we have an orderFormId

30

 if (!email && orderFormId) {

31

 // Get the current orderForm data

32

 const orderform: any await checkout.orderForm(orderFormId)

33

34

 // Only if we have a user assigned to this orderForm

35

 if (orderForm?.clientProfileData?.email) {

36

 // Change to anonymous

37

 await checkout.changeToAnonymous(orderFormId).catch((err) => {

38

 if (err.response.status >= 400) {

39

 console.log(‘Cart response error =>’, err.response.statusText)

40

 } else {

41

 console.log(‘Cart response all good =>’, err.response.status)

42

 }

43

 })

44

45

 /*

46

 * To remove items from the cart

47

 * If we have items in the cart

48

 */

49

 if (orderForm?.items?.length) {

50

 // Create a orderItems array with the item position and new quantity set to 0

51

 const orderItems = orderForm.items.map((_: any, index: number) => {

52

 return {

53

 index,

54

 quantity: 0,

55

 }

56

 })

57

58

 // Update the cart items with the new quantity

59

 await checkout.updateItems(orderFormId, orderItems).catch((err) => {

60

 console.log(‘Error removing all items =>’, err)

61

 })

62

 }

63

 }

64

 }

65

66

 ctx.response.body = res

67

 ctx.response.status = 200

68

 },

69

 },

70

}

`

> Don't forget to change the vendor in your `./manifest.json` file.

To link the app, run this command:

`1

vtex link

`

If you wish, you can [download this complete example](https://read.calvincode.net/reader?url=https://raw.githubusercontent.com/vtexdocs/dev-portal-content/refs/heads/main/files/vtex-io/session-watcher-cart-cleanup.zip).

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-cleaning-cart-data-on-log-out.md)

[Collecting user session data« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out//docs/guides/vtex-io-documentation-collecting-user-session-data)[Improving filter navigator experienceNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out//docs/guides/vtex-io-documentation-improving-filter-navigator-experience)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out%23clients)

[Checkout Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out%23checkout-client)

[Clear Cart handler](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out%23clear-cart-handler)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Storefront-Guides/concepts-1/vtex-io-documentation-cleaning-cart-data-on-log-out.md)

Copy page

On this page

ON THIS PAGE

[Clients](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out%23clients)

[Checkout Client](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out%23checkout-client)

[Clear Cart handler](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out/docs/guides/vtex-io-documentation-cleaning-cart-data-on-log-out%23clear-cart-handler)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides enable partial cancellation in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/how-to-customize-vtex-sales-app)

[Change VTEX Sales App language](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/hide-anonymous-customer-option)

[Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/define-payment-methods-displayed-on-vtex-sales-app)

[Enable the Observation field in the order screen](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-the-remarks-field-in-the-order-screen)

[Enable the sales associate code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/sales-associate-code)

[Enable cart transfer and capture between devices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/force-stock-availability)

[Add extra text to the order summary print](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/add-extra-text-to-the-order-print)

[Hide Print order and Reprint receipt buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/hide-print-order-and-reprint-receipt-buttons)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/hide-cancellation-buttons)

[Allow manual prices on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/allow-manual-prices-on-vtex-sales-app)

[Integration VTEX Sales App Local stock sale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/integration-vtex-sales-app-local-stock-sale)

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides)

VTEX Sales App

[How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/how-to-customize-vtex-sales-app)

[Enable partial cancellation for Debit or Credit Direct sales](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-partial-cancellation)

Enable partial cancellation for Debit or Credit Direct sales

By default, VTEX Sales App does not show the `Cancel order` in the [Order placed page](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-sales-app-using-the-app--4BYzQIwyOHvnmnCYQgLzdr/TrTtmCGVLTaCSmowGFYDI) when the selected payment method is Debit Direct sale or Credit Direct sale. It only shows the `Cancel total order` button by default in these cases.

If you want to enable partial cancellation of orders — the ability to cancel individual packages — for these payment methods, you must edit the `checkout-instore-custom.js` file as described below. Check out the [How to customize VTEX Sales App guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/how-to-customize-vtex-sales-app) for further information on how to access this file.

## Prerequisites

To enable this functionality, make sure that you meet the following prerequisites:

* Having Debit Direct sale or Credit Direct sale configured as payment conditions, as described in the [VTEX Sales App - Payments](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-sales-app-payments--43B4Nr7uZva5UdwWEt3PEy/2liigRors32hzqBNs2M1Oa) guide.
* Create the filters that define which payment methods will be displayed on VTEX Sales App, as described in the [Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/define-payment-methods-displayed-on-vtex-sales-app) guide.

## Edit the `checkout-instore-custom.js` file

To enable partial cancellation for these payment methods, the `payments` object within `window.INSTORE_CONFIG` must contain the following property:

`` 1

{

2

 "data": {

3

 "0-0": "`partialCancellationEnabled`",

4

 "0-1": "array",

5

 "0-2": "You should add payment conditions that will have partial cancellation enabled on inStore in this array",

6

 "h-0": "Property",

7

 "h-1": "Type",

8

 "h-2": "Description"

9

 },

10

 "cols": 3,

11

 "rows": 1

12

}

 ``

The indication of each payment condition is made by the payment condition ID. Check the section on [Where to find the payment condition ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/define-payment-methods-displayed-on-vtex-sales-app%23where-to-find-the-payment-condition-id) in the [Define payment methods displayed on VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/define-payment-methods-displayed-on-vtex-sales-app) guide for more details.

In the example code below, partial cancellation will be enabled for Debit Direct Sale (whose ID is `44`) and Credit Direct Sale (whose ID is `45`).

`1

window.INSTORE_CONFIG = {

2

 payments: {

3

 partialCancellationEnabled: [

4

 '44', // Debit Direct Sale

5

 '45', // Credit Direct Sale

6

 ],

7

 }

8

}

`

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F25390429%3Fv%3D4%26w=64%26q=75)](https://github.com/karenkrieger)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Sales-App/how-to-customize-vtex-sales-app/enable-partial-cancellation.md)

[Hide Print order and Reprint receipt buttons« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation//docs/guides/hide-print-order-and-reprint-receipt-buttons)[Hide cancellation buttonsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation//docs/guides/hide-cancellation-buttons)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F25390429%3Fv%3D4%26w=64%26q=75)](https://github.com/karenkrieger)

ON THIS PAGE

[Prerequisites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-partial-cancellation%23prerequisites)

[Edit the checkout-instore-custom.js file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-partial-cancellation%23edit-the-checkout-instore-customjs-file)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/VTEX-Sales-App/how-to-customize-vtex-sales-app/enable-partial-cancellation.md)

Copy page

On this page

ON THIS PAGE

[Prerequisites](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-partial-cancellation%23prerequisites)

[Edit the checkout-instore-custom.js file](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-partial-cancellation/docs/guides/enable-partial-cancellation%23edit-the-checkout-instore-customjs-file)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)