adyen web
6.5.1
توفر لك Adyen Web العناصر الأساسية لإنشاء تجربة الدفع للمتسوقين، مما يسمح لهم بالدفع باستخدام طريقة الدفع التي يختارونها.
يمكنك التكامل مع Adyen Web بطريقتين:
| النسخة الرئيسية | ولاية | مهمل | نهاية الحياة |
|---|---|---|---|
| 6.xx | نشيط | --- | --- |
| 5.xx | غير نشط | سيتم تحديده لاحقًا | سيتم تحديده لاحقًا |
| 4.xx | غير نشط | سيتم تحديده لاحقًا | سيتم تحديده لاحقًا |
| 3.xx | مهمل | أكتوبر 2024 | أكتوبر 2025 |
يمكن العثور على مزيد من المعلومات حول إصداراتنا ودورة حياة الإدخال/المكونات هنا
نحن نقدم الدعم الكامل فقط عند استخدام إحدى طرق التثبيت هذه.
npm install @adyen/adyen-web --save import { AdyenCheckout } from '@adyen/adyen-web' ;
import '@adyen/adyen-web/styles/adyen.css' ;<script> يمكنك أيضًا استيراد Adyen Web باستخدام علامة <script> ، كما هو موضح في دليل تكامل Web Components.
متطلبات:
لتشغيل البيئة:
.env على المجلد الجذر لمشروعك باتباع المثال الموجود في env.default واملأ متغيرات البيئة.yarn installyarn buildyarn startنحن نقوم بتضمين تعريب واجهة المستخدم للعديد من اللغات. يمكنك التحقق من اللغات وترجماتها هنا. علاوة على ذلك، من الممكن تخصيص الترجمة الحالية واستبدال النص الافتراضي بالنص الخاص بك في حالة رغبتك في ذلك.
Adyen Web قابل للتخصيص ويستخدم متغيرات CSS التي يمكن تجاوزها لتحقيق النمط المطلوب.
بالنسبة للعناصر غير الموجودة داخل إطارات iframe، يمكنك تخصيص الأنماط عن طريق تجاوز هذه الأنماط في ملف css. يتم تعريف معظم أنماطنا باستخدام متغيرات CSS ذات القيم الافتراضية. لتجاوز هذه الأنماط، يمكنك فحص DOM وتغيير قيمة متغيرات CSS إما على مستوى الجذر أو عن طريق استهداف عناصر محددة. انتبه إلى أنه إذا قمت بتغيير قيم متغيرات css على مستوى الجذر، فإنك تقوم أيضًا بتغيير الأنماط لجميع العناصر الفرعية التي تستخدم نفس متغيرات css.
قم بإنشاء override.css بالمتغيرات التي ترغب في تصميمها
: root {
--adyen-sdk-color-background-secondary : # f7f7f8 ;
} تأكد من استيراد override.css بعد استيراد CSS الرئيسي للمكتبة
import '@adyen/adyen-web/styles/adyen.css' ;
import './override.css' ; | متغير CSS | القيمة الافتراضية | نِطَاق |
|---|---|---|
--adyen-sdk-color-label-primary | #00112c | - لون الملصق داخل نماذج الدفع، مثل تعليمات النموذج، وتسميات حقول النموذج والنصوص السياقية/المساعدة. - لون عنوان مجموعة الحقول - لون نص حقل الإدخال - رأس طريقة الدفع المسقطة، ورأس طريقة دفع الطلب، ولون نص الحالة الافتراضي. - لون النص زر تحرير البكالوريا - لون النص مقدمة للتحويل المصرفي، والقسائم، Blik - لون نص حالة التبرع، ولون خلفية الحملة - UPI وANCV وBlik وMBWay في انتظار لون نص الحاوية - لون النص الثانوي لأزرار الأشباح - (موافقة) لون تسمية مربع الاختيار |
--adyen-sdk-color-label-secondary | #5c687c | - لون الملصق للمعلومات الإضافية في رأس طريقة الدفع. - لون تسمية إخلاء المسؤولية. - QR العد التنازلي لون التسمية. - للقراءة فقط حدد وإدخال اللون. |
--adyen-sdk-color-label-tertiary | #8d95a3 | - لون التسمية لملصقات النقر للدفع. |
--adyen-sdk-color-label-disabled | #8d95a3 | - لون التسمية للمعاقين انقر للدفع زر تسجيل الخروج. - شريحة المعوقين. - لون الخلفية لزر الدفع في حالة التحميل. |
--adyen-sdk-color-label-critical | #e22d2d | - لون الحدود لحقول إدخال الخطأ ورسالة التحقق من الخطأ. |
--adyen-sdk-color-label-highlight | #0070f5 | - لون زر الارتباط. |
--adyen-sdk-color-label-on-color | #ffffff | - لون نص الزر. - لون نص وصف حملة التبرع. - خانة الاختيار اللون. |
--adyen-sdk-color-background-primary | #ffffff | - لون الخلفية لزر الدفع الثانوي. - لون الخلفية لعناصر نموذج الدفع: عنصر الإدخال، الراديو، التحديد، مربع الاختيار. - لون الخلفية لعناصر الدفع غير المحددة. |
--adyen-sdk-color-background-secondary | #f7f7f8 | - لون الخلفية لعنصر طريقة الدفع المحددة. - لون الخلفية للزر المحدد داخل مجموعة الأزرار (المستخدم في مكون التبرع). |
--adyen-sdk-color-background-secondary-hover | #eeeff1 | - لون الخلفية لتحويم زر الشبح. |
--adyen-sdk-color-background-secondary-active | #e3e5e9 | - لون الخلفية لزر الشبح نشط. |
--adyen-sdk-color-background-tertiary | #eeeff1 | - لون الخلفية للتحكم المجزأ الذي تستخدمه واجهة UPI. |
--adyen-sdk-color-background-disabled | #eeeff1 | - لون الخلفية لعناصر النموذج المعطلة. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - لون الخلفية لإزالة زر تأكيد طرق الدفع المخزنة. |
--adyen-sdk-color-background-inverse-primary-hover | #5c687c | - لون الخلفية للتمرير على زر الدفع. |
--adyen-sdk-color-background-always-dark | #00112c | - لون الخلفية لزر الدفع الأساسي. |
--adyen-sdk-color-background-always-dark-active | #8d95a3 | - لون الخلفية لزر الدفع الأساسي النشط والمتحرك. |
--adyen-sdk-color-background-critical-strong | #e22d2d | - إزالة تأكيد البطاقة المخزنة ولون خلفية الزر - لون خلفية تنبيه بطاقة الهدايا |
--adyen-sdk-color-outline-primary | #dbdee2 | - عنصر قائمة طريقة الدفع المنسدلة، لون الحدود غير محدد. - تسليط الضوء على لون الظل مربع زر المصدرين. - لون حدود عناصر نموذج الدفع (بما في ذلك خانة الاختيار والراديو). |
--adyen-sdk-color-outline-primary-hover | #c9cdd3 | - قم بالتمرير فوق عنصر قائمة طريقة الدفع المنسدلة ولون ظل المربع غير المحدد. - لا يتم التركيز على لون ظل المربع في الراديو ومربع الاختيار. |
--adyen-sdk-color-outline-primary-active | #00112c | - تركز عناصر إدخال النموذج على لون مربع الظل والحدود. |
--adyen-sdk-color-outline-secondary | #c9cdd3 | - لون حدود عنصر الدفع المحدد المنسدلة. - لون حدود حاوية الحالة الافتراضية المنسدلة. - UPI، ANCV، Blik، MBWay في انتظار لون حدود الحاوية. - لون حدود حاوية رمز الاستجابة السريعة. |
--adyen-sdk-color-outline-tertiary | #8d95a3 | - لون حد دفع الطلب المسقط، ولون نص الرسوم الإضافية - لون نص رصيد بطاقة GIF - UPI، ANCV، Blik، MBWay في انتظار العد التنازلي للون النص - الراديو، مربع الاختيار لون ظل المربع - لون ظل مربع الدفع / زر التركيز العادي - لون فاصل المحتوى |
--adyen-sdk-color-outline-disabled | #dbdee2 | - الزر الثانوي تعطيل لون الحدود |
--adyen-sdk-color-outline-critical | #e22d2d | - القائمة المنسدلة لون حدود الزر غير صالح |
--adyen-sdk-color-separator-primary | #dbdee2 | - حقول الإدخال والاختيار ومربعات الاختيار ونماذج الراديو ذات لون حدود غير صالح |
--adyen-sdk-text-caption-line-height | 18px | - أماكن مختلفة ليست نصًا / عنوانًا فرعيًا / عنوانًا |
--adyen-sdk-text-caption-font-size | 12px | - حجم خط رسالة تنبيه بطاقة الهدايا - حجم الخط النصي لمعلومات إضافية لعنصر قائمة طريقة الدفع المنسدلة - حجم خط نص رسالة إخلاء المسؤولية - تعليمات حقل النموذج، السياقية، حجم خط النص الخطأ |
--adyen-sdk-text-body-font-size | 14px | - أماكن مختلفة ليست عنوانًا / عنوانًا فرعيًا / تسمية توضيحية |
--adyen-sdk-text-body-line-height | 20px | - ارتفاع سطر نص الراديو - ارتفاع خط تعليمات Payme - انقر لدفع ارتفاع خط معلومات مربع الاختيار otp - ارتفاع خط تسمية حقل النموذج |
--adyen-sdk-text-body-font-weight | 400 | - وزن الخط النصي لإدخال تاريخ انتهاء صلاحية البطاقة المخزنة |
--adyen-sdk-text-body-stronger-font-weight | 500 | - وزن خط نص زر المُصدر المحدد - وزن خط عنوان عنصر قائمة طريقة الدفع المنسدلة - رأس الطلب المسقط ووزن الخط المبلغ المخصوم - وزن خط الوصف الموثوق به - وزن خط نص زر الدفع - وزن خط نص التحكم المجزأ UPI |
--adyen-sdk-text-subtitle-font-size | 16px | - حجم الخط المساعد Blik - رأس وصف موثوق - UPI وANCV وBlik وMBWay في انتظار الترجمة وحجم خط المؤشر - العنوان الفرعي QR وحجم خط المؤشر - الإدخال، حجم الخط النصي لحقول الإدخال المنسدلة - حجم الخط مبلغ القسيمة |
--adyen-sdk-text-subtitle-font-weight | 500 | - وزن خط عنوان المجموعة الميدانية |
--adyen-sdk-text-subtitle-stronger-font-weight | 600 | - وزن خط تسمية قائمة طرق الدفع المنسدلة |
--adyen-sdk-text-subtitle-line-height | 26px | - ارتفاع سطر تسمية قائمة طرق الدفع المنسدلة - ارتفاع سطر عنوان المجموعة الميدانية |
--adyen-sdk-text-title-font-size | 16px | - حجم الخط الافتراضي للحالات النهائية - حجم خط رأس الطلب المنسدل - حجم خط عنوان عنصر قائمة طريقة الدفع المنسدلة - حجم خط نص زر الدفع - حجم خط مقدمة نتيجة قسيمة Directdebit_GB - حجم خط عنوان حملة التبرع |
--adyen-sdk-text-title-font-weight | 600 | - انقر لدفع وزن خط عنوان الرأس |
--adyen-sdk-text-title-line-height | 26px | - ارتفاع سطر نص إدخال تاريخ انتهاء البطاقة المخزنة |
--adyen-sdk-text-title-l-font-size | 24px | - حجم خط النص المرجعي للقسيمة |
--adyen-sdk-spacer-100 | 32px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-110 | 40px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-120 | 48px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-130 | 56px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-140 | 64px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-000 | 0px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-010 | 2px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-020 | 4px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-030 | 6px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-040 | 8px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-050 | 10px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-060 | 12px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-070 | 16px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-080 | 20px | أماكن مختلفة للأبعاد |
--adyen-sdk-spacer-090 | 24px | أماكن مختلفة للأبعاد |
--adyen-sdk-border-radius-xs | 2px | أماكن مختلفة لنصف القطر الحدودي |
--adyen-sdk-border-radius-s | 4px | أماكن مختلفة لنصف القطر الحدودي |
--adyen-sdk-border-radius-m | 8px | أماكن مختلفة لنصف القطر الحدودي |
--adyen-sdk-border-radius-l | 12px | أماكن مختلفة لنصف القطر الحدودي |
--adyen-sdk-border-radius-xl | 24px | أماكن مختلفة لنصف القطر الحدودي |
--adyen-sdk-border-width-s | 1px | أماكن مختلفة لنصف القطر الحدودي |
--adyen-sdk-border-width-m | 2px | أماكن مختلفة لنصف القطر الحدودي |
--adyen-sdk-border-width-l | 3px | أماكن مختلفة لنصف القطر الحدودي |
--adyen-sdk-shadow-low | 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02) | - صندوق الظل لصور العلامة التجارية المتاحة للبطاقة وصور العلامة التجارية للقسائم - ظل الصندوق للجزء المحدد |
لتحديد نمط الحقول الآمنة مثل رقم البطاقة ورمز التحقق من البطاقة (CVC) وتاريخ انتهاء صلاحية البطاقة، يمكنك اتباع الرابط "تصميم حقول إدخال البطاقة".
بدءًا من الإصدار 5.16.0، تحتوي عمليات تكامل المكونات الإضافية والمكونات على ميزات التحليلات والتتبع التي يتم تشغيلها افتراضيًا. اكتشف المزيد حول ما نتتبعه وكيف يمكنك التحكم فيه.
نقوم بدمج كل طلب سحب في الفرع main . نحن نهدف إلى الحفاظ على main في حالة جيدة، مما يسمح لنا بإصدار نسخة جديدة كلما احتجنا إلى ذلك.
قم بإلقاء نظرة على إرشادات المساهمة الخاصة بنا لمعرفة كيفية رفع طلب السحب.
إذا كان لديك طلب ميزة، أو اكتشفت خطأً أو مشكلة فنية، فقم بإنشاء مشكلة هنا.
للأسئلة الأخرى، اتصل بفريق الدعم لدينا.
هذا المستودع متاح بموجب ترخيص MIT.
