Documentation
Feedback
Guides
API Reference

Guides
Getting started
Checkout

Help us improve our documentation! Tell us about your experience with this article by completing this form.

Customizing the Checkout UI

All VTEX stores have a native Checkout UI ready to be used from the start of their operations on the platform. However, if the merchant wants to change some features on this UI, VTEX offers the option of customizing the Checkout. See the links below for helpful information and apps to customize the Checkout UI of your store.

Smart Checkout - Payment layout customization example:

{"base64":"  ","img":{"width":512,"height":421,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":74931,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Checkout/Layout_Dev_Guide_29.gif"}}

Understanding Checkout data structures

In the VTEX Checkout architecture, the main data structure is the orderForm object. This object has several sections and fields that allow you to control all the important information about the order. See the links below for helpful information and endpoints related to the orderForm object.

Collecting custom customer information

To request additional customer information besides what the orderForm collects, stores can create custom fields. See the links below for helpful information and endpoints related to custom customer information.

This module may process personal or sensitive information. Learn more about how VTEX handles data privacy at our Data privacy guide.

Accessing customer information

Once you have the customer information, you can check their profile information or even add them to a specific cart. See the links below to access endpoints related to customer information.

Accessing seller information

In a marketplace, you can check the seller database to find out which sellers are available in a given region and configure the exchange of sellers that fulfill an order. See the links below to access endpoints related to seller information.

Handling the shopping cart

In your store, you can perform many actions related to the shopping cart, including adding security items, simulating carts, changing the number of items, among others. See the links below for helpful information and endpoints related to handling the store shopping cart.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAFUlEQVR4nGPYt29fV2fnr1+/GZi4ATQlBtOH1lmdAAAAAElFTkSuQmCC","img":{"src":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Checkout/reCAPTCHA_Dev_Guide_1.gif","width":616,"height":164,"type":"gif"}}

Getting information and simulating shipping logistics

By verifying addresses, pickup points, and fulfillment simulations, you can have an overview of how the shipping process will be carried out in your store. Additionally, you can configure your store to allow shipping to other countries. See the links below to access endpoints related to shipping.

Creating orders via API

APIs allow you to simulate all the order steps a customer goes through. See the links below for helpful information and endpoints related to the order flow.

Configuring tax customization systems

When your store sells products in several regions or has inventories in different locations, you may need to calculate different taxes for each order. To facilitate this, VTEX allows you to integrate an external tax calculation provider. See the links below to access information on how to integrate an external tax calculation provider with your store.

Integrating Checkout with apps

On VTEX checkout, some features are activated through apps. See the links below for information about available apps for your store checkout.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAMklEQVR4nAEnANj/APv8//X29vv8/+/2+wC9u7sAAxMiNEhAR1IA1dTULzQ4PUZQWFZZ8EMUYPRn9msAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Checkout/Hotjar_example_Dev_Guide_1.png","width":952,"height":646,"type":"png"}}


Product review example:

{"base64":"  ","img":{"width":1009,"height":1024,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":371724,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Checkout/Product_review_example_Dev_Guide_1.png"}}

Contributors
5
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 5 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
See also
Checkout API
API Reference
Contributors
5
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 5 contributors
On this page