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

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.

• Checkout customization guide
• Checkout UI Custom App
• Checkout UI Settings App
• Checkout Settings (B2B)
• Customizing the Header and Footer blocks by page
• Customize checkout confirmation pages
• Enable an Observation field on the Checkout page
• Layout Development Guide for payment methods in Smart Checkout VTEX
• How to setup and use checkout data from client side (vtex.js for Checkout)
• Change payment method names in Checkout
  

Smart Checkout - Payment layout customization example:

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.

• OrderForm overview
• Set a discount using the Checkout API
• Enabling the orderForm optimization - Store Framework only
• GET- Get orderForm configuration
• POST - Update orderForm configuration
• POST - Clear orderForm messages

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.

• Add and handle custom information in the order
• Custom fields created by Mercado Libre connector
• PUT - Set multiple custom field values
• PUT - Set single custom field value
• DELETE - Remove single custom field value

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.

• Enable the Save user data opt-in
• GET - Get client profile by email
• POST - Add client profile
• POST - Add client preferences
• POST - Add shipping address and select delivery option

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.

• GET - Get sellers by region or address
• GET - Get window to change seller
• POST - Update window to change seller

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 - Configuration & Customization
• ADD TO CART Button
• reCAPTCHA
• Implementing reCAPTCHA in integrations
• Enable the Manual Price
• Check marketing UTMs used at Checkout
• POST - Cart simulation
• GET - Get current or create a new cart
• GET - Get cart information by ID
• POST - Remove all items
• GET - Remove all personal data
• PATCH - Update cart items
• PUT - Change price
• PATCH - Ignore profile data
• GET - Cart installments
• POST - Add marketing data
• POST - Add payment data
• POST - Add coupons to the cart

Minicart view:

reCAPTCHA view:

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.

• Calculate SLA
• Configure the Global Checkout
• GET - List pickup points by location
• GET - Get address by postal code
• POST - Fulfillment simulation

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.

• Create a regular order using the Checkout API
• Create a regular order from an existing cart
• PUT - Place an order (no cart information available)
• POST - Place an order from an existing cart
• POST - Process order

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.

• Tax Service - Overview
• Tax Service - Specification
• Tax Service - Recipe
• Tax Service - Implementation

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.

• Setting up Google Tag Manager
• Migrating Google Tag Manager app from major 2.x to major 3.x
• Hotjar App - Website Heatmaps & Behavior Analytics Tools
• PowerReviews App - UGC (User Generated Content) Ratings & Reviews Tool

Hotjar heatmap example:

Product review example: