System Overview

This document provides a technical overview of the Mesh Pay Shopify integration architecture, explaining its major components and their interactions. It covers the core application structure, system boundaries, and how data flows through the various layers of the application. For detailed information about specific data flows during checkout and payment processes, see Data Flow.

Purpose and Scope

The Mesh Pay Shopify integration is a Next.js application that enables cryptocurrency payments for Shopify storefronts. It serves as a bridge between Shopify's e-commerce platform and Mesh's cryptocurrency transfer capabilities, allowing users to purchase products using crypto assets from numerous exchanges and DeFi wallets.

Sources: README.md1-5 package.json1-10

High-Level Architecture

External Services

Backend Services

Frontend Application

UI Components

CheckoutFlow Component

MeshModal Component

Next.js API Routes

/api/products

/api/orders

/api/transfers

Shopify API

Mesh/Front API

Mixpanel Analytics

The architecture consists of three major layers:

  1. Frontend Application: React-based components providing the user interface
  2. Backend Services: Next.js API routes acting as intermediaries to external services
  3. External Services: Third-party APIs providing critical functionality

The application primarily uses server-side processing through Next.js API routes to communicate with external services, while maintaining a responsive client-side experience through React components.

Sources: package.json11-25 README.md3-5

Key System Components

Frontend Components

Component Purpose Key Dependencies
UI Components Base visual elements and layouts React, MUI components
CheckoutFlow Manages the checkout process and customer information MeshModal, API routes
MeshModal Handles crypto wallet connections and transfers Mesh Web Link SDK

The frontend is built with React and uses Material UI (@mui/material) for styling components. The MeshModal component utilizes the Mesh Web Link SDK (@meshconnect/web-link-sdk) to integrate with cryptocurrency wallets and exchanges.

Sources: package.json11-25 README.md61-66

Backend Services

External APIs

API Routes

/api/products

/api/orders/create

/api/orders

/api/orders/update

/api/transfers/linkToken

/api/transfers/deposits

Shopify Admin API

Shopify Storefront API

Mesh/Front API

The backend consists of Next.js API routes that serve as intermediaries between the frontend and external services. These routes handle authentication, data transformation, and routing requests to the appropriate external APIs.

Sources: README.md29-36 README.md38-45

External Services Integration

The application integrates with the following external services:

  1. Shopify APIs:
    • Storefront API: Accessing product information
    • Admin API: Managing orders and customer data
  2. Mesh/Front APIs:
    • API endpoints for creating link tokens
    • Services for handling cryptocurrency transfers
  3. Mixpanel Analytics (optional):
    • Tracking user interactions and payment flows

Integration with these services is configured through environment variables, making the application adaptable to different deployment environments.

Sources: README.md29-66

Data Flow for Cryptocurrency Payments

"Mesh API""Shopify API""Next.js API Routes""React Components"User"Mesh API""Shopify API""Next.js API Routes""React Components"User
View productRequest product details (/api/products)GET product informationReturn product dataDisplay product infoClick "Buy Now"Open CheckoutFlowEnter order detailsRequest link token (/api/transfers/linkToken)Create link tokenReturn link tokenOpen MeshModal with tokenComplete payment in MeshModalProcess crypto transferTransfer confirmationCreate order in Shopify (/api/orders/create)POST order dataReturn order confirmationDisplay order confirmation to user

This diagram illustrates the flow of data through the system during a cryptocurrency payment process. The sequence shows how the frontend components, backend API routes, and external services interact to facilitate a complete purchase.

Sources: README.md3-5 README.md48-57

System Configuration

The application relies heavily on environment variables for configuration, organized into three main categories:

Shopify Configuration

SHOPIFY_STOREFRONT_ACCESS_TOKEN
SHOPIFY_STORE_DOMAIN
SHOPIFY_PRODUCT_ID
NEXT_PUBLIC_SHOPIFY_ADMIN_DOMAIN

Mesh Configuration

NEXT_PUBLIC_MESH_API_URL
MESH_API_URL
MESH_API_KEY
MESH_CLIENT_ID
NEXT_PUBLIC_MESH_NETWORK_ADDRESS

Blockchain Configuration

NEXT_PUBLIC_CHAIN
NEXT_PUBLIC_SYMBOL
NEXT_PUBLIC_USERID

These configuration parameters allow for flexible deployment in different environments and with different cryptocurrency networks.

Sources: README.md29-57

Technical Implementation

The application is built with modern web technologies:

  • Next.js: Provides both server-side and client-side rendering capabilities
  • React: Powers the user interface components
  • Node.js: Server-side runtime environment (version 16.x+)
  • TailwindCSS: Handles styling and responsive design
  • Material UI: Provides additional UI components and styling

The combination of these technologies enables a seamless experience that handles complex cryptocurrency operations while maintaining a user-friendly interface.

Sources: package.json5-37 README.md7-11

System Boundaries and Constraints

The system has several notable boundaries and constraints:

  1. Cryptocurrency Support: The default configuration supports Solana (SOL), but can be configured for other networks through environment variables.

  2. External Service Dependencies: The application requires active connections to both Shopify and Mesh services to function properly.

  3. Environment Configuration: Proper configuration through environment variables is essential for the application to work correctly.

  4. Browser Compatibility: The frontend components require modern browsers that support the latest JavaScript features.

Understanding these boundaries is important for both deployment and future development of the application.

Sources: README.md48-57 README.md68-83