مفتوح المصدررخصة MIT
دفع Tap في Next.js. بالعربية من أول سطر.
واجهة عربية تنعكس كما يجب، وصفحة دفع جاهزة بمدى وApple Pay وSTC Pay وKNET، والخادم يتحقق من كل دفعة قبل اعتمادها.
git clone https://github.com/ahzab/nextjs-rtl-starter
طرق الدفع، كما يتوقعها العميل.
كلها عبر Tap. البطاقات تعمل بمفاتيح الاختبار فورًا، والبقية تفعّلها بمتغير واحد بعد أن يفعّلها Tap في حسابك.
كل العملاتمدى وVisa وMastercard
لا شيء، تعمل بمفاتيح الاختبار مباشرة
تعمل فورًا
كل العملاتApple Pay
تسجيل نطاقك لدى Tap، وتظهر في Safari
NEXT_PUBLIC_TAP_APPLE_PAY=true
SARSTC Pay
تفعيلها في حسابك لدى Tap
NEXT_PUBLIC_TAP_STC_PAY=true
KWDKNET
تفعيلها في حسابك لدى Tap
NEXT_PUBLIC_TAP_KNET=true
الدينار الكويتي بثلاث خانات عشرية والريال بخانتين، والقالب يأخذ ذلك من Intl بدل أن يثبّته في الكود.
التفاصيل التي تتعثر فيها أغلب عمليات الربط.
لا شيء منها صعب، لكنها موزعة في التوثيق. هنا تجدها في مكان واحد، ومعها اختبارات.
- 01
حقل البطاقة من Tap
رقم البطاقة يبقى داخل إطار Tap، ولا يصل إلى خادمك إلا رمز.
tok_… - 02
3-D Secure والعودة
يمر العميل بتحقق البنك، ثم يعود إلى صفحة النتيجة بلغته.
3-D Secure - 03
التحقق على الخادم
لا يُعتمد الطلب مدفوعًا قبل جلب الدفعة من Tap ومطابقة حالتها ومبلغها وعملتها.
CAPTURED - 04
توقيع الـ webhook
يُعاد حساب hashstring بعدد الخانات العشرية الصحيح لكل عملة، وإلا فشلت كل التواقيع.
hashstring
أربع صفحات تعمل، من الطلب إلى الإيصال.
كل ما يراه العميل في القالب، بالعربية والإنجليزية. هذه لقطات حقيقية من القالب في وضع الاختبار.
صفحة المتجر: طلب تجريبي بمبلغه، وزر واحد للدفع.
واجهة تنعكس، وأرقام تبقى في مكانها.
هذه مكوّنات القالب نفسها بنصوصه. بدّل الاتجاه وانظر ما ينعكس وما يبقى.
ينعكس
الهوامش والأسهم والتخطيط بأكمله، عبر shadcn/ui مع rtl: true.
لا ينعكس
المبالغ وأرقام البطاقات ورموز الطلبات. والقالب يعرض الأرقام اللاتينية في الواجهة العربية أيضًا.
بيانات البطاقة تذهب إلى Tap مباشرة ولا تمر عبر خادمنا.
عشر دقائق إلى أول دفعة تجريبية.
- 01
انسخ القالب
انسخ المستودع، وشغّل npm install، ثم انسخ .env.example، ففيه مفاتيح Tap التجريبية العامة جاهزة.
- 02
ادفع ببطاقة تجريبية
شغّل npm run dev، وادفع بإحدى بطاقات Tap التجريبية، ثم أكمل صفحة 3-D Secure.
- 03
انتقل إلى مفاتيحك
ضع مفاتيحك من Tap، واستبدل مخزن الطلبات التجريبي بقاعدة بياناتك.
$ git clone https://github.com/ahzab/nextjs-rtl-starter
$ cd nextjs-rtl-starter && npm install
$ cp .env.example .env.local
# Tap's public test keys are already in it
$ npm run dev
# open localhost:3000/ar, pay with a test card, expiry 01/39تبيع اشتراكات؟
القالب المجاني يغطي الدفع لمرة واحدة. والنسخة المدفوعة تضيف ما تحتاجه الاشتراكات على Tap:
تابع المستودع على GitHubقائمة الانتظار تُفتح قريبًا. تابع المستودع ليصلك الخبر.
- خطط شهرية وسنوية على البطاقة المحفوظة، مع التجديد التلقائي وإعادة المحاولة والإلغاء
- تسجيل الدخول ولوحة التحكم وصفحة الفوترة وحدود كل خطة
- واجهة كاملة بالعربية والإنجليزية، وأسعار بالريال والدينار والدرهم
- دليل للنشر، وتحديثات مستمرة
الأسئلة الشائعة
لم تجد جوابك؟ افتح issue في GitHub.هل القالب مجاني؟
نعم، برخصة MIT، ويمكنك استخدامه في مشاريعك التجارية بلا قيود.
هل أحتاج إلى حساب في Tap لأجرّبه؟
لا. ملف .env.example يحوي مفاتيح Tap التجريبية العامة، وهي تكفي لأول دفعة تجريبية.
هل يحفظ القالب بيانات البطاقات؟
لا. بيانات البطاقة تذهب إلى Tap مباشرة، ولا يرى خادمك إلا رمزًا ورقم الدفعة.
هل هو تابع لشركة Tap؟
لا. مشروع مستقل وغير رسمي، ولا يتبع شركة Tap Payments.
ماذا عن الاشتراكات؟
هذه النسخة للدفع لمرة واحدة. الاشتراكات في النسخة المدفوعة، وقائمة انتظارها تُفتح قريبًا.
أول دفعة أقرب مما تظن.
ابدأ بمفاتيح الاختبار، وافتح حسابك في Tap حين تستعد للإطلاق.
الكود على GitHub