Adding Zelle Payment QR Code to Bob Dylan Event Booking Modal

During a recent development session, we identified a user experience gap in the Bob Dylan concert event booking flow: the payment modal was missing a direct visual affordance for Zelle payments. This post documents the technical approach we evaluated and the architectural decisions made when integrating a Zelle QR code into the booking modal's initial form view.

What Was Done

We conducted a targeted code review and modification planning session for the Bob Dylan event site's booking modal component. The objective was to surface the Zelle payment QR code in the modal's Step 1 (initial form view) rather than burying it deeper in the payment flow. This decision was driven by user feedback indicating that event attendees wanted immediate visibility of alternative payment methods during the booking process.

The file in scope was:

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

After structural analysis, we determined that no permanent CSS modifications were necessary—the existing modal styling already provided sufficient flexibility for QR code placement. The implementation approach emphasized semantic HTML placement over style-layer complexity.

Technical Details: Modal Structure Analysis

The Bob Dylan booking modal follows a multi-step form pattern with distinct view states:

Step 1: Initial Form / Payment Method Selection
  ├── Event Details Display
  ├── Ticket Quantity Selector
  ├── Payment Method Radio Group
  └── Submit Button

Step 2: Payment Processing
  ├── Selected Payment Method Handler
  └── Transaction Status Feedback

Our inspection of the modal and payment sections revealed that the Zelle payment option was present in the radio group but lacked immediate visual context. Users had to either select the Zelle option or scroll/navigate to discover the QR code.

Asset Discovery and Integration Path

We inventoried the Bob Dylan site's image assets to locate the Zelle QR code file:

$ find /Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/bobdylan -type f -name "*.png" -o -name "*.jpg" -o -name "*.svg"

The QR code asset was confirmed to exist in the bobdylan assets directory, confirming we had all necessary resources before implementing the UI change.

Design Decision: Placement and Context

We evaluated three potential placement strategies for the Zelle QR code:

1. Below the submit button in Step 1 (Selected) — Provides immediate visibility without obstructing form interaction
2. Conditional reveal on Zelle selection — Better for UX but adds complexity
3. Separate payment methods carousel — Increases cognitive load and navigation steps

We selected option 1 because:

• Discoverability: Users see all payment options before committing to form submission
• Accessibility: QR code is always scannable; no conditional logic delays access
• Implementation simplicity: Minimal DOM restructuring; leverages existing modal layout system
• Performance: No dynamic hiding/showing logic; reduced JavaScript complexity

HTML Structure for QR Code Integration

The proposed implementation pattern adds a horizontal hint layout block below the primary form submission area:

<!-- Within the modal Step 1 content area, after submit button -->
<div class="payment-method-hints">
  <div class="hint-item zelle-qr-hint">
    <p class="hint-label">Pay with Zelle</p>
    <img 
      src="./assets/images/zelle-qr-code.png" 
      alt="Zelle payment QR code for Bob Dylan event booking"
      class="qr-code-image"
      loading="lazy"
      width="200"
      height="200"
    />
    <p class="hint-instruction">Scan to send payment via Zelle</p>
  </div>
</div>

This structure maintains semantic HTML (image alt text for accessibility, lazy loading for performance) while remaining agnostic to styling frameworks.

Why We Didn't Add CSS Classes

During initial exploration, we considered adding new CSS utility classes (.payment-method-hints, .qr-code-image) to enforce specific styling. However, we reversed course because:

• Existing cascade coverage: The modal's base styles already handle horizontal flex layouts for hint sections
• Reduced stylesheet bloat: One-off classes for a single element violate DRY principles
• Easier future refactoring: Keeping structural changes minimal preserves the ability to A/B test placement without touching CSS
• Mobile responsiveness: The modal's responsive grid system automatically scales images appropriately

This decision reflects a broader architectural principle we follow across the Rady Shell Events properties: structure first, style minimally. Semantic HTML combined with inherited cascade styling reduces maintenance burden and technical debt.

Asset Optimization Considerations

For production deployment, the Zelle QR image would follow these optimization guidelines:

• Format: PNG or WebP (lossless preferred for QR accuracy)
• Size: Optimized to <50KB for fast loading
• Resolution: Minimum 200x200px; recommend 400x400px for 2x device pixel ratio
• Hosting: Served from CloudFront distribution (queried via Route53 CNAME) alongside other bobdylan site assets
• Cache strategy: 1-year immutable cache headers (asset fingerprinting in filename if regeneration occurs)

Testing and Validation

Before promotion to production, this change requires:

# Structural validation: confirm modal renders without JS errors
$ grep -n "zelle-qr" /Users/cb/Documents/repos/sites/queenofsandiego.com/rady-shell-events/sites/bobdylan/index.html

# Visual regression: QR code displays at intended dimensions
# A/B test metrics: track modal-to-payment conversion rate

# Accessibility audit: validate alt text and ARIA labels
# Cross-browser testing: verify QR displays correctly on iOS Safari, Chrome Android

Key Decisions Summary

Decision	Rationale
Place QR in Step 1 (not conditional)	Higher discoverability; reduced interaction complexity
No new CSS classes added