VTEX Checkout

Orchestrators

store
└── order-manager (contains order-queue and order-form)
    ├── order-items
    ├── order-shipping
    ├── order-profile
    ├── order-payment
    └── checkout-container

Components and data (BFF - Backend For Frontend)

checkout-graphql
 |
 ▼
checkout
└── checkout-cart (provides order-queue, order-form)
|   ├── product-list (controlled by order-items)
|   ├── checkout-summary
|   |   └── checkout-coupon (controlled by order-coupon)
|   └── shipping-calculator (controlled by order-shipping)
|       └── address-form
|
└── checkout-container (provides utilities used by the checkout steps)
    ├── checkout-identification
    └── checkout-step-group
        ├── checkout-profile (contains the profile form)
        ├── checkout-shipping (contains the shipping form)
        └── checkout-payment (contains the payment form)
... to be continued

GraphQL operations

All GraphQL queries and mutations used by Checkout IO are located in checkout-resources. This makes it possible to reuse GraphQL fragments and avoid duplicating the response for each query/mutation.

Dependencies

Orchestrators

UI components

Country-related rules

BFF

Extra

About

VTEX Checkout app

Languages

Language:TypeScript 64.2%Language:CSS 28.4%Language:JavaScript 7.3%Language:Shell 0.2%