العربيةScan free
Browse the docs
Theme Kanz
العربيةGet Ritla UI

Blocks · Commerce

Checkout

Order summary with VAT and delivery, Apple Pay and Google Pay, then a card, and one Pay button with the total.

Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Opens at launchInstalling from the registry opens at launch. Until then, these are the commands you will run.
npx ritla add checkout

Also works with shadcn: npx shadcn@latest add @ritla/checkout

Pricing ›

Built from

The Ritla UI components this block is made of. Each is installed with it.

Arabic and RTL notes

Mirrors

  • The summary rows put the amount at the left in Arabic.

Does not mirror

  • The card number, expiry and security code stay one left-to-right group.
  • Apple Pay and Google Pay write their own words and never mirror.
Numerals
Prices, VAT and the total follow the numerals setting; SAR and AED show two decimals, JOD three.