[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 headless cart and checkout 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/headless-cart-and-checkout/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/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/headless-cart-and-checkout/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/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/headless-cart-and-checkout/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/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/headless-cart-and-checkout/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-commerce)

[Headless catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-catalog)

[Headless cart and checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout)

[Headless profile management and order history](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-profile-management-and-order-history)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/catalog-integration)

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

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/headless-cart-and-checkout/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/getting-started)

---

Integration Guides

[Back office integration guide (ERP/PIM/WMS)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/erp-integration-guide)

[Customer Credit](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/customer-credit-integration-guide)

[External Marketplace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/external-marketplace-integration-guide)

[External Seller](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/external-seller-integration-guide)

[Gift Card](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/gift-card-integration-guide)

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-commerce)

[Headless catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-catalog)

[Headless cart and checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout)

[Headless profile management and order history](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-profile-management-and-order-history)

[Login (SSO)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/login-integration-guide)

[Punchout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/punchout)

[Offer Management Integration Guide](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/sent-offers-integration-guide-connectors)

[Payments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/payments-integration-guide)

[Search Protocol](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/search-integration-guide)

[Session Manager](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/session-manager)

[Tax Service](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/tax-service-integration-guide)

[Pricing Hub](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/pricing-hub)

[reCAPTCHA](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/recaptcha)

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/catalog-integration)

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

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/headless-cart-and-checkout/docs/guides/activity-flow)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/data-protection-plus)

---

Weni by VTEX

---

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

Integration Guides

[Headless commerce](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-commerce)

[Headless cart and checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout)

Headless cart and checkout

This guide explains how to implement a shopping cart and manage the checkout process in a headless ecommerce store, using the Checkout API to handle all interactions through API requests, without a traditional user interface.

A [headless](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-commerce) store handles all ecommerce integration without a traditional user interface, relying solely on API requests. In this guide, you will learn how to create a shopping cart and manage the checkout flow using features from the [Checkout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api) in your headless store.

> New fields can be added in the Checkout API payload without previous warning.

## Shopping cart

In the Checkout API, the VTEX shopping cart information is organized using the [orderForm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orderform-fields), an object containing all information relevant to the purchase, including products, shipping, and payment information.

The `orderForm` is a complex data structure with many customization possibilities. The `orderForm`'s essential sections for placing an order are [items](#cart-items) and [attachments](#cart-attachments).

For a customer to make a purchase, the store must have a shopping cart containing an `orderForm`. When you use the [Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/orderForm) endpoint, you get an `orderFormId` in the response.

> If your headless storefront is not browser-based (e.g., native app), it is important to save the `orderFormId` and use it to manage the cart's information using the requests below. Otherwise, VTEX cookies will automatically manage this information in the customer's browser.

### Cart items

In the `orderForm`, product information is stored inside `items`, where each object corresponds to a SKU contained in the cart. Below is a basic example of a shopping cart containing two units of SKU `123`, to be fulfilled by seller 1, at a price of `$100.00` per unit.

The information above is sufficient to place an order, but there are other possible fields for shopping cart items, many of which are populated by VTEX modules.

To learn how to add products to a shopping cart, read the guide [Add cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-cart-items).

> If the customer leaves the store, make sure you keep the `orderFormId` so you can retrieve their previously abandoned cart with the [Get cart information by ID](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/orderForm/-orderFormId-) endpoint.

### Cart attachments

Shopping cart attachments are `orderForm` objects containing order information related to:

* [Customer profile](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart)
* [Shipping address and delivery option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-shipping-address-and-delivery-option-to-the-cart)
* [Marketing data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-marketing-information-to-the-cart)
* [Payment data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/adding-payment-information-to-the-cart)
* [Merchant context data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-merchant-context-information-to-the-cart)

Check on the right side of the screen a basic example of a cart attachment.

> Some attachments may contain arrays of objects, where each object corresponds to an item in the [items](#cart-items) array.

## Place order

There are two ways of placing orders with the Checkout API:

* [Place new order](#place-new-order): Manage shopping cart information in your frontend and then use one API request to send all order information to VTEX. You should use this method if your operation has specific requirements, such as limiting the number of HTTP requests sent from your storefront.
* [Place order from existing cart](#place-order-from-existing-cart): Manage shopping cart information in the VTEX platform throughout the shopping experience, then place an order from that data using just the cart ID. This method is generally recommended.

> The [place new order](#place-new-order) method increases the complexity of your application since you must manage all shopping cart data to correctly assemble the [orderForm](#shopping-cart). Additionally, placing a new order does not send shopping cart information to VTEX until the customers complete their purchase.

### Place new order

To place a new order without any shopping cart data previously stored on the VTEX platform, use the [Place order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23put-/api/checkout/pub/orders) endpoint.

For a tutorial on this method, check the guide [Creating a regular order with the Checkout API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-a-regular-order-with-the-checkout-api).

### Place order from existing cart

You can also place an order from an existing cart, which already has an `orderForm` structure and a shopping cart ID. To do so, use the [Place order from an existing cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pub/orderForm/-orderFormId-/transaction) endpoint or follow the steps in the [Creating a regular order from an existing cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/creating-a-regular-order-from-an-existing-cart) guide.

This endpoint may be used to perform tasks such as adding products to a cart or linking shipping information to the order.

## Order privacy

During the process of placing the order, merchants need to account for the security and privacy of customer information throughout checkout.

When a new cart is created, a new cookie named `CheckoutOrderFormOwnership` is sent empty alongside the existing `checkout.vtex.com` cookie, which contains the cart's `orderFormId`. This mechanism ensures that only the customer who created the cart has unrestricted access to their personal information.

You need to make requests with the client data to set `CheckoutOrderFormOwnership` to a value. Without this cookie, the returned order form will have masked personal data such as `clientProfileData` and `shippingData`.

> Please contact [VTEX support](https://read.calvincode.net/reader?url=https://support.vtex.com/hc/en-us/requests) to enable this feature in your store. This feature is not available to stores using [FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore).

### Add client profile data

Once you created a new cart, use the [Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/orderForm) endpoint to retrieve the created `orderForm`, as in the example.

After obtaining the `orderForm`, you must add the client data to it. To do so, send the profile data in the [Add client profile](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pub/orderForm/-orderFormId-/attachments/clientProfileData) endpoint request, as in the example.

For more information about this endpoint, check the guide [Adding customer profile information to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-customer-profile-information-to-the-cart).

After making this request, the `CheckoutOrderFormOwnership` cookie will be set as a string with encrypted values of the client profile data.

### Add address data

The next step is to add the customer address data to the `orderForm`. This data includes all information about the delivery of the order to the customer. To do so, use the [Add shipping address and select delivery option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pub/orderForm/-orderFormId-/attachments/shippingData) endpoint.

For more information about this endpoint, check the [Adding shipping address and delivery options to the cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/add-shipping-address-and-delivery-option-to-the-cart) guide.

When making [this request](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pub/orderForm/-orderFormId-/attachments/shippingData), the `CheckoutOrderFormOwnership` cookie is updated with this new information.

### Unmask `orderForm`

[VTEX Personal Identifiable Information (PII) data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/pii-data-architecture-specifications) is masked by default. This means that when you access a shopper's order history in the VTEX Admin panel or when you request their profile information via API, for example, any PII information returned will be masked.

After adding the client profile data and address data, you can access the previously masked information. Use the [Get current or create a new cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/orderForm) endpoint again, but include the latest `CheckoutOrderFormOwnership` cookie value in the request.

With the correct ownership cookie, both client profile data and address data are unmasked, providing the full details.

## Complete order

After placing an order using either of the methods presented above, you will receive an `orderId` and `transactionId` in the response body, along with some login values. Your integration must use this information to complete the purchase process within 5 minutes. This involves [sending payment information](#send-payment-information) and then [requesting order processing](#process-order).

> Failing to perform these steps within 5 minutes will cause the order to be automatically canceled and tagged as [incomplete](https://read.calvincode.net/reader?url=https://help.vtex.com/en/docs/tutorials/understanding-incomplete-orders).

### Send payment information

To forward payment data to VTEX, use the [Send payments information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/payments-gateway-api%23post-/api/payments/transactions/-transactionId-/payments) endpoint.

The request body used in this step is based on the order's `paymentData` attachment as in the example.

> Make sure that all value-related fields match the information sent when [placing the order](#place-order) to create a successful request. If incorrect payment details are provided, the system cannot redirect the user to the Order Confirmation page, thereby interrupting the checkout flow and preventing purchase completion.

#### Retrieving saved credit cards

In the payment section at checkout, we recommend retrieving the saved credit card information from the customer profile. This can ease the checkout process as the customer would only need to select the chosen credit card and input the **CVV (Card Verification Value)**. This process will only display the last four numbers of a credit card to the customer, making it a secure interaction with the client data.

To check if the customer has any saved cards, use the [Get client profile by email](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/profiles) endpoint. This endpoint returns the available cards. The card information is displayed in the `availableAccounts` array, as shown in the examples.

> You can enable a checkbox that allows the customer to choose if they want to save the credit card information or not. To learn how to enable it, read the guide [Enable the Save user data opt-in](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-the-save-user-data-opt-in%23saving-personal-and-payment-data).

Request

`1

"items": [

2

 {

3

 "id": "123",

4

 "quantity": 2,

5

 "seller": "1",

6

 "price": 10000

7

 }

8

]

`

### Process order

Lastly, you must request order processing by using the [Process order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23post-/api/checkout/pub/gatewayCallback/-orderGroup-) endpoint after the order's payment is approved. If the payment has not been approved yet, it will return a status code `500` error.

> Keep in mind that this process uses [payment connectors](https://read.calvincode.net/reader?url=https://help.vtex.com/en/docs/tutorials/what-is-the-connector) configured in your VTEX environment. Be careful when using it to avoid any unwanted charges or unexpected payment denials.

## Verify order status

After successfully placing an order, submitting the payment information, and requesting order processing, the order will appear in the [Order management module](https://read.calvincode.net/reader?url=https://help.vtex.com/en/docs/tutorials/all-orders) in the VTEX Admin.

You can also use the [Get order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23get-/api/oms/pvt/orders/-orderId-) and [List orders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/orders-api%23get-/api/oms/pvt/orders) endpoints for this purpose. Another way to check the order updates is by integrating [Feed v3](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orders-feed%23best-practices-for-integrations) and [Hook](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/orders-feed%23hook) with your store.

## Checkout interface

When a customer goes to your store's checkout, your [frontend implementation](https://read.calvincode.net/reader?url=https://help.vtex.com/docs/tracks/vtex-store-overview) must handle several tasks. Follow the sections below to implement these tasks effectively.

### Order details

Order details provided by customers at checkout, such as profile information or shipping address, are [attachments](#cart-attachments) of the [shopping cart](#shopping-cart).

You must handle this information based on the order placement method you choose. Refer to the corresponding section for detailed instructions:

* [Place new order](#place-new-order)
* [Place order from existing cart](#place-order-from-existing-cart)

### Address autofill

Implement an address autofill feature using the following endpoint:

* [GET Get address by postal code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/postal-code/-countryCode-/-postalCode-)

### Pickup points

Shipping information is added to the order as [orderForm attachments](#order-details). To allow customers to choose nearby pickup points, use the following endpoint:

* [GET List pickup points by location](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/api-reference/checkout-api%23get-/api/checkout/pub/pickup-points)

> [reCAPTCHA integration](https://read.calvincode.net/reader?url=https://help.vtex.com/docs/tutorials/using-recaptcha-at-checkout) doesn't work with Headless checkout. It only works with stores using [Checkout v6](https://read.calvincode.net/reader?url=https://help.vtex.com/docs/tutorials/enable-checkout-v6).

## Learn more

Check these other guides to learn more about building a headless shopping experience using VTEX:

* [Headless commerce overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-commerce)
* [Headless catalog and search](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-catalog)
* [Headless profile management and order history](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-profile-management-and-order-history)

Contributors

3

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

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

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

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/Integration-Guides/headless-commerce/headless-cart-and-checkout.md)

[Headless catalog« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout//docs/guides/headless-catalog)[Headless profile management and order historyNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout//docs/guides/headless-profile-management-and-order-history)

Contributors

3

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

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

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

ON THIS PAGE

[Shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23shopping-cart)

[Cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23cart-items)[Cart attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23cart-attachments)

[Place order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23place-order)

[Place new order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23place-new-order)[Place order from existing cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23place-order-from-existing-cart)

[Order privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23order-privacy)

[Add client profile data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23add-client-profile-data)[Add address data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23add-address-data)[Unmask orderForm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23unmask-orderform)

[Complete order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23complete-order)

[Send payment information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23send-payment-information)[Process order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23process-order)

[Verify order status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23verify-order-status)

[Checkout interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23checkout-interface)

[Order details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23order-details)[Address autofill](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23address-autofill)[Pickup points](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23pickup-points)

[Learn more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23learn-more)

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/Integration-Guides/headless-commerce/headless-cart-and-checkout.md)

Copy page

On this page

ON THIS PAGE

[Shopping cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23shopping-cart)

[Cart items](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23cart-items)[Cart attachments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23cart-attachments)

[Place order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23place-order)

[Place new order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23place-new-order)[Place order from existing cart](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23place-order-from-existing-cart)

[Order privacy](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23order-privacy)

[Add client profile data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23add-client-profile-data)[Add address data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23add-address-data)[Unmask orderForm](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23unmask-orderform)

[Complete order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23complete-order)

[Send payment information](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23send-payment-information)[Process order](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23process-order)

[Verify order status](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23verify-order-status)

[Checkout interface](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23checkout-interface)

[Order details](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23order-details)[Address autofill](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23address-autofill)[Pickup points](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23pickup-points)

[Learn more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/headless-cart-and-checkout/docs/guides/headless-cart-and-checkout%23learn-more)

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] How do I use the VTEX store components 3.178.5 Image app? Provide documentation and configuration details.

[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/apps/vtex.store-components@3.178.5/Image/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/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/apps/vtex.store-components@3.178.5/Image/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/vtex-io-apps)

Image

[vtex.store-components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components)

Version: 3.178.5

Latest version: 3.178.5

The `image` block renders images in the storefront.

![](https://user-images.githubusercontent.com/60782333/197802548-bc9940ae-b9c8-47df-9769-e76155b9219b.png)

## Configuration

1. Import the `vtex.store-components` app to your theme dependencies in the `manifest.json` file as in the following example:

`1

 "dependencies": {

2

 "vtex.store-components": "3.x"

3

 }

`

1. Add the `image` block to any template you choose.
2. Then, declare the `image` block using the props stated in the [Props](#props) table. For example:

`1

 "image#example": {

2

 "props": {

3

 "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",

4

 "maxHeight": 24

5

 }

6

 },

`

### Props

| Prop name | Type                                                                                | Description                                                                                | Default value |
| --------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------- |
| alt       | string                                                                                | Alternate text for the image.                                                                   | \-            |
| link      | [Link](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/native-types/blob/f63aeeb8f6e62f4a9aaec052a8be34973be7389b/pages/contentSchemas.json%23L52-L71) | The image hyperlink. For more details on the props of the link, please see the following table. | \-            |
| maxHeight | string                                                                                | Maximum height of the image.                                                                    | \-            |
| maxWidth  | string                                                                                | Maximum width of the image.                                                                     | \-            |
| sizes     | string                                                                                | Different image sizes for each page layout.                                                     | \-            |
| src       | string                                                                                | Source URL of the image.                                                                        | \-            |
| srcSet    | string                                                                                | URL of the image to use in different situations.                                                | \-            |
| title     | string                                                                                | Image title displayed on hover.                                                                 | \-            |

* **`link` props:**

| Prop name         | Type    | Description                                                                                | Default value |
| ----------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| attributeNofollow | boolean | Guides the search engine not to track the link of the page indicated by the tag. If true, sets the rel=noFollow attribute to the link. | false         |
| newTab            | boolean | If true opens a new tab when you click the image.                                                                                | false         |
| url               | string  | Sets the URL to which the user will be redirected by clicking the image.                                                               | \-            |

## Customization

To apply CSS customizations to this and other blocks, please read the [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles  |
| ------------ |
| imageElement |

See also

[Vtex.store ComponentsVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/apps/vtex.store-components)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/apps/vtex.store-components@3.178.5/Image%23configuration)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/apps/vtex.store-components@3.178.5/Image%23props)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.store-components@3.178.5/Image/docs/apps/vtex.store-components@3.178.5/Image%23customization)

Was this helpful?

[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 cart transfer between devices 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-cart-transfer-between-devices/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/updates/release-notes)

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

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

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

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

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

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

---

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

Guides

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

---

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

---

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

---

Integration Guides

---

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

---

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

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/guides/change-vtex-sales-app-language)

[Hide anonymous customer option](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/guides/enable-cart-transfer-between-devices)

[Force stock availability](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/guides/enable-partial-cancellation)

[Hide cancellation buttons](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/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-cart-transfer-between-devices/docs/guides/activity-flow)

---

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

---

VTEX Session

---

VTEX Shield

---

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

---

Weni by VTEX

---

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

VTEX Sales App

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

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

Enable cart transfer and capture between devices

The cart transfer and capture feature on VTEX Sales App allows a purchase started on one device to be completed on any other device present in the purchase flow, without the need to reinsert the items in the cart.

This is particularly useful for stores where the customer can be served by more than one sales associate. In that case, at each interaction with a different sales associate, they can add products to the same cart used by the previous sales associate. This same cart is transferred between one sales associate and the other, until the purchase is done.

This feature streamlines the order and facilitates the commissioning of the sales associates involved in the purchase, as it removes the need for labels with sales associate identification codes.

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

To activate the cart transfer and capture feature on VTEX Sales App, you must edit the `checkout-instore-custom.js` file. Check out the [How to customize VTEX Sales App](https://read.calvincode.net/reader?url=https://developers.vtex.com/vtex-rest-api/docs/how-to-customize-vtex-sales-app) guide for further information on how to access it.

Inside this file, you need to find the `window.INSTORE_CONFIG` object and add the `transferEnabled` property in it, with the value `true`. Do not remove any of the other properties present on that object.

The result should look like:

`1

window.INSTORE_CONFIG = {

2

 transferEnabled: true,

3

};

`

> After making changes in the code, make sure you press the `Save` button.

## Check out your changes

After making this change, open the VTEX Sales App menu and update the data by clicking on the `Reset app local data` button.

Once this is done, a slider will appear at the bottom of the VTEX Sales App identification page:

![{"base64":"  ","img":{"width":852,"height":1722,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":174305,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-cart-transfer-between-devices-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-cart-transfer-between-devices-0.png)

When you drag the screen to the right, you will see the **Cart Capture** option, as shown in the image below.

![{"base64":"  ","img":{"width":844,"height":1707,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":164175,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-cart-transfer-between-devices-1.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/enable-cart-transfer-between-devices-1.png)

For more information on how to use this feature, check our [guide](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tracks/vtex-sales-app-using-the-app--4BYzQIwyOHvnmnCYQgLzdr/2hlBqxHlxgFo2o4R52pbsk).

Contributors

2

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

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/_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-cart-transfer-between-devices.md)

[Enable the sales associate code« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices//docs/guides/sales-associate-code)[Force stock availabilityNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices//docs/guides/force-stock-availability)

Contributors

2

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

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

ON THIS PAGE

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

[Check out your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/docs/guides/enable-cart-transfer-between-devices%23check-out-your-changes)

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-cart-transfer-between-devices.md)

Copy page

On this page

ON THIS PAGE

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

[Check out your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/enable-cart-transfer-between-devices/docs/guides/enable-cart-transfer-between-devices%23check-out-your-changes)

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] How do I use the VTEX disclosure layout app? Provide documentation and configuration details.

[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/apps/vtex.disclosure-layout/docs/guides)

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/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/apps/vtex.disclosure-layout/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/layout-apps)

[Condition Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.condition-layout)

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.tab-layout)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/storefront-development)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/layout-apps)

[Condition Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.condition-layout)

[Disclosure Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.disclosure-layout)

[Flex Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.flex-layout)

[Modal Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.modal-layout)

[Overlay Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.overlay-layout)

[Responsive Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.responsive-layout)

[Slider Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.slider-layout)

[Stack Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.stack-layout)

[Sticky Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.sticky-layout)

[Tab Layout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.tab-layout)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/vtex-io-deprecated-apps)

---

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

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/guides/layout-apps)

Disclosure Layout

Official extension

Version: 1.0.4

Latest version: 1.0.4

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

The Disclosure Layout app creates a layout structure based on disclosure indicators.

![{"base64":"  ","img":{"width":658,"height":392,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1021755,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-disclosure-layout-0.gif"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-disclosure-layout-0.gif)

[Check this example](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme/pull/226)

## Configuration

### Step 1 - Adding the Disclosure Layout app to your theme dependencies

In the `manifest.json` file of your theme, add the Disclosure Layout app as a dependency:

`1

 "dependencies": {

2

+ "vtex.disclosure-layout": "1.x"

3

 }

`

Now, you can use all the blocks exported by the `disclosure-layout` app. See the full list below:

| Block name                 | Description                                                                                |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| disclosure-layout          | ![{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Mandatory-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Mandatory-red) Parent block that enables you to build the disclosure layout using its three children blocks: disclosure-trigger, disclosure-content, and disclosure-state-indicator. |
| disclosure-trigger         | Declares the blocks that will be rendered as disclosure triggers, i.e., the blocks that, when clicked, will open or close the disclosure content (defined by the disclosure-content block).                                                                                |
| disclosure-content         | Declares the blocks displaying the desired content when the disclosure trigger is clicked.                                                                                |
| disclosure-state-indicator | Optional block that renders the chevron or other UI elements that change when the disclosure is opened or closed.                                                                                |
| disclosure-layout-group    | Wraps many disclosure-layouts blocks at once. You can use this block to control when each should be displayed, allowing only one disclosure-layout open at a time.                                                                                |
| disclosure-trigger-group   | Wraps many disclosure-trigger blocks at once. You can use this block to control when and how the disclosure-layouts blocks declared inside the disclosure-layout-group should be displayed.                                                                                |

### Step 2 - Adding the Disclosure Layout blocks to your theme templates

Copy one of the examples below and paste it into your desired theme template, changing as necessary. If needed, add the `disclosure-layout` block to the block list of the template.

* Simple example:

`1

{

2

 "disclosure-layout#simple": {

3

 "children": ["disclosure-trigger#simple", "disclosure-content#simple"]

4

 },

5

 "disclosure-trigger#simple": {

6

 "children": ["rich-text#question"]

7

 },

8

 "disclosure-content#simple": {

9

 "children": ["rich-text#answer"]

10

 },

11

 "rich-text#question": {

12

 "props": {

13

 "text": "How can I change my shipping address?"

14

 }

15

 },

16

 "rich-text#answer": {

17

 "props": {

18

 "text": "Call us at (212) 123-1234"

19

 }

20

 }

21

}

`

* Example using the `disclosure-layout-group` block:

`1

{

2

 "disclosure-layout-group#group": {

3

 "children": ["disclosure-layout#first", "disclosure-layout#second"]

4

 },

5

6

 "disclosure-layout#first": {

7

 "children": ["disclosure-trigger#first", "disclosure-content#first"]

8

 },

9

 "disclosure-trigger#first": {

10

 "children": ["rich-text#question1"]

11

 },

12

 "disclosure-content#first": {

13

 "children": ["rich-text#answer1"]

14

 },

15

 "rich-text#question1": {

16

 "props": {

17

 "text": "How can I change my shipping address?"

18

 }

19

 },

20

 "rich-text#answer1": {

21

 "props": {

22

 "text": "Call us at (212) 123-1234."

23

 }

24

 },

25

26

 "disclosure-layout#second": {

27

 "children": ["disclosure-trigger#first", "disclosure-content#first"]

28

 },

29

 "disclosure-trigger#second": {

30

 "children": ["rich-text#question1"]

31

 },

32

 "disclosure-content#second": {

33

 "children": ["rich-text#answer1"]

34

 },

35

 "rich-text#question2": {

36

 "props": {

37

 "text": "How can I track my order?"

38

 }

39

 },

40

 "rich-text#answer2": {

41

 "props": {

42

 "text": "After logging in to your account, you can find this information in the Orders link."

43

 }

44

 }

45

}

`

* Example using the `disclosure-state-indicator` block:

`1

{

2

 "disclosure-state-indicator": {

3

 "props": {

4

 "Show": "icon-angle--down",

5

 "Hide": "icon-angle--up"

6

 }

7

 }

8

}

`

#### `disclosure-layout` props

| Prop name         | Type    | Description                                                                                | Default value |
| ----------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| initialVisibility | enum    | Defines the initial visibility of the layout content. Possible values are: visible (content initially open) or hidden (content is only displayed with user interaction).                                                                                | hidden        |
| animated          | boolean | Defines if the layout content should have animations. When set as true, this prop will enable additional data-\\\* attributes on the content, which you can use as selectors in CSS. It will also ensure that the element will be hidden once the transition has ended. | false         |

#### `disclosure-trigger` props

| Prop name  | Type   | Description                                                                                | Default value |
| ---------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| Show       | block  | Name of the block that will be rendered when prompted to show the content.                                                                                | undefined     |
| Hide       | block  | Name of the block that will be rendered when prompted to hide the content.                                                                                | undefined     |
| as         | string | HTML tag to be applied to the component when rendered on the UI.                                                                                | button        |
| children   | block  | Name of the block that will be rendered if no blocks are declared in the Show or Hide props.                                                                                | undefined     |
| blockClass | string | Block ID defined by you that will be used in [CSS customizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization%23using-the-blockclass-property). | undefined     |

#### `disclosure-content` props

| Prop name  | Type      | Description                                                                                | Default value |
| ---------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| blockClass | string    | Block ID defined by you that will be used in [CSS customizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization%23using-the-blockclass-property). | undefined     |
| children   | \[block\] | List of blocks that will render the desired disclosure content.                                                                                | undefined     |

#### `disclosure-state-indicator` props

| Prop name | Type  | Description                                                                | Default value |
| --------- | ----- | -------------------------------------------------------------------------- | ------------- |
| Show      | block | Name of the block that will be rendered when prompted to show the content. | undefined     |
| Hide      | block | Name of the block that will be rendered when prompted to hide the content. | undefined     |

#### `disclosure-layout-group` props

| Prop name  | Type | Description                                                                                | Default value |
| ---------- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| maxVisible | enum | Defines how many disclosure-layout blocks should be displayed at a time. Possible values are: one (only one disclosure-layout block should have its content displayed at time) or many (different disclosure-layout block content can be displayed at time). | one           |

#### `disclosure-trigger-group` props

| Prop name  | Type   | Description                                                                                | Default value |
| ---------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| Show       | block  | Name of the block that will be rendered when prompted to show the content.                                                                                | undefined     |
| Hide       | block  | Name of the block that will be rendered when prompted to hide the content.                                                                                | undefined     |
| as         | string | HTML tag to be applied to the component when rendered on the UI.                                                                                | button        |
| children   | block  | Name of the block that will be rendered if no blocks are declared in the Show or Hide props.                                                                                | undefined     |
| blockClass | string | Block ID defined by you that will be used in [CSS customizations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization%23using-the-blockclass-property). | undefined     |

## Customization

To apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS handles           |
| --------------------- |
| content               |
| content--visible      |
| content--hidden       |
| trigger               |
| trigger--visible      |
| trigger--hidden       |
| triggerGroup          |
| triggerGroup--visible |
| triggerGroup--hidden  |

[Condition Layout« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.condition-layout)[Flex LayoutNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.flex-layout)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.disclosure-layout%23configuration)

[Step 1 - Adding the Disclosure Layout app to your theme dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.disclosure-layout%23step-1-adding-the-disclosure-layout-app-to-your-theme-dependencies)[Step 2 - Adding the Disclosure Layout blocks to your theme templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.disclosure-layout%23step-2-adding-the-disclosure-layout-blocks-to-your-theme-templates)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.disclosure-layout/docs/apps/vtex.disclosure-layout%23customization)

Was this helpful?

[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=)