Preview

Open in new tab

Checkout page

Package the entire checkout experience as a starting point.

The checkout page example combines grouped forms, trust framing, and summary surfaces into one flow.

Grouped forms

Shipping, billing, and payment in named sections.

Order summary

Sticky totals and shipping detail.

Trust row

Returns, delivery, and security notes.

Built from: Checkout forms, order summaries, and incentive rows.

Use this checkout page example for one-page and multi-step checkout implementations.

Variants

One-page checkout

Everything in one paced checkout layout.

Step checkout

Checkout page with stronger progress framing.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Checkout page</Badge>
    <Heading level={1}>Package the entire checkout experience as a starting point.</Heading>
    <Text as="p">The checkout page example combines grouped forms, trust framing, and summary surfaces into one flow.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open checkout page</Button>
        <Button variant="outline">Use checkout forms</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Grouped forms</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Shipping, billing, and payment in named sections.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Order summary</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Sticky totals and shipping detail.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Trust row</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Returns, delivery, and security notes.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Checkout forms, order summaries, and incentive rows.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Text as="p">Use this checkout page example for one-page and multi-step checkout implementations.</Text>
  </Stack>
</Container>

DRYui

Checkout Page Example