Core Components

Relevant source files

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, and for API details, see API Reference.

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 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

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

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

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

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 components/MeshModal.jsx24-55

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

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

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.

Sources: components/MeshModal.jsx19-20

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.