UI and container integration

Your Mini App runs in a frame inside the CrackPay page. This page covers the viewport, what the frame allows, storage and navigation.

Viewport and layout

• Phone first. CrackPay gives your app the screen width on a phone, and at most 420 px on larger screens. Design for 360 px wide.
• Single column. No horizontal scrolling.
• Height is the space under CrackPay's header and changes when the keyboard opens. Use min-height and let content scroll.

The frame

Your app runs with:

<iframe sandbox="allow-scripts allow-forms allow-popups allow-same-origin" allow="clipboard-write">

Works	Does not work
JavaScript, forms, fetch to your own API	Navigating the top page away from CrackPay
localStorage and IndexedDB for your origin	Camera, microphone, location
Copying to the clipboard	Passkeys or WebAuthn inside your app
Links with target="_blank"	Third-party cookies in most browsers

Header and navigation

CrackPay shows a header above listed apps with a back arrow to its Apps page, and a red Test app bar above apps loaded in Developer mode. You do not need your own "close" button.

• Use your framework's router for screens inside your app.
• Open other sites in a new tab: target="_blank" rel="noreferrer".

Storage and sessions

Browsers partition a frame's storage by the site that embeds it. What your app stores while inside CrackPay is separate from what it stores when opened in a tab. Cookie-based login usually fails inside a frame: identify users by their account address, and keep any session in localStorage or memory.

Opening your app at a specific place

CrackPay passes its URL fragment to your app. A link to https://www.crackpay.xyz/apps/<your-id>#invoice=42 loads https://your-app.example/#invoice=42. Read location.hash on load.

Theming

• No required theme. Support prefers-color-scheme: dark; many CrackPay users use dark mode. Add <meta name="color-scheme" content="light dark">.
• Make it obvious the app is yours, not CrackPay's.

Mobile constraints

Concern	Recommendation
Touch targets	At least 44 × 44 px
Text	Body at least 16 px
First load	Show something within a second
Network	Show loading states; do not assume a fast connection

More in Design standards.