Table of content

Magento 2 Certified Professional JavaScript Developer Guide

Section 5: Checkout

5.1 Demonstrate understanding of checkout architecture

Describe key classes in checkout JavaScript: Actions, models, and views

What are actions, models, and views used for in checkout?

Actions, models and views in checkout implement the MVC pattern and are located in the vendor/magento/module-checkout/view/frontend/web/js folder. They are used to separate data-related logic (Model) from UI-related logic (View) от business logic (Action).

How does Magento store checkout data?

Checkout data (Magento_Checkout/js/checkout-data) is stored in Customer data and localStorage. At the checkout initialization, the Magento_Checkout/js/model/quote module is initialized from which you can get the latest data about the quote. Quote contains knockout observables that you can subscribe to in order to receive up-to-date information.

What type of classes are used for loading/posting data to the server?

Rest API is used for uploading and sending data to the server. Both actions and models execute fetching.

How does a view file update current information?

You need to change the information in two places:

  1. checkoutData (Magento_Checkout / js / checkout-data) so that the data remains after the checkout page reloads.
  2. quote (Magento_Checkout / js / model / quote) so that the data changes at the current page without reloading.

Demonstrate the ability to use the checkout steps for debugging and customization

How do you add a new checkout step?

Consider the example of creating a checkout step that contains a text field and a button for going to the next step.

Create files for layout, uiComponent and template:

  1. Create the uiComponent file:

<module dir>/view/frontend/web/js/step.js

2. Create the template file:

<module dir>/view/frontend/web/template/step.html

3.  Create layout file, that adds the newly created uiComponent into the checkout steps:

<module dir>/view/frontend/layout/checkout_index_index.xml:

We get the following result:

Magento 2 Certified Professional JavaScript Developer Guide Screenshot 1

Magento 2 Certified Professional JavaScript Developer Guide Screenshot 2

How do you modify the order of steps?

To modify the order of steps, change the sortOrder parameter in the stepNavigator.registerStep method (code, alias, title, isVisible, navigate, sortOrder). If you specify sortOrder <10, then the Test Step will be displayed before the Shipping step.

Magento 2 Certified Professional JavaScript Developer Guide Screenshot 3

If sortOrder is more than 10 and less than 20, then it will be reflected between the Shipping step and Review & Payments step

Magento 2 Certified Professional JavaScript Developer Guide Screenshot 4

If sortOrder is more than 20, then it will be displayed after the Review & Payments step

Magento 2 Certified Professional JavaScript Developer Guide Screenshot 5

However, the Review & Payments step does not have a Next button, but a Place Order button instead. In order to give the user an opportunity to switch to Test Step from the Review & Payments step, make a modification in the Review & Payments step.

Debug the data flow of each step

To achieve this, open the Network tab in the Chrome Dev Tools and enter “rest” in the search field.

Magento 2 Certified Professional JavaScript Developer Guide Screenshot 6

Then, point the cursor at Initiator and expand the call stack of ajax queries.

Magento 2 Certified Professional JavaScript Developer Guide Screenshot 7

How do you customize a step’s logic?

You can find the customization instructions at DevDocs.

Customize the shipping step rendering and saving

How does Magento save information about the shipping address for different types of checkout (logged in with default address, without default address, not logged in)?

The information is saved in quote after moving from Shipping to Review & Payments step.

In order to save information about the shipping address for different types of checkout, the POST request to REST resource is executed with the  shipping_address, billing_address, shipping_method_code, shipping_carrier_code, extension_attributes information:

  • With default address: /V1/carts/mine/shipping-information
  • Without default address: /V1/carts/mine/shipping-information
  • Not logged in: /V1/guest-carts/:cartId/shipping-information
How does Magento obtain the list of available shipping methods?

POST request to REST resource is executed after shipping address is changed:

  • Logged in, for already saved address: /V1/carts/mine/estimate-shipping-methods-by-address-id
  • Logged in, for new address: /V1/carts/mine/estimate-shipping-methods
  • Not logged in: /V1/guest-carts/:cartId/estimate-shipping-methods
Which events can trigger this process?

In vanilla Magento 2.3 estimate-shipping-methods are called if another shipping address is selected for State/Province, Zip/Postal Code or Country attributes are altered in the current shipping address.

How does Magento save a selected address and shipping method?

As it was mentioned above, Magento calls shipping-information after moving from Shipping to Review & Payments step.

5.2 Demonstrate understanding of payments

Add new payment method and payment methods renderers

Payment method declaration. Payment.xml file contains method name and type (online or offline) information.

/app/code/Vendor/Module/etc/payment.xml

Payment method default config. The configuration XML file has the default settings, including the created order status settings, name, active/inactive and PHP class, responsible for back end processing of the order, created by this method.

/app/code/Vendor/Module/etc/config.xml

Backend implementation. PHP class accounts for order backend processing and includes the realization of the basic payment method actions, like authorize, capture and refund.

/app/code/Vendor/Module/Payment/Custom.php

Layout declaration. JS-part of the payment method should be added to the checkout page jsLayout to be processed on the frontend by KnockoutJS. It includes an indication to a new JS module, accountable for the new payment method.

/app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

JS component. The component defines a necessary renderer for payment method display, as well as additional fields processing, if any are available.

/app/code/Vendor/Module/view/frontend/web/js/view/payment/custom.js

JS renderer. It is accountable for payment method rendering on the frontend and defines KnockoutJS template, used for this purpose.

/app/code/Vendor/Module/view/frontend/web/js/view/payment/method-renderer/custom-method.js

KnockoutJs template. It contains basic elements for payment method selection and configuration at the checkout page, as well as its own Place Order button realization.  /app/code/Vendor/Module/view/frontend/web/template/payment/custom.html

Modify an existing payment method

You can modify an existing payment method using Magento JS mixins to modifying/adding the existing methods. You can also completely replace the model or renderer by changing the jsLayout parameter through layout XML files, or by using the plug-in to \Magento\Checkout\Block\Checkout\LayoutProcessor::process.

How does a payment method send its data to the server?

Magento 2 API method rest/default/V1/guest-carts/payment-information or rest/default/V1/carts/mine/payment-information is used to send payment method data to the server. The choice between the two depends on whether the current customer a guest or is logged-in to the store.

Example request:

What is the correct approach to deal with sensitive data?

Local storage is unsuitable for storing sensitive data, for user browsers can be easily compromised. Server, in its turn, is also not the best choice of sensitive data storage place. Therefore, the most correct approach is to integrate with a payment provider and further application of tokenization to reference a payment.

Describe the data flow during order placement

Each available payment method renderer has its own Place Order button realization. Click binding at this button leads to the payment method model, where the method is inherited from Magento_Checkout/js/view/payment/default module.

/vendor/magento//module-checkout/view/frontend/web/js/view/payment/default.js

The method contains several verifications and a getPlaceOrderDeferredObject call that returns jQuery ajax request.

/vendor/magento/module-checkout/view/frontend/web/js/action/place-order.js

Afterward, PlaceOrderAction module creates API Payload, which differs depending on whether the current customer is logged in, and calls placeOrderService.

/vendor/magento/module-checkout/view/frontend/web/js/model/place-order.js

There, Magento 2 API URL is called that either creates an order or returns the error, further processed into various done and fail callbacks.

Which modules are involved?

Magento_Checkout, Magento_Payment, Magento_Sales, as well as payment systems’ modules.

Vlad-Yunusov

Tell us about your project

Get in touch with our team. Send us an email at contact@belvg.com or call us +16503532301

Send request