The document discusses an alternative checkout flow architecture for Magento that focuses on improved performance, scalability, and customizability. Key aspects include separating the checkout into independent applications, using a unidirectional data flow between components, supporting multi-address checkout out of the box, calculating totals in a pipeline using immutable objects, and storing totals data in a unified format. The proposed changes are aimed at simplifying integration, replacing components, and improving the scalability and extensibility of the checkout system.

1. ALTERNATIVE
CHECKOUT FLOW
Yevhen
Sentiabov
MAGENTO ARCHITECT
#MM19PL

2. #MM19PL
Checkout features
- One-page checkout with support for different shipping carriers
- Multi-address checkout
- Instant Purchase with the ability to place an order from a product page
- Multiple payments integrations like PayPal, Braintree, Authorize.net
- Vault tokenization
- Different security features like 3D-Secure verification, anti-fraud protection

3. #MM19PL
Roadmap

4. #MM19PL
Current Checkout

5. #MM19PL
Current Checkout

6. #MM19PL
Current Checkout

7. #MM19PL
Current Checkout

8. #MM19PL
Current Checkout

9. #MM19PLREST
- Multiple requests to collect needed data
- No way to limit response data

10. #MM19PLGraphQL
- All resources are connected
- Declarative data fetching
- Type system and schema definition
- Multiple queries and mutations can be done via one request

11. #MM19PL
No HTTP caching
No API versioning
Tricky to implement rate limiting
Query complexity
Query in indefinite depth
But…

12. #MM19PL
Checkout layouts
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="renders" xsi:type="array">
<!-- merge payment method renders here -->
<item name="children" xsi:type="array">
<item name="braintree" xsi:type="array">
<item name="component”
xsi:type="string">Magento_Braintree/js/view/payment/braintree</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>

13. #MM19PL
Customization drawbacks
public function importShippingRate(AbstractResult $rate)
{
$this->setCode($rate->getCarrier() . '_' . $rate->getMethod())
->setCarrier($rate->getCarrier())
->setCarrierTitle($rate->getCarrierTitle())
->setMethod($rate->getMethod())
->setMethodTitle($rate->getMethodTitle())
->setMethodDescription($rate->getMethodDescription())
->setPrice($rate->getPrice());
return $this;
}
- Add custom shipping method details
- Expose details via GraphQL API

14. #MM19PL
Multi-address with Vault
MultishippingModelCheckoutTypeMultishippingPlaceOrderInterface::place

15. #MM19PL
Checkout dependencies graph

16. Alternative Checkout
#MM19PL

17. #MM19PL
Service Isolation

18. #MM19PL
Checkout Separation
Requirements
- Independent application (installation,
data storage)
- High availability and scalability
- Components replaceability
- No synchronous communication

19. #MM19PL
Eventual Consistency

20. #MM19PL
Alternative Data Flow

21. #MM19PL
Alternative Checkout
b2d6efb2d6ef

22. #MM19PL
Alternative Checkout
b2d6efb2d6ef

23. #MM19PL
Alternative Checkout
b2d6efb2d6ef

24. #MM19PL
Alternative Checkout
b2d6efb2d6ef

25. #MM19PL
Alternative Checkout
b2d6efb2d6ef

26. #MM19PL
Checkout dependencies graph

27. #MM19PL
Checkout improvements
• Better application performance
• Components replaceability
• Improved headless integration experience (GraphQL)
• GraphQL API for building checkout flow via single HTTP query
• Separated API for Cart and Quote
• Multi-address checkout based on multi-quote flow
• API for Requisition List and Negotiable Quote

28. #MM19PL
Totals Calculation Pipeline

29. #MM19PL
Totals Calculation Pipeline

30. #MM19PL
Mutable
- Simpler to create, test and use
- Help to avoid temporal coupling
- Easier to cache
- Do not change the state- Can be updated any time
- Are thread-safe
- Help avoid side effects
- Easier to implement
- Easier to extend
- Cheaper for creation
https://github.com/magento/architecture/pull/207
Immutable

31. #MM19PL
Totals List

32. #MM19PL
Totals List

33. #MM19PL
{
"amount":1002,
"currency":"USD",
"display_currency":"EUR",
"currency_exchange_rate":0.92,
"is_applicable":true,
"code":"totals_list",
"totals": [{
"code":"subtotal",
"amount":1002,
"is_applicable":true
}, {
"code":"discount",
"amount":0,
"is_applicable":false
}, {
"code":"grand_total",
"amount":1002,
"is_applicable":true
}
]
}

34. #MM19PL
Totals Storage

35. #MM19PL
Totals Storage (UUID)

36. #MM19PL
UUID advantages & disadvantages
Unique across applications/tables/databases
Environment independent
A value is known before the entity is saved
A value does not expose the information about the entity
Suitable for distributed systems
Take up more storage space
More difficult for debugging
Less performant than the auto increment

37. #MM19PL
UUID performance

38. #MM19PL
Summary
- Performance improvements
- Components replaceability
- Improvements to API customizability and extensibility
- Independent storefront and store management applications
- Clear boundaries between Cart and Quote components
- Unidirectional flow reduces communication between components
- Multi-address checkout out-of-box
- Support of immutable multi-quotes
- A unified interface for totals calculation
- Simplified and unified totals storage

39. Thank you
for attention!
@isentiabov
#MM19PL