Checkout Components

Synopsis

Starter Store provides all the functionalities required to implement your checkout process using your e-commerce backend. The Boot application includes components like Cart, Shipment options, Payments registration, and Order placement. 

Components Overview

The Checkout components and pages allow customers to add/remove products to their cart, select shipment options, make a payment (through integration with payment providers), and place the order. These operations are available in almost every e-commerce backend: at the moment commercetools is fully supported in the Starter Store boot application.

This paragraph describes the checkout process designed in the Starter Store Boot application. Please consider that this represents just an example of the checkout flow: it can be easily customized to meet your requirements. In the next paragraph we will see how the e-commerce APIs are used by the boot application: using this configuration as an example, you will be able to use BRIEF to design your own flow.

The cart component is used directly in pages containing a products grid (or more generally, a products result): you can use the Add to Cart button allowing this operation. In addition, in the Starter Store Boot application, the status of the cart is available under the /carts page: there you can change the number of the items or delete them. 

Once customers decide to proceed with checkout, they can start this process directly from the cart page, using the checkout button. If the customer is not authenticated, the login form will appear. After the login, the user will be redirected to the Shipment Address page: based on the shipment address saved in the account configuration, the user will be able to select only one of them.

The next phase is related to the Payment process. It is important to understand that the payment in this specific case consists of two important operations:

• Transferring money via the payment provider,
• Registration of the payment in your e-commerce backend.

These two concepts are connected with each other but must be considered as two different steps. Most of the e-commerce systems don't support OOTB integration with payment providers, this needs to be designed and implemented by system integrators. This effort is required in the Starter Store as well. 
On the other hand, the Starter Store boot application fully supports payment registration in the e-commerce backend. 

Once the payment process is completed, a new order will be created in the e-commerce backend. The list of orders is available directly in your account details section.

Components Details

The Checkout components used in the Starter Store Boot application are command chain delivery components. In addition, BRIEF provides a set of RESTful JAX-RS components for resources like Shipment and Payment: these custom REST endpoints can be invoked outside the application. They are described below in detail.

StarterStorore JAX-RS resources are extending the AbstractStarterStoreResource: this class offers all the utilities you need in order to create your custom plain resource and at the same time, use all the concepts provided by BRIEF, like commerce and connector exchanges, commerce context etc.

In addition, the Starter Store Boot application provides a built-in HST component, called CheckoutComponent, that's actually responsible for the checkout process. This will ensure that customers are authenticated before starting the checkout and that this follows a specific flow. It's also responsible for retrieving user details, like customer default shipment address.

Cart

The Cart component is a command chain delivery component. The Default Commerce Connector Set document contains the following operations:

• cartCreate, dealing with cart creation
• cartDelete, dealing with cart deletion
• cartProductList, retrieving the list of products in your cart
• cartProductAdd, adding a new product to the cart
• cartProductUpdate, updating the quantity of an item in your cart
• cartProductRemove, removing a product item from the cart
• cartCustomerUpdate, converting the anonymous cart to a customer specific cart.

For each commerce component, a related cart command has been created. As an example, in the command list of the Product Grid component you will find cartProductList. In order to use the Add to Cart button in the product grid overview, the latest cart revision must be fetched: the cartProductList command will retrieve the latest revision and make this available to the delivery tier. 

Shipment

Shipment has been implemented as a custom JAX-RS services available in BRIEF. You can find its definition in the CheckoutResource class. The REST endpoints made available by this component are:

• shipmentAddresses, exposing methods to retrieve a customer's default shipment address. In addition, this endpoint can be used to specify the shipment address to associate with the cart object. The commerce connector component used to update cart shipment address is cartShipmentAddressUpdate.
• shipmentMethods, exposing methods to retrieve a customer's default shipment method. In addition, this endpoint can be used to specify the shipment method to use for the cart object. The commerce connector component used to update cart shipment method is cartShipmentMethodUpdate 

Payment

The Payment component is a custom JAX-RS service included in BRIEF. You can find the related definition in the CheckoutResource class. The REST endpoint available is paymentRegistration: as mentioned before, this endpoint will only register the payment in your e-commerce backend. The commerce connector component used by this resource is createPayment. You will need to specify the cart Id in that commerce API request. 

As mentioned before, the integration with a payment provider is not part of the Starter Store. Howevere, the related implementation can be part of the paymentRegistration JAX-RS endpoint definition: this can be considered as a server side integration. Client side integrations with payment providers are also possible, e.g. using javascript callbacks. 

Order

Order functionality is used in different ways in the Starter Store. BRIEF defines a REST endpoint, called orderRegistration, responsible for the final order placement. The related REST endpoint definition uses the orderCreate connector component. 

In addition, authenticated customers can also retrieve a list of placed orders. This option is available in the account section, under My orders. This component is just a GenericCommandChainComponent using the orderQuery connector component.