FAQ: I have a headless front end – How do I correctly integrate and use VTEX's native Checkout and My Account?

This topic aims to help customers who choose to implement a headless front end in their operation but still want to use the platform’s native My Account and Checkout features.

But first of all, what is a Headless Front End? :thinking:

By definition, headless in ecommerce is a type of omnichannel commerce solution in which the back end and front end are separated, yet integrated through APIs.

VTEX, as a MACH platform (Microservices-based, API-first, Cloud-native, and Headless), is 100% ready to support customers who choose to use an external front end that is not CMS Legacy, Store Framework, or Faststore (VTEX’s native front ends). Any front end not built with these technologies is, by definition, considered headless.

Ok, I want to implement a headless front end — but how do I keep using the native My Account and Checkout? :desktop_computer:

Since your front end will be hosted on an external platform, the DNS record for your store’s final domain will point to a non-VTEX address.

Example: Let’s use a hypothetical example — João’s shoe store.

Suppose João’s store’s final domain is www.sapatosjoao.com.br. In DNS terms, this domain will point to that external infrastructure outside of VTEX.

Therefore, for Checkout and My Account to work under the root domain sapatosjoao.com.br, we need a subdomain.

A subdomain is an address that is part of the main domain — essentially a branch of it. You can generally create as many subdomains as needed from a single domain.

A subdomain uses the main domain and is differentiated by adding another name alongside it. For example, the most common subdomain is ‘www’, but some stores use ‘loja’ or ‘store’.

In João’s shoe store example, his main subdomain is www, but he can use another subdomain — such as ‘secure’ — so that subdomain points to VTEX.

In practice, the URL secure.sapatosjoao.com.br will point to VTEX via a CNAME record to secure.sapatosjoao.com.br.cdn.vtex.com.

In this setup, we’ll have two DNS records:

www.sapatosjoao.com.br → pointing to the external infrastructure responsible for the front end

secure.sapatosjoao.com.br → pointing to VTEX

With this DNS structure, customers will be able to access the native Checkout and My Account through the following URLs, even with a headless front end:

secure.sapatosjoao.com.br/checkout

secure.sapatosjoao.com.br/account

Additionally, to keep the customer logged in after authenticating through VTEX’s native VTEX ID, once they land on the account page, you’ll need to open a ticket with VTEX Support requesting that the authCookieRootDomain be configured for the store’s main domain.

Finally, once authenticated, the customer must be redirected to the external front end. This should be done via a redirect. For more information, I recommend consulting the following documentation: https://www.faststore.dev/docs/go-live/5-integrating-the-vtex-order-placed-and-my-account

If you still have any questions about this topic, feel free to ask here! It’ll be a pleasure to answer and help you out!

1 Like