Visual Diagrams | Webflow Integration KB

Overview

These diagrams illustrate the updated architecture with the following key features:

Frontend Layer: Supports Webflow, 11ty, and Native Shopify Theme
Email Provider: Native Shopify Email
Backend Service: Shared Xano middleware

1. Architecture Diagram

High-level view of system components organized into four layers: Frontend, Middleware, Commerce, and Analytics.

graph TB
    subgraph Frontend["Frontend Layer (Webflow / 11ty / Native Shopify Theme)"]
        FormUI[Checkout Form UI]
        XanoLib[Xano Webflow API Library]
        GTMLib[GTM Tracking Library]
        ShowData[Show Success / Data / Alert]

        FormUI --> XanoLib
        XanoLib --> ShowData
        XanoLib --> GTMLib
    end

    subgraph Middleware["Middleware Layer (Shared Xano)"]
        CheckoutAPI[POST /checkout/create]
        WebhookAPI[POST /webhooks/shopify/checkout]
        Validator[SD-JWT+kb Validator]
        Transformer[UCP Data Transformer]
        Database[(Database:
checkout_sessions
user_consent_history
shopify_webhooks)]
        OrderDetails[Order Details
with API Key]
        SyncData[Sync Data]
        LogUpdate[Log & Update]

        CheckoutAPI --> Validator
        Validator --> Database
        CheckoutAPI --> Transformer
        WebhookAPI --> LogUpdate
        LogUpdate --> Database
        WebhookAPI --> SyncData
    end

    subgraph Commerce["Commerce Layer (Shopify)"]
        UCPAPI[UCP API Endpoint
+ ap2.checkout_mandate]
        WebhookSys[Webhook System]
        OrderMgmt[Order Management]
        CRM[Customer CRM
+ Meta Objects]
        ShopifyEmail[Native Shopify Email]

        UCPAPI --> OrderMgmt
        OrderMgmt --> WebhookSys
        WebhookSys --> CRM
        OrderMgmt --> ShopifyEmail
    end

    subgraph Analytics["Analytics Layer"]
        GTM[Google Tag Manager]
        DataLayer[Data Layer Events]
        GA4[Google Analytics 4]

        GTM --> DataLayer
        DataLayer --> GA4
    end

    %% Connections between layers
    XanoLib -->|AJAX POST| CheckoutAPI
    Transformer -->|UCP Request
+ ap2.checkout_mandate| UCPAPI
    UCPAPI -->|Success Response| OrderDetails
    OrderDetails --> XanoLib
    WebhookSys -.->|Async Webhook
checkouts/complete| WebhookAPI
    SyncData -->|Update| CRM
    GTMLib -->|Push Events
via dataLayer| GTM
    WebhookAPI -->|Verify HMAC| WebhookSys

2. Data Flow Diagram

Complete checkout process flow with decision points, error handling paths, and asynchronous webhook processing.

graph TB
    %% User Interaction Layer
    Start([User Fills Checkout Form])
    ClientValidation[Client-Side Validation]
    GTMStart[GTM Track checkout_start]
    UserSubmit([User Clicks Submit])
    XanoIntercept[Xano Webflow API
Intercepts Submit]
    SerializeData[Serializes Form Data
buyer email to JSON]
    GTMSubmit[GTM Track checkout_submit]

    %% Xano Middleware Layer
    XanoReceive[Shared Xano Receives Request]
    ValidatePattern{Validate
SD-JWT+kb
Pattern}
    CreateSession[Create checkout_sessions
Record]
    TransformUCP[Transform to
UCP Format]
    AddMandate[Add ap2.checkout_mandate
to Request]
    PostShopify[POST to Shopify
UCP API]

    %% Shopify Commerce Layer
    ShopifyReceive[Shopify Commerce Platform
Receives Request]
    ValidateMandate{Validate
Checkout
Mandate}
    ProcessCheckout[Process Checkout]
    CreateOrder[Create Order
Async]

    %% Asynchronous Webhook Flow
    WebhookSend[Shopify Sends
checkouts/complete
Webhook]
    XanoWebhook[Shared Xano Webhook Endpoint]
    VerifyHMAC[Verify HMAC Signature]
    LogWebhook[Log to shopify_webhooks
table]
    UpdateStatus[Update checkout_sessions
status = completed]
    SyncCRM[Sync to Shopify
Customer CRM]
    UpdateMeta[Update Meta Objects
+ User Tags]
    GTMUpdate[GTM Track
first_object_update]
    Return200[Return 200]

    %% Response Handling
    XanoSuccess[Shared Xano Receives Success]
    XanoError[Return 400 Error]
    DisplayError[Display Validation Error]
    GTMPurchase[GTM Track purchase]
    SuccessPage[Redirect to
Success Page]
    SuccessMessage[Show Success Message]
    WebflowError[Webflow Shows
as form-fail]

    %% Flow
    Start --> ClientValidation
    ClientValidation -->|Valid| GTMStart
    GTMStart --> UserSubmit
    UserSubmit --> XanoIntercept
    XanoIntercept --> SerializeData
    SerializeData --> GTMSubmit
    GTMSubmit --> XanoReceive

    XanoReceive --> ValidatePattern
    ValidatePattern -->|Invalid| XanoError
    ValidatePattern -->|Valid| CreateSession
    CreateSession --> TransformUCP
    TransformUCP --> AddMandate
    AddMandate --> PostShopify

    PostShopify --> ShopifyReceive
    ShopifyReceive --> ValidateMandate
    ValidateMandate -->|Invalid| XanoError
    ValidateMandate -->|Valid| ProcessCheckout
    ProcessCheckout --> CreateOrder
    CreateOrder --> XanoSuccess

    %% Async Webhook Path
    CreateOrder -.->|Async| WebhookSend
    WebhookSend --> XanoWebhook
    XanoWebhook --> VerifyHMAC
    VerifyHMAC -->|Valid| LogWebhook
    VerifyHMAC -->|Invalid| Return200
    LogWebhook --> UpdateStatus
    UpdateStatus --> SyncCRM
    SyncCRM --> UpdateMeta
    UpdateMeta --> GTMUpdate
    GTMUpdate --> Return200

    %% Error and Success Paths
    XanoError --> WebflowError
    WebflowError --> DisplayError
    XanoSuccess --> GTMPurchase
    GTMPurchase --> SuccessPage
    SuccessPage --> SuccessMessage

3. Sequence Diagram

Chronological interactions between system components across six phases.

sequenceDiagram
    participant User
    participant Frontend as Frontend Layer
(Webflow/11ty/Native Shopify Theme)
    participant XanoAPI as Xano Webflow API
    participant GTM as Google Tag Manager
    participant Xano as Shared Xano Middleware
    participant Shopify as Shopify UCP API
    participant ShopifyWebhook as Shopify Webhooks
    participant ShopifyEmail as Native Shopify Email

    Note over User,Frontend: Phase 1: Form Interaction (0-2 seconds)
    User->>Frontend: Fill out checkout form
    User->>Frontend: Enter email address
    Frontend->>GTM: Push checkout_start event

    Note over User,Frontend: Phase 2: Form Submission (2-3 seconds)
    User->>Frontend: Click "Place Order"
    Frontend->>XanoAPI: Form submission
    XanoAPI->>GTM: Push checkout_submit event

    Note over XanoAPI,Xano: Phase 3: Xano Processing (3-4 seconds)
    XanoAPI->>Xano: POST /checkout/create
with form data
    Xano->>Xano: Validate SD-JWT+kb pattern
    Xano->>Xano: Create checkout_sessions record
    Xano->>Xano: Transform to UCP format
    Xano->>Xano: Add ap2.checkout_mandate

    Note over Xano,Shopify: Phase 4: Shopify Validation (4-5 seconds)
    Xano->>Shopify: POST to Shopify UCP API
with UCP request + ap2.checkout_mandate
    Shopify->>Shopify: Validate checkout mandate
    Shopify->>Shopify: Create order
    Shopify->>Xano: Order details + Checkout ID

    Note over Xano,Frontend: Phase 5: Response Handling (5-6 seconds)
    Xano->>Xano: Update checkout_sessions
with checkout_id
    Xano->>XanoAPI: Success response
    XanoAPI->>GTM: Push purchase event
with transaction data
    XanoAPI->>Frontend: Display success message
    Frontend->>User: Show success page

    rect rgb(255, 249, 196)
        Note over ShopifyWebhook,GTM: Phase 6: Webhook Processing (10-30 seconds, async)
        ShopifyWebhook->>Xano: POST /webhooks/shopify/checkout
with checkout data
        Xano->>Xano: Verify HMAC signature
        Xano->>Xano: Log to shopify_webhooks table
        Xano->>Xano: Update checkout_sessions
status = completed
        Xano->>Shopify: Sync to Shopify Customer CRM
        Xano->>Shopify: Update Meta Objects + Tags
        Xano->>ShopifyEmail: Trigger Native Shopify Email
        Xano->>GTM: Push object_update event
        GTM->>GTM: Track GTM event
        Xano->>ShopifyWebhook: 200 OK
    end

Color Coding

Color	Layer/Operation
Light Blue	User interaction points and frontend operations
Tan/Beige	Shared Xano middleware operations
Light Green	Shopify commerce operations
Light Purple	Asynchronous webhook processing
Yellow	GTM tracking events