Skip to content
/
Mobile & layout
Last updated

Mobile & layout

Device detection

The SDK auto-detects device type:

  • Desktop — a modal overlay with backdrop and close button.
  • Mobile — a bottom sheet optimised for touch.

Override detection with device:

import { DeviceType } from "@omno-payment/checkout-js";

const cashier = new CashierSDK({
  baseUrl: "https://checkout.omno.com",
  device: DeviceType.MOBILE,
});

Mobile sheet height

By default the bottom sheet sizes to its content, capped at 90vh. Set styles.mobile.height:

const cashier = new CashierSDK({
  baseUrl: "https://checkout.omno.com",
  styles: {
    mobile: {
      height: "full", // full-screen (100% of the viewport)
      // "auto" or omitted → default (content height, 90vh cap)
      // "200px" | "40%" | "70vh" → cap the sheet at that height
    },
  },
});
  • Applies only on the mobile mount; ignored for the desktop modal and container mounts.
  • Accepted values: 'full', 'auto', or a CSS length/percentage (px, %, vh, dvh, svh, rem, em). Any other value falls back to the default.

styles.modal (ModalStyles): backgroundColor, width, height, borderRadius, zIndex. styles.mobile (MobileStyles): backgroundColor, zIndex, height.

Single-column layout

For a Single Payment, open with layout: 'single' to get the single-column, form-first layout:

cashier.open({ sessionId, token, layout: "single" });

Build it →

Language

TypeScript