Payment Mark
The marks of accepted payment methods as each brand supplies them: cards, wallets, pay later and bank transfers, regional methods such as mada, CliQ, STC Pay, Tabby and Tamara, and crypto. Never recolored, cropped or mirrored.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
Installation
Add the component
npx ritla add payment-markAlso works with shadcn:
npx shadcn@latest add @ritla/payment-markOr copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.
Usage
import { PaymentMark, PaymentMarks } from "@/components/ui/payment-mark";<PaymentMarks marks={["visa", "mastercard", "apple-pay", "mada", "cliq"]} label="Accepted payment methods" />Examples
Sizes
sm 24px for summaries and footers, md 32px, lg 40px for checkout choices.
All marks
Every mark in Figma, in order: cards, wallets, pay later, bank transfers, regional methods, crypto. Their names are in paymentMarkNames.
API reference
PaymentMark
| Prop | Type | Default | Description |
|---|---|---|---|
mark | PaymentMarkName | None | Figma's Payment method by its code name: visa, mastercard, amex, apple-pay, mada, cliq, stc-pay, tabby, tamara, meeza, fawry, benefit… The full list is paymentMarkNames. An unknown mark renders nothing. |
size | "sm" | "md" | "lg" | "md" | Figma's Size: 24, 32 and 40px. |
language | "en" | "ar" | "en" | The page language, for the name a screen reader says: in Arabic, brands that also write their name in Arabic are named in Arabic («مدى», «كليك»). |
PaymentMarks
| Prop | Type | Default | Description |
|---|---|---|---|
marks | PaymentMarkName[] | None | The marks, in order. |
label | string | None | Required. The list's name in the page language (“Accepted payment methods”). |
size | "sm" | "md" | "lg" | "sm" | Each mark's size. |
language | "en" | "ar" | "en" | Passed to each mark. |
Accessibility
ARIA
- Each mark is an image named as the brand writes itself (“Apple Pay”) with
lang="en", so an Arabic screen reader says it as the brand does. - With
language="ar", brands that also write their name in Arabic are named in Arabic withlang="ar": mada «مدى», CliQ «كليك», Tabby, Tamara, Meeza, Fawry, BENEFIT and Careem Pay. The rest keep their Latin names. - The row is a named list, heard as “Accepted payment methods, list, 4 items”.
Don't
- Use the marks only to say what you really accept: they are their owners' trademarks.
Arabic and RTL notes
Mirrors
- The order of marks in a row starts from the right.
Does not mirror
- A mark itself never mirrors or gets translated; mada keeps its Arabic and Latin lettering as it is.
- Numerals
- They hold no numbers.
- Arabic typography
- The lettering is part of the artwork, so the Ritla UI fonts don't change it.