البناء · جديد
أزرار الدفع
زرّا Apple Pay وGoogle Pay كما تقدّمهما الشركتان، من مكتباتهما الرسمية: الشعار والنص والترجمة منهما، وكنز يضبط الارتفاع والعرض والشكل واللغة.
المعاينة
المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.
npx shadcn@latest add @ritla/payment-buttonsالاستخدام
import { ApplePayButton, GooglePayButton } from "@/components/ui/payment-buttons";<ApplePayButton type="buy" onClick={startApplePaySession} />
<GooglePayButton type="buy" environment="PRODUCTION" allowedPaymentMethods={methods} onClick={openGooglePay} />أمثلة
Apple Pay
type (buy وpay وplain)، وbuttonStyle (black على الأسطح الفاتحة، وwhite وoutline على الداكنة)، وshape (rounded أو pill). في العربية تكتب Apple «الشراء باستخدام».
Google Pay
buttonStyle هو dark على الأسطح الفاتحة وlight على الداكنة. Google تطبّق استدارة الزوايا على الصفحة كلها، فاستخدم shape واحداً لكل أزرار Google Pay في الصفحة. وتعرض البطاقة المحفوظة بنفسها (نوع With Card في Figma).
مرجع الخصائص
ApplePayButton
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
type | "buy" | "pay" | "plain" | "buy" | خاصية Type. |
buttonStyle | "black" | "white" | "outline" | "black" | خاصية Style (buttonstyle عند Apple). |
shape | "rounded" | "pill" | "rounded" | خاصية Shape: radius/8 أو دائري. |
locale | string | لغة Apple («ar-AB»، «en-US»). الافتراضي لغة الصفحة حول الزر. | |
onClick | () => void | يبدأ ApplePaySession. |
GooglePayButton
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
allowedPaymentMethods | PaymentMethod[] | مطلوب. كما في طلب بيانات الدفع لدى Google. | |
onClick | () => void | مطلوب. يفتح نافذة Google Pay (loadPaymentData). | |
type | "buy" | "pay" | "plain" | "buy" | خاصية Type. |
buttonStyle | "dark" | "light" | "dark" | خاصية Style (buttonColor عند Google). |
shape | "rounded" | "pill" | "rounded" | خاصية Shape: radius/4 أو دائري. واحد لكل الصفحة: Google تطبّق آخر قيمة على كل الأزرار. |
environment | "TEST" | "PRODUCTION" | "TEST" | PRODUCTION مع معرّف التاجر. |
locale | string | لغة Google («ar»). الافتراضي لغة الصفحة. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| TabEnter | الزران من Apple وGoogle ويدعمان لوحة المفاتيح بنفسيهما. |
ARIA
- الاسم والدور من المكتبة الرسمية («Buy with Apple Pay»، «الشراء باستخدام Google Pay») بلغة الصفحة.
- المكتبتان تُحمّلان من خوادم Apple وGoogle عند ظهور الزر؛ اعرض طريقة دفع أخرى دائماً لمن لا تتوفر لديه المحفظة.
- زر Apple Pay لا يظهر إلا حيث يعمل Apple Pay (Safari أو متصفح مدعوم، عبر HTTPS)، وإلا فلا يشغل مساحة. تحقق من
isReadyToPayقبل عرض زر Google Pay.
ملاحظات العربية والاتجاه
ينعكس
- النص العربي في بداية السطر، والزر يتبع ترتيب الصفحة.
لا ينعكس
- علامتا Apple Pay وGoogle Pay لا تنعكسان ولا تُترجمان: الشركتان تتحكمان في شكلهما.
- الأرقام
- لا أرقام في الزر؛ رقم البطاقة المحفوظة تعرضه Google.
- الخط العربي
- الخط والنص من Apple وGoogle، لا من خطوط كنز.
- النص ثنائي الاتجاه
- لغة الزر تتبع
langالصفحة حوله (ar← «ar-AB» لـApple)، فتظهر العربية في جزيرة عربية داخل صفحة إنجليزية.