Overview
This diagram illustrates the interaction flow between a Next.js application and a Magento 2 API during an e-commerce transaction. It begins with user authentication, followed by product search and selection, leading to the creation of a cart. Once items are added, customer information is captured, and the checkout process can be handled either via direct card payment or through generating a Stripe invoice. After payment confirmation, the order is placed, and the order ID is returned to complete the process.
sequenceDiagram
participant App as App (Next.js)
participant Magento as Magento 2 API
App->>Magento: Request authorization
Magento-->>App: Return access token
App->>Magento: Search products
Magento-->>App: Return search results
App->>Magento: Get product details
Magento-->>App: Return product details
App->>Magento: Create cart
Magento-->>App: Return cart ID
App->>Magento: Add item to cart
Magento-->>App: Confirm item added
App->>Magento: Set customer information
Magento-->>App: Confirm info set
alt Card Payment
App->>Magento: Process card payment
else Stripe Invoice
App->>Magento: Request Stripe invoice
Magento-->>App: Return invoice URL/ID
end
App-->>Magento: Confirm payment processed
App->>Magento: Place order
Magento-->>App: Return order ID
