{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-cashier/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Mobile & layout","siteUrl":"https://docs.omno.com"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"mobile--layout","__idx":0},"children":["Mobile & layout"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"device-detection","__idx":1},"children":["Device detection"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK auto-detects device type:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Desktop"]}," — a modal overlay with backdrop and close button."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mobile"]}," — a bottom sheet optimised for touch."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Override detection with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["device"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { DeviceType } from \"@omno-payment/checkout-js\";\n\nconst cashier = new CashierSDK({\n  baseUrl: \"https://checkout.omno.com\",\n  device: DeviceType.MOBILE,\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"mobile-sheet-height","__idx":2},"children":["Mobile sheet height"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default the bottom sheet sizes to its content, capped at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["90vh"]},". Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.mobile.height"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cashier = new CashierSDK({\n  baseUrl: \"https://checkout.omno.com\",\n  styles: {\n    mobile: {\n      height: \"full\", // full-screen (100% of the viewport)\n      // \"auto\" or omitted → default (content height, 90vh cap)\n      // \"200px\" | \"40%\" | \"70vh\" → cap the sheet at that height\n    },\n  },\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Applies only on the mobile mount; ignored for the desktop modal and container mounts."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Accepted values: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'full'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'auto'"]},", or a CSS length/percentage (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["px"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["%"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vh"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dvh"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["svh"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rem"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["em"]},"). Any other value falls back to the default."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"modal-styling","__idx":3},"children":["Modal styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.modal"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ModalStyles"]},"): ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderRadius"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["zIndex"]},"."," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.mobile"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MobileStyles"]},"): ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["zIndex"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"single-column-layout","__idx":4},"children":["Single-column layout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/cashier/single-payment"},"children":["Single Payment"]},", open with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["layout: 'single'"]}," to get the single-column, form-first layout:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"cashier.open({ sessionId, token, layout: \"single\" });\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"build-it-","__idx":5},"children":["Build it →"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/cashier/sdk/configuration"},"children":["Configuration"]}," · ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/cashier/sdk/open"},"children":["Opening the Cashier"]}," · ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/cashier/single-payment"},"children":["Single Payment"]}]}]}]},"headings":[{"value":"Mobile & layout","id":"mobile--layout","depth":1},{"value":"Device detection","id":"device-detection","depth":2},{"value":"Mobile sheet height","id":"mobile-sheet-height","depth":2},{"value":"Modal styling","id":"modal-styling","depth":2},{"value":"Single-column layout","id":"single-column-layout","depth":2},{"value":"Build it →","id":"build-it-","depth":2}],"frontmatter":{"title":"Mobile & layout","description":"Device detection and overrides, the mobile bottom-sheet height rules, modal styling, and the single-column layout for Single Payment.","seo":{"title":"Mobile & layout"}},"lastModified":"2026-11-06T11:46:00.425Z","pagePropGetterError":{"message":"","name":""}},"slug":"/cashier/sdk/mobile-and-layout","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}