Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Integrating Zelle QR Code Payment Method into Event Booking Modal

Overview

During a recent development session, we enhanced the event booking experience for the Bob Dylan concert page by integrating a Zelle QR code payment option directly into the booking modal. This change simplifies the payment flow for users by providing an alternative payment method alongside traditional form-based checkout, reducing friction in the booking process.

What Was Done

We modified the booking modal interface on the Bob Dylan event page to display a Zelle QR code within the initial form step (Step 1). This required:

  • Identifying the modal structure in the existing HTML markup
  • Locating the Zelle QR code asset in the project image directory
  • Inserting the QR code image into the payment section of the modal
  • Positioning it strategically below the primary call-to-action to guide users toward alternative payment options

The implementation maintains the existing modal workflow while adding a visual affordance for users who prefer Zelle payments.

Technical Details

File Structure and Location

The primary file modified was located at:

/Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/bobdylan/index.html

The project follows a site-based directory structure where each event (in this case, Bob Dylan) has its own subdirectory containing:

  • index.html — Main event page with embedded booking modal
  • assets/images/ — Static image assets including the Zelle QR code
  • CSS and JavaScript modules for modal functionality

Modal Architecture

The booking modal is structured as a multi-step form with distinct sections:

  • Step 1 (Initial Form View): Payment method selection and customer information
  • Subsequent Steps: Confirmation and completion screens

The Zelle QR code was inserted into Step 1 as a complementary visual element positioned below the primary submit button. This placement follows UX patterns where alternative options are presented below the primary action, allowing users to discover them naturally without cluttering the main interaction path.

Asset Integration

The Zelle QR code asset exists in the project's image directory. Rather than hosting it externally, we leveraged the existing local asset structure to reduce external dependencies and improve page load performance. The image path follows the pattern:

/assets/images/zelle-qr-code.png

This relative path approach ensures consistency across development, staging, and production environments without requiring environment-specific configuration.

Implementation Approach

Discovery and Analysis

The development process began with systematic exploration of the codebase:

  • Located Bob Dylan page source files within the sites directory structure
  • Examined the complete modal HTML structure to understand step progression and form sections
  • Searched for existing modal and payment-related markup to understand the current implementation
  • Identified the assets directory and confirmed the Zelle QR code image availability

This exploration was critical because it revealed the modal's existing layout constraints and identified the optimal placement for the new payment method indicator.

Integration Strategy

Rather than creating entirely new CSS classes, we initially explored styling options but determined that the existing modal structure provided sufficient flexibility. The QR code was positioned as a "hint" element below the primary form submission area, signaling an alternative payment pathway without disrupting the primary booking flow.

The decision to place it in Step 1 (the initial form view) rather than a dedicated payment selection screen was intentional: this maximizes visibility at the moment users are most engaged with completing their booking.

Key Decisions and Rationale

Why Step 1 Placement?

Placing the Zelle QR code in the initial form step provides immediate visibility when users interact with the booking modal. Research on payment friction shows that users appreciate seeing all available payment options upfront rather than discovering them through progressive disclosure. This reduces the cognitive load of "finding" alternative payment methods.

Why Horizontal Hint Layout?

A horizontal layout below the submit button creates visual separation from the primary form elements while maintaining contextual proximity. Users complete the form, see their submission button, and immediately below find an alternative they can pursue if preferred. This respects the visual hierarchy while accommodating multiple payment options.

Why Avoid Additional CSS?

During implementation, we explored adding custom CSS styling to enhance the QR code presentation. However, we ultimately reverted these changes because:

  • The existing modal styles already provided adequate visual distinction
  • Minimal CSS changes reduce maintenance burden and potential style conflicts
  • The image itself (QR code) is self-explanatory and requires minimal additional context
  • Keeping changes scoped to HTML markup reduces risk of unintended style cascades affecting other modal elements

This "minimal change" philosophy is particularly important in established projects where CSS interdependencies may not be immediately obvious.

Development Workflow

The session employed a methodical exploration-and-verification approach:

# Find Bob Dylan page files
find . -path "*bobdylan*" -name "index.html"

# List available sites
ls -la /rady-shell-events/sites/

# Examine Bob Dylan site structure
ls -la /rady-shell-events/sites/bobdylan/

# Search for modal and payment-related HTML sections
grep -n "modal\|payment" bobdylan/index.html

# List available image assets
ls -la /rady-shell-events/sites/bobdylan/assets/images/

This command sequence allowed precise identification of the modal structure and confirmation that the Zelle QR code asset was available before proceeding with implementation.

Infrastructure Considerations

While this change is primarily front-end markup, it has minor implications for the deployment pipeline:

  • Asset Delivery: The QR code image is served from the same domain as the HTML, eliminating cross-origin concerns
  • Cache Strategy: Since the asset path is stable and the QR code content is static, existing cache headers apply without modification
  • Build Pipeline: No changes to build scripts or asset processing are required; the image is already included in the project structure

The change is fully backward compatible and requires no infrastructure updates.

What's Next

Future enhancements could include:

  • A/B testing to measure whether QR code visibility affects payment method selection
  • Adding analytics events to track clicks or interactions with the Zelle QR code
  • Extending this pattern to other event pages within the queenofsandiego.com ecosystem
  • Implementing QR code generation dynamically if the Zelle identifier or amount changes per event

This approach demonstrates how incremental UI improvements can enhance user experience without requiring significant architectural changes or infrastructure modifications.