Documentation
Feedback
Guides
API Reference

Guides
Getting Started
Checkout

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

Customizing Checkout UI

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

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

The architecture of VTEX Checkout is organized in such a way that the main data structure is the orderForm object. It is composed of several sections and fields that allow you to have control over all the important information of a purchase order. See the links below for useful information and endpoints related to the orderForm object.

Collecting custom client data

To request client data additional to those available in the orderForm, stores can create custom fields. See the links below for useful information and endpoints related to custom client data.

Accessing client data

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

Accessing seller data

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

Handling the shopping cart

In your store, you can perform various actions related to the shopping cart, including adding security items, simulating carts, modifying item quantities, etc. See the links below for useful information and endpoints related to the handle the shopping cart in your store.


Minicart view:


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



reCAPTCHA view:


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

Getting information and simulating delivery logistics

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

Making orders via API

Through APIs it is possible to simulate all the steps in the order process carried out by the client. See the links below for useful information and endpoints related to the flow of an order.

Configuring tax customization systems

When your store sells products to many regions or has stocks in different locations, you may need to calculate different taxes to apply to each order. To facilitate this procedure, at VTEX you can integrate an external tax calculation provider. See the links below to access information on how to integrate an external tax calculation provider into your store.

Integrating Checkout with apps

At VTEX checkout, some features are activated through apps. See the links below to access information about the apps available for your store's checkout.


Hotjar heatmap example:

{"base64":"  ","img":{"width":952,"height":646,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":534036,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/guides/Checkout/Hotjar_example_Dev_Guide_1.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
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Orders
Payments
See also
Checkout API
API Reference
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page