{"section":"tutorials","requestedLocale":"en","requestedSlug":"vtex-sales-app-configuring-the-checkout-instore-custom-js-file","locale":"en","slug":"vtex-sales-app-configuring-the-checkout-instore-custom-js-file","path":"docs/en/tutorials/apps/vtex-sales-app/vtex-sales-app-configuring-the-checkout-instore-custom-js-file.md","branch":"main","content":"The `checkout-instore-custom.js` file is used to customize **VTEX Sales App** settings. This article describes the properties available in this file and how to configure them. To find the file, follow the steps below:\n\n1. In the VTEX Admin, go to **Store Settings > Storefront > Checkout** or type **Checkout** in the search field.\n2. Click the gear icon of the main account where **Sales App** was installed.\n3. Click the **Code** tab.\n4. In the **Files** section, you'll see the `checkout-instore-custom.js` file.\n\n## Language and locale\n\n- `window.LOCALE_MESSAGES.locale`: Defines the language and locale used in **Sales App**, such as US English (`'en-us'`) or Spanish from Spain (`'es-es'`).\n\n## Configuration by account\n\n- `window.INSTORE_CONFIG_BY_ACCOUNT`: Object that maps stores and accounts to specific settings.\n  - **Key:** Store ID and name (example: `\"1\"` and `\"storename\"`).\n  - `name`: VTEX account name.\n- `accounts`: Located inside `INSTORE_CONFIG`, receives the value of `window.INSTORE_CONFIG_BY_ACCOUNT` and associates **Sales App** with the configured stores.\n\n## Authentication\n\n- `auth.oAuthProviderName`: Defines the OAuth authentication provider used to log in to **Sales App** (example: `'Google'`).\n\n## Checkout flow and navigation\n\n- `enableNewCheckout`: Activates the new **Sales App** checkout flow. The default value of this flag is `false`. When the merchant completes the initial setup, this flag is saved as `true` in the store.\n\n  > ⚠️ Don't change the value of `enableNewCheckout`. **Sales App** automatically records this value after the initial setup, and a manual change can disrupt the checkout flow and cause issues when completing orders.\n\n- `enableExplore`: Activates the screen with the **Explore** experience (custom display and offers).\n\n- `initialPage`: Sets the page that opens first after login. Accepted values are:\n\n  | Value              | Route                      | Opens                                                               |\n  | :----------------- | :------------------------- | :------------------------------------------------------------------ |\n  | `'advertisements'` | `/checkout/advertisements` | Custom display and offers (the **Explore** page) |\n  | `'sale'`           | `/sale`                    | Sales flow (deprecated route)                    |\n  | `'turn-list'`      | `/turn-list`               | Sales associate tracking                                            |\n  | `'b2b'`            | `/b2b`                     | B2B homepage                                                        |\n\n- `pathAfterLogin`: Determines the internal route the user is directed to after logging in (example: `'/sale'`). This flag has been deprecated and replaced by `initialPage`. It still takes precedence over `initialPage`. If the store has `pathAfterLogin` in the file, `initialPage` is ignored.\n\n  > ⚠️ Use `initialPage` instead of `pathAfterLogin`.\n\n- `topbarTitle`: Defines the text displayed in the **Sales App** top bar (example: `'Store name'`).\n\n- `enableChangePrice`: When set to `true`, allows the sales associate to manually change the price in **Sales App**. When `false`, it doesn't allow it. It's related to the `manualPrice` field in the [OrderForm](https://developers.vtex.com/docs/guides/orderform-fields).\n\n## Sales and tracking\n\n- `sales.enabled`: Activates the sales feature in **Sales App**.\n\n- `salesAssociateTracking.enabled`: Activates sales tracking by sales associate, so orders are associated with a sales associate code.\n\n  > ⚠️ Both `sales.enabled` and `salesAssociateTracking.enabled` need to be set to `true` for **Sales App** to work correctly.\n\n- `salesPerformance.enabled`: When set to `true`, displays the store's performance monitor in the new **Sales App** menu. When `false`, it doesn't display it.\n\n- `enableStorePerformance`: When set to `true`, displays the store's performance in the sidebar of the previous version of **Sales App**. When `false`, it doesn't display it. This flag is independent of `salesPerformance.enabled`.\n\n- `showItemOriginSeller`: When set to `true`, displays the text **partner store** on items sold by an external seller. When `false`, it doesn't display it.\n\n## Product search (`search`)\n\n- `search.vtexSearch`: When set to `true`, uses [**Intelligent Search**](/en/docs/tutorials/intelligent-search-overview). When `false` or absent from the file, uses [**VTEX Search (Legacy)**](/en/docs/tutorials/how-does-vtex-search-legacy-work). Faceted filters (`search.filtersEnabled`) and regionalization (`search.regionalizationEnabled`) depend on this flag being set to `true`.\n- `search.filtersEnabled`: Activates faceted filters in the search interface. It only takes effect when `search.vtexSearch` is set to `true`.\n- `search.regionalizationEnabled`: Activates [regionalized search](/en/docs/tutorials/regionalization). Only takes effect when `search.vtexSearch` is set to `true`.\n- `search.alternateIdRegex`: Regular expression (regex) used to recognize alternative SKU IDs, such as barcodes.\n\n## Inventory and out-of-stock sales\n\n- `sellWithoutStockInHands`: Allows selling products without local inventory in stores configured for local inventory sales (**On Hands**).\n- `showStock`: When set to `true`, displays the quantity in stock on the product and search screens. When `false`, it doesn't display it.\n\n## Attachments and services\n\n- `enableAttachments`: Activates services and attachments in the sales flow (example: gift packaging).\n- `giftPackagingName`: Name displayed for the service or attachment (example: `'packaging'`).\n\n## Social Selling\n\n- `socialShare.vendorType`: Determines the sales associate identification in [**Social Selling**](/en/docs/tracks/sharing-shopping-cart-using-vtex-sales-app-social-selling) links (example: `'code'` to use the sales associate code).\n- `socialShare.hostName`: Defines the site address that appears in the link shared with the customer. **Sales App** uses, in this order, the value set in this property (`socialShare.hostName`), the address already saved for sharing (`share.hostName`), and lastly, the address of the page the sales associate is on (`window.location.host`).\n\n## Sales associate code (`noteAsVendorCode`)\n\n- `noteAsVendorCode.type`: Defines the field type for the sales associate code. Only the value `'select'` creates a selection list. The other values display an open text field. Possible values are:\n\n  | Value      | Result                                                                                                                                                                                                                  |\n  | :--------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n  | `'select'` | Selection list with the sales associates from the store where the sales associate is logged in. The list is populated by `getVendorsByStore` based on this sales associate's `storeId`. |\n  | `'input'`  | Text field (`TextBox`).                                                                                                                                                              |\n  | `'text'`   | Text field (`TextBox`).                                                                                                                                                              |\n\n- `noteAsVendorCode.skipValidation`: Controls whether the sales associate code is required and whether it's checked against [Master Data](/en/docs/tutorials/master-data).\n\n  | Value                      | Result                                                                                                           |\n  | :------------------------- | :------------------------------------------------------------------------------------------------------------- |\n  | `false`                    | Makes the field required.                                                                        |\n  | `true`                     | Saves the code without checking **Master Data**.                                                 |\n  | Flag missing from the file | The field isn't required, but **Sales App** still validates whether the entered code is correct. |\n\n- `noteAsVendorCode.autofill`: Defines whether the sales associate code is autocompleted in the shared link. This flag only works if `socialShare` is set. See [Social Selling](#social-selling).\n\n  | Value                      | Result                                                                     |\n  | :------------------------- | :------------------------------------------------------------------------- |\n  | `false`                    | Doesn't autocomplete the code.                             |\n  | `true`                     | Autocompletes the sales associate code in the shared link. |\n  | Flag missing from the file | The default value is `true`.                               |\n\n- `noteAsVendorCode.mask`: Regular expression (regex) that validates the sales associate code format.\n\n  | Value                      | Result                                                                                                                                     |\n  | :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------- |\n  | Configured regex           | Validates the format of the sales associate code. It's ignored when `noteAsVendorCode.type` is `'select'`. |\n  | Flag missing from the file | The regular expression (regex) remains empty, and the field accepts any format.                         |\n\nBelow is an example of how to configure `noteAsVendorCode`:\n\n```js\nnoteAsVendorCode: {\n  type: 'input',\n  mask: '^LL.{0,8}$',\n  skipValidation: true,\n  autofill: false,\n}\n```\n\n## Anonymous customer\n\n- `allowAnonymousUser`: When set to `true`, allows completing orders without identifying the customer. When `false`, it doesn't allow it. Used for local inventory sales (**On Hands**).\n\n## Customer registration and profile\n\n- `customerProfile.isCorporate`: Defines whether the business sales option is available in the customer registration. Besides `true` and `false`, the flag also accepts the object `{ optional: true }`.\n\n  | Value                | Result                                                                                |\n  | :------------------- | :------------------------------------------------------------------------------------ |\n  | `false`              | Deactivates business sales.                                           |\n  | `true`               | Requires identifying the sale as a business sale.                     |\n  | `{ optional: true }` | Keeps business sales available, but completing the field is optional. |\n\n## Customer identification types\n\n- `enableIdentificationTypes`: Defines the customer identification types that are available in **Sales App**. Set each property to `true` to activate the method, or to `false` to deactivate it.\n  - `QRCode`: When set to `true`, allows the customer to identify themselves using the QR code. When `false`, it doesn't allow it.\n  - `CPF`: When set to `true`, allows the customer to identify themselves using a CPF (Brazil). When `false`, it doesn't allow it.\n  - `Email`: When set to `true`, allows the customer to identify themselves using their email. When `false`, it doesn't allow it.\n  - `Phone`: When set to `true`, allows the customer to identify themselves using their phone number. When `false`, it doesn't allow it.\n\nBelow is an example of how to configure `enableIdentificationTypes`:\n\n```js\nenableIdentificationTypes: {\n  QRCode: false,\n  CPF: false,\n  Email: true,\n  Phone: false,\n}\n```\n\n## Payments\n\n- `challengeDrivenPaymentWorkflow`: Activates a payment flow with additional validations, such as [digital wallets (ewallets)](/en/docs/tracks/digital-wallet-e-wallet), [Payment Apps](https://developers.vtex.com/docs/guides/payments-integration-payment-app), and [POS (Point of Sale)](https://developers.vtex.com/docs/guides/payments-integration-ppp-applied-to-pos).\n- `payments.filters`: Lists the IDs of the payment methods (`paymentSystemId`) that can appear in the **Sales App** checkout (example: `'1'`, `'4'`, `'125'`, `'202'`, `'44'`, `'45'`, `'207'`, `'208'`, `'209'`).\n\n## Order cancellation\n\n- `isCancelOrderAlwaysVisible`: When set to `true`, keeps the order cancellation option always visible in the interface. When `false`, it doesn't keep it visible.\n\n## Devices and printer\n\n- `printedOrderExtraText`: Additional text printed on the order receipt.\n- `enablePrintButton`: When set to `true`, displays the print button on the order. When `false`, it doesn't display it. The default value is `true`."}