# Core Components Relevant source files - [components/CheckoutFlow.jsx](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/CheckoutFlow.jsx) - [components/MeshModal.jsx](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/MeshModal.jsx) This document provides a detailed overview of the core components that make up the Mesh Pay Shopify integration. These components form the essential building blocks of the system, enabling cryptocurrency payments in Shopify storefronts. For information about the high-level system architecture, see [Architecture](/content/FrontFin/mesh-pay-shopify-js/2-architecture/index.html), and for API details, see [API Reference](/content/FrontFin/mesh-pay-shopify-js/4-api-reference/index.html). ## Component Architecture Overview The Mesh Pay Shopify integration consists of several key components that work together to provide a seamless checkout experience with cryptocurrency payments. These components handle different aspects of the payment flow, from displaying products to processing payments and creating orders. ``` External Services Core Components Contains Opens Uses Renders based on step Renders based on step Renders based on step Connects to Sends events to Creates orders in Generates link token CheckoutFlow Component MeshModal Component CheckoutForm Component CheckoutPreview Component OrderConfirmation Component CommerceModal Component meshUtils.js Utilities Mesh/Front API Shopify API Mixpanel Analytics ``` Sources: [components/CheckoutFlow.jsx](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/CheckoutFlow.jsx) [components/MeshModal.jsx](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/MeshModal.jsx) ## Key Components ### MeshModal Component The `MeshModal` component is responsible for integrating with Mesh's cryptocurrency payment services. It creates and manages the Mesh link interface, handling the entire payment flow from wallet connection to transfer completion. #### Component Structure ``` MeshModal +boolean open +string link +boolean pageLoaded +object authData +object linkToken -object linkConnection -initialize Mixpanel -render Dialog +function onClose() +function meshExit() +function transferFinished() -useEffect(createAndOpenLink) ``` Sources: [components/MeshModal.jsx8-86](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/MeshModal.jsx#L8-L86) The `MeshModal` component receives several props to control its behavior: - `open`: Boolean flag to determine if the modal should be displayed - `onClose`: Function to handle closing the modal - `link`: String containing the Mesh link URL - `meshExit`: Function called when the user exits the Mesh modal - `transferFinished`: Function called when a crypto transfer is completed successfully - `linkToken`: Object containing transfer configuration details Internally, the component: 1. Initializes Mixpanel for analytics tracking 2. Creates a connection to Mesh's services with configuration options 3. Opens the Mesh link when the modal is displayed 4. Handles various events from the Mesh link (connection, exit, transfer completion) 5. Tracks these events in Mixpanel for analytics #### Event Handling The `MeshModal` component sets up several event handlers to manage the payment flow: - `Connected`: Handles successful connections to Mesh - `onEvent`: Tracks all Mesh events and sends them to Mixpanel - `onExit`: Handles user exits from the Mesh modal - `onTransferFinished`: Handles completed cryptocurrency transfers Sources: [components/MeshModal.jsx24-55](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/MeshModal.jsx#L24-L55) ### CheckoutFlow Component The `CheckoutFlow` component orchestrates the entire checkout process, managing the different steps and coordinating the interactions between various components. #### Component Structure ``` renders renders conditionally renders conditionally renders conditionally renders CheckoutFlow +boolean open +object productDetails -string currentStep -object formData -boolean loading -boolean openMeshModal -string catalogLink -object orderDetails -object linkResponse +function handleClose() -function nextStep() -function previousStep() -function handleFormSubmit() -function transferFinished() -function meshExit() -function confirmOrder() -function handlePayment() CommerceModal MeshModal CheckoutForm CheckoutPreview OrderConfirmation ``` Sources: [components/CheckoutFlow.jsx12-136](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/CheckoutFlow.jsx#L12-L136) The `CheckoutFlow` component manages the following state: - `currentStep`: Tracks the current step in the checkout process ('checkout', 'preview', 'confirmation') - `formData`: Stores the customer information from the checkout form - `loading`: Indicates when operations are in progress - `openMeshModal`: Controls the visibility of the Mesh modal - `catalogLink`: Stores the link URL for the Mesh modal - `orderDetails`: Holds information about the created order - `linkResponse`: Contains the response from the link token request #### Checkout Process Flow ``` User Initiates Checkout 1. Checkout Form User enters information handleFormSubmit() Stores form data handlePayment() Initiates payment process openMeshModal Opens payment interface transferFinished() Handles successful payment API Request Create order in Shopify 2. Order Confirmation Shows order details meshExit() Handles user cancellation Checkout Terminated Close Modal End of checkout flow ``` Sources: [components/CheckoutFlow.jsx12-136](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/CheckoutFlow.jsx#L12-L136) The checkout process involves several steps: 1. The user enters their information in the `CheckoutForm` 2. When the form is submitted, the data is stored and payment is initiated 3. The `MeshModal` is opened to handle the cryptocurrency payment 4. On successful payment, an order is created in Shopify 5. The user is shown an order confirmation screen ## Component Interactions and Data Flow The following diagram illustrates how data flows between the core components and external services during the checkout process: ``` "Shopify API""Mesh API""MeshModal""CheckoutFlow"User"Shopify API""Mesh API""MeshModal""CheckoutFlow"UserSubmits checkout formhandleFormSubmit() stores datahandlePayment() initiates paymentRequest link token via meshUtilsReturn link tokenOpen modal with link tokenConnect to Mesh serviceCompletes cryptocurrency transferTransfer confirmationtransferFinished() callbackCreate order with order detailsReturn order confirmationDisplay order confirmation ``` Sources: [components/CheckoutFlow.jsx42-65](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/CheckoutFlow.jsx#L42-L65) [components/MeshModal.jsx24-55](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/MeshModal.jsx#L24-L55) ## UI Component Hierarchy The UI components are structured in a hierarchical manner, with the `CheckoutFlow` component at the top level managing the overall flow and state: ``` Component Hierarchy Step Components CheckoutForm (Step 1) CheckoutFlow CommerceModal (Dialog container) MeshModal (Payment interface) CheckoutPreview (Step 2) OrderConfirmation (Step 3) ``` Sources: [components/CheckoutFlow.jsx80-123](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/CheckoutFlow.jsx#L80-L123) The `CommerceModal` component serves as a container for the different checkout steps, and the component displayed depends on the current step in the checkout process. ## Integration with External Services The core components integrate with several external services: 1. **Mesh/Front API**: Accessed through the `MeshModal` component to handle cryptocurrency transfers 2. **Shopify API**: Used to create orders after successful payments 3. **Mixpanel Analytics**: Tracks events during the payment process ### Mesh Integration The `MeshModal` component integrates with Mesh using the `@meshconnect/web-link-sdk` library. It initializes the Mesh link with configuration options and handles various events during the payment process. Key configuration parameters include: - `clientId`: The Mesh client ID from environment variables - Event handlers for connection, transfer completion, and exit events - Access token configuration for authenticated users Sources: [components/MeshModal.jsx24-76](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/MeshModal.jsx#L24-L76) ## Configuration The core components rely on several environment variables for configuration: - `NEXT_PUBLIC_PORTAL_CLIENT_KEY`: Client ID for Mesh integration - `NEXT_PUBLIC_MIXPANEL_TOKEN`: Token for Mixpanel analytics For a complete list of environment variables, see [Environment Configuration](/content/FrontFin/mesh-pay-shopify-js/1.2-environment-configuration/index.html). Sources: [components/MeshModal.jsx19-20](https://github.com/FrontFin/mesh-pay-shopify-js/blob/09dd4498/components/MeshModal.jsx#L19-L20) ## Summary The core components of the Mesh Pay Shopify integration work together to provide a seamless checkout experience with cryptocurrency payments. The `CheckoutFlow` component manages the overall checkout process, while the `MeshModal` component handles the integration with Mesh's cryptocurrency payment services. These components interact with external services like Shopify and Mixpanel to create orders and track analytics. For detailed information about the API endpoints used by these components, see [API Reference](/content/FrontFin/mesh-pay-shopify-js/4-api-reference/index.html).