Documentation
Feedback
Guides
Storefront Development

Storefront Development
4. Integrating the VTEX Checkout
In this guide, you'll learn how to integrate your FastStore project with the VTEX Checkout. The Checkout comprehends the pages responsible for receiving the shopper's information necessary to process an order.
To successfully integrate the VTEX Checkout with your FastStore project, you must ensure that:
  • Shoppers will be presented with an updated version of the Order Placed page once they place an order.
  • All links in the Header and Footer of the Checkout point to your FastStore website.

Before you begin

Before proceeding any further, make sure you have already configured the custom domain name of your FastStore website.

Step by step

Step 1 - Setting up the Order Placed page

Take the following steps to guarantee shoppers will be redirected to the newest version of the Order Placed page in your store:
  1. In the VTEX Admin, access Store Settings > Storefront > Checkout.
  2. Click on the gear button in the Default card.
  3. Change to the Code tab.
  4. Select checkout-confirmation-custom.js under Files.
  5. Add the following JavaScript code in the editor:
    checkout-confirmation-custom.js

    _10
    // WARNING: THE USAGE OF CUSTOM SCRIPTS IS NOT SUPPORTED. VTEX IS NOT LIABLE FOR ANY DAMAGES THIS MAY CAUSE.
    _10
    // THIS MAY BREAK YOUR STORE AND STOP SALES. IN CASE OF ERRORS, PLEASE DELETE THE CONTENT OF THIS SCRIPT.
    _10
    _10
    const og = new URLSearchParams(location.search).get('og')
    _10
    window.location.assign(
    _10
    `${window.location.origin}/api/io${window.location.pathname}?og=${og}`
    _10
    )

  6. Click on Save. Notice that, as soon as you hit the Save button, your changes will be live to all clients.
    {"base64":"  ","img":{"width":1200,"height":766,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":210731,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/orderplacedversion___224b9d7a692b85ae1e56eee5744bd511.png"}}
We now need to update the links presented in the Header and Footer of the Checkout pages, guaranteeing that all links point to your FastStore website. To do that, take the following steps.
  1. Still in the VTEX Admin at the Store Settings > Storefront > Checkout > Default > Code tab, click on checkout-header under Template.
  2. Edit the checkout-header code according to your scenario, making sure all links are pointing to your FastStore website. For example:
    checkout-header.js

    _10
    <div class="container">
    _10
    - <a href="/" title="Home Page">Your logo here!</a>
    _10
    + <a href="https://www.vtexfaststore.com" title="Home Page">FastStore</a>
    _10
    <hr>
    _10
    </div>

  3. Click on Save. Notice that, as soon as you hit the Save button, your changes will be live to all clients.
Once you adjust all the Header links of the Checkout pages, make sure to repeat the process in the step 2 for the checkout-footer file to adjust the Checkout Footer.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page