Skip to content

Compose QR code with title and amount header for download - #658

Merged
mnindrazaka merged 1 commit into
mainfrom
claude/keen-franklin-8xj4wo
Sep 27, 2026
Merged

mnindrazaka merged 1 commit into
mainfrom
claude/keen-franklin-8xj4wo

Conversation

@mnindrazaka

Copy link
Copy Markdown
Collaborator

Summary

Adds functionality to compose QR code images with a header containing title and amount information before download, improving the visual presentation of downloaded QR codes.

Key Changes

  • New composeQrDownloadImage function in qrDownload.ts that:

    • Takes a base64 QR code, title, and amount label
    • Renders them onto a canvas with white background and padding
    • Returns a ComposedQrImage with the composed base64, width, and height
    • Handles image loading and canvas context errors gracefully
  • Constants for QR canvas styling (padding, fonts, heights, gaps) extracted to module-level for maintainability

  • Updated QrisPaymentView to:

    • Call composeQrDownloadImage with order brand name and formatted amount
    • Use composed image for both direct download and fallback display
    • Adjust fallback image height based on composed dimensions to maintain aspect ratio
  • Comprehensive test coverage for composeQrDownloadImage including:

    • Happy path validation of canvas dimensions and output
    • Error handling when QR image fails to load
    • Mocked Image and canvas APIs for deterministic testing

Implementation Details

The composition creates a canvas with:

  • White background with 32px padding on all sides
  • Title (bold 20px) and amount (bold 28px) centered at the top
  • QR code positioned below the header with proper spacing
  • Final dimensions calculated to accommodate all elements

https://claude.ai/code/session_01Bk6aVyMJwPGoRjwWvCoauJ

Some e-wallet apps (e.g. Dana) render the raw QR crop without context.
Compose the download onto a white canvas with padding and the brand
name plus the total on top of the code, instead of shipping the bare
QR pixels.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Bk6aVyMJwPGoRjwWvCoauJ
@vercel

vercel Bot commented Sep 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

3 Skipped Deployments
Project Deployment Actions Updated
gatherloop-order Ignored Ignored Sep 27, 2026 3:34am UTC
gatherloop-pos Ignored Ignored Sep 27, 2026 3:34am UTC
gatherloop-ui-storybook Ignored Ignored Sep 27, 2026 3:34am UTC

@mnindrazaka
mnindrazaka merged commit 0524d14 into main Sep 27, 2026
7 checks passed
@mnindrazaka
mnindrazaka deleted the claude/keen-franklin-8xj4wo branch September 27, 2026 03:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants