بطاقة الدفع

تجريبي

احصل على Ritla UI

واجهة بطاقة بنكية بنمط Graphite أو Light أو Brand، ورزمة منها؛ مطبوعة من اليسار إلى اليمين في كل لغة.

افتح في Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

أضف المكوّن
$ npx ritla add payment-card
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/payment-card
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

payment-card.tsx

import { CardStack, PaymentCard } from "@/components/ui/payment-card";<PaymentCard kind="Debit" last4="8152" holder="Noor Al-Hassan" expiry="08/29" mainLabel="Main card" label="Debit card ending in 8152" />

أمثلة

رزمة البطاقات

إنجليزيمعكوسعربي

احصل على الكود

← RTL

مرجع الخصائص

PaymentCard

الخاصية	النوع	الافتراضي	الوصف
`variant`	`"graphite" \| "light" \| "brand"`	`"graphite"`	خاصية Style.
`issuer`	`string`	`"Ritla"`	اسم الجهة المُصدِرة أعلى البداية، والعلامة المائية الخفيفة.
`kind`	`ReactNode`	لا يوجد	نوع البطاقة أعلى النهاية («خصم»).
`last4 / holder / expiry`	`string`	لا يوجد	آخر أربعة أرقام، والاسم كما هو مطبوع، والصلاحية MM/YY.
`mainLabel`	`ReactNode`	لا يوجد	خاصية Main: شارة «البطاقة الرئيسية» بلغة الصفحة.
`label`	`string`	لا يوجد	ما يسمعه قارئ الشاشة عن البطاقة كلها.

CardStack

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	بطاقات الدفع، الأمامية أولًا؛ تُرسم ثلاث بطاقات على الأكثر.

إمكانية الوصول

ARIA

البطاقة صورة واحدة (role="img") يسمّيها label («بطاقة خصم تنتهي بـ 8152»)، فلا تُقرأ النقاط ولا الشريحة.
في الرزمة تظهر البطاقة الأمامية وحدها لقارئ الشاشة، فسمِّها باسم يشمل الرزمة.

ملاحظات العربية والاتجاه

ينعكس

لا شيء على الواجهة: البطاقة المطبوعة تُقرأ بالطريقة نفسها في كل لغة.

لا ينعكس

الواجهة كلها تبقى من اليسار إلى اليمين (dir="ltr"): الجهة المُصدِرة يسارًا، والرقم والصلاحية حيث تكون على البطاقة الحقيقية.

الأرقام: أرقام البطاقة وتاريخ الصلاحية تبقى بالأرقام اللاتينية: إنها معرّفات تُنسخ كما هي مطبوعة.
الخط العربي: مرّر اسم حامل البطاقة بالحروف اللاتينية الكبيرة كما هو منقوش عليها.