BacodoBACODO

الوظيفة الإضافية Next.js

التكامل Stripeي لـ Next.js

قم بإضافة شريط Checkout أو عنصر الدفع وPaymentIntents وخطافات الويب الموقعة إلى مشروع Next.js App Router الموجود لديك دون إنشاء أسلاك الدفع والتأمين ثلاثي الأبعاد وRoute Handler من البداية.

  • تم تضمين كود المصدر الكامل لك بشكل دائم
  • لا يلزم وجود مفتاح ترخيص إضافي أو ترخيص متكرر
  • جاهز للإنتاج وتم اختباره
  • مدمج في مشروع Next.js الحالي ومكدسه
  • يشمل الدعم الفني لمدة 30 يومًا بعد التسليم
  • دعم فني اختياري ممتد لمدة 6 أشهر بخصم 20% من سعر الوظيفة الإضافية

من

$145

USD · Next.js

عرض تجريبي

التكامل Stripeي لـ Next.js · Next.js

كود المصدر الكامللا يوجد مفتاح الترخيصجاهز للإنتاجالتكامل الذي تم اختبارهدعم لمدة 30 يومًا

Requirements

What التكامل Stripeي لـ Next.js needs

  • مشروع Next.js قائم
  • الوصول إلى Stripe Test Mode

لا يلزم الوصول إلى المستودع. نحتاج صلاحية المشروع فقط إذا رغبتم أن تُدمج Bacodo الإضافة مباشرة.

ماذا يفعل

شريط الخروج داخل التطبيق Next.js الخاص بك

يقوم Bacodo بدمج Stripe في مشروع Next.js الذي لديك بالفعل. بعد التسليم، يبقى التنفيذ في الريبو الخاص بك حتى يتمكن فريقك من قراءته وتغييره وتوسيعه. لا تزال تمتلك حساب Stripe ومفاتيح API ورسوم Stripe.

المشكلة يحلها

يحتاج الدفع بالبطاقة والمحفظة في Next.js إلى PaymentIntents، وCheckout أو Payment Element، و3-D Secure، ومفاتيح سرية للخادم فقط، ومعالج مسار webhook الذي يتحقق من التوقيعات. إن بناء هذا المسار من الصفر أمر بطيء ومن السهل أن نخطئ فيه.

كيف يهبط في المشروع

نضيف Stripe.js على عميل Next.js، ومعالجات المسار (أو إجراءات الخادم) التي تنشئ PaymentIntents أو جلسات الدفع، والتحقق من خطاف الويب، وصفحات النجاح/الإلغاء، وتكوين بيئة الاختبار/المباشر لجهاز توجيه التطبيق.

لماذا يوفر وقت التطوير

يتخطى فريقك أول تطبيق إنتاجي لـ Stripe Next.js: معالجات جهاز توجيه التطبيق، وSCA، وحالات الخطأ، والتسليم الذي يوثق كيفية شحن المفاتيح المباشرة.

لمن هو

المطورون والفرق الفنية والوكالات والشركات الناشئة التي لديها بالفعل تطبيق Next.js وتريد مسار دفع الإنتاج الذي يمكنها الحفاظ عليه.

الميزات الأساسية

ما يشمله التكامل Stripeي لـ Next.js

شريط الخروج أو عنصر الدفع في Next.js

استخدم Stripe Checkout المستضاف أو عنصر الدفع المضمن في صفحة الدفع Next.js الخاصة بك. تظل أزرار إدخال البطاقة والتأمين ثلاثي الأبعاد وأزرار المحفظة على مسار PCI الخاص بـ Stripe - وليست نموذج بطاقة مخصص تقوم بتخزينه.

معالجات الطريق Next.js لـ PaymentIntents

قم بإنشاء جلسات الدفع أو PaymentIntents في معالجات التوجيه Next.js. يستخدم المتصفح فقط المفتاح القابل للنشر وسر العميل - لا يتم تضمين المفتاح السري مطلقًا في مكون العميل.

Apple Pay وGoogle Pay في Next.js Checkout

قم بتمكين أزرار المحفظة في Stripe Checkout أو Payment Element عندما يتم التحقق من حساب Stripe والمجال الخاص بك. يبقى الإجراء الاحتياطي Next.js عند الخروج من البطاقة.

وضع اختبار Next.js ثم مفاتيح Stripe الحية

قم بشحن تطبيق Next.js مع مفاتيح اختبار Stripe وبطاقات الاختبار والتحويل الموثق للمفاتيح المباشرة. تظل متغيرات البيئة Next.js خارج حزمة العميل.

معالج توجيه Webhook لحالة طلب Next.js

نجاح الدفع في واجهة مستخدم Next.js ليس مصدر الحقيقة. يتحقق معالج الطريق من توقيعات Stripe ويقوم بتحديث الطلب أو حالة الاستحقاق قبل التنفيذ.

حالات النجاح والإلغاء والخطأ في Next.js

تعامل مع البطاقات المرفوضة، وCheckout الملغاة، وفشل الشبكة، والتأمين ثلاثي الأبعاد غير المكتمل حتى لا تترك واجهة مستخدم Next.js العميل في صفحة ميتة.

حالات الاستخدام

متى يناسب التكامل Stripeي لـ Next.js

متجر Next.js الحالي أو موقع الحجز

أنت تتلقى بالفعل طلبات أو حجوزات في Next.js وتحتاج إلى الدفع بالبطاقة دون إعادة كتابة الكتالوج أو تدفق الحجز.

تقوم الوكالة بتسليم موقع عميل Next.js إلى الإنتاج

أنت بحاجة إلى مسار شريطي قابل للصيانة في Next.js، ومصدر في مستودع العميل، ومفتاح مباشر موثق بدلاً من نموذج Next.js الأولي لمرة واحدة.

SaaS أو تطبيق Next.js للعضوية

يجب أن يقوم تطبيق Next.js بجمع الدفعة الأولى أو تحديث طريقة الدفع بينما تظل الاشتراكات والفواتير على الخادم الخاص بك وStripe Billing إذا كنت تستخدمها بالفعل.

سوق Next.js أو دفعات الخدمة لاحقًا

ابدأ برسوم العملاء في تطبيق Next.js. يمكن تحديد نطاق رسوم Stripe Connect أو الوجهة بشكل منفصل إذا كان نموذج سوق Next.js الخاص بك يحتاج إليها.

عرض

Next.js معاينة تدفق الخروج Stripeي

قم بمعاينة مسار الخروج Next.js: عربة التسوق أو إجراء الدفع، أو عنصر الدفع أو الدفع، والتأكيد، وحالات الفشل. يتوفر وضع الحماية المباشر لحساب Stripe الخاص بك بعد التحقق من التوافق. هذه الصفحة لا تعالج الرسوم الحقيقية.

كيف يعمل

كيف يتم تسليم تكامل Stripe لـ Next.js

سير العمل الإضافي القياسي لـ Bacodo، مع عمليات التحقق الخاصة بـ Next.js وStripe لجهاز توجيه التطبيقات، ومعالجات الطريق، وطبقة البيانات الحالية لديك.

  1. 01

    حدد شريط Next.js

    قم بتأكيد تكامل Stripe لـ Next.js وما إذا كان الدفع في اليوم الأول هو Checkout مستضاف أو عنصر الدفع.

  2. 02

    التحقق من توافق Next.js

    قم بمراجعة إصدار Next.js، وApp Router vs Pages Router، وواجهة مستخدم الخروج الحالية، وقاعدة البيانات، وما إذا كان لديك بالفعل حساب Stripe.

  3. 03

    الاندماج في Next.js

    أضف Stripe.js وصفحات الخروج ومعالجات المسار للجلسات أو PaymentIntents ومعالج خطاف الويب المُوقع.

  4. 04

    قم بتكوين تطبيق Next.js

    مفاتيح اختبار سلك Next.js ونقطة نهاية خطاف الويب وتكوين الخادم الخاص بالبيئة.

  5. 05

    اختبر مسار الدفع Next.js

    قم بتشغيل بطاقات اختبار Stripe و3-D Secure ومسارات الإلغاء/الرفض وتأكيد خطاف الويب على تطبيق Next.js.

  6. 06

    قم بتسليم مصدر Next.js

    قم بتوصيل مصدر Next.js وملاحظات التكوين وقائمة التحقق من المفاتيح المباشرة. إن تنفيذ Next.js هو ملكك للمحافظة عليه.

الهندسة

كيف يتصل Stripe بمشروع Next.js

لا يتحدث متصفح Next.js مطلقًا مع Stripe باستخدام مفتاح سري. يستخدم عنصر الدفع أو الدفع سر العميل من معالج الطريق. يقوم Stripe بإعلام خطاف الويب Next.js الخاص بك قبل التنفيذ.

صفحة Next.jsStripe.js / الخروجمعالج الطريقنوايا الدفع Stripeيةمعالج مسار Webhookقاعدة البيانات/حالة الطلب

التقنيات المدعومة

ما يستخدمه التكامل Stripeي لـ Next.js فعليًا

جهاز توجيه تطبيق Next.js

يعد Next.js المستقر الحالي مع App Router هو الإعداد الافتراضي. يمكن تحديد نطاق جهاز توجيه الصفحات إذا كان هذا هو ما يستخدمه مستودع Next.js الخاص بك بالفعل.

Stripe.js وStripe Node SDK

Stripe.js الرسمي على عميل Next.js وStripe على الخادم للجلسات وPaymentIntents والتحقق من webhook.

طبقة بيانات Next.js الخاصة بك

تظل تحديثات الطلب أو الاستحقاق في قاعدة البيانات أو واجهة برمجة التطبيقات التي يستخدمها تطبيق Next.js بالفعل. نحن لا نستبدل الواجهة الخلفية الخاصة بك بخدمة Bacodo فقط.

حساب شريطي لتطبيق Next.js

حساب Stripe الخاص بك والمفاتيح الاختبارية والمباشرة التي تستخدمها Next.js ونقطة نهاية webhook وأحداث Dashboard. تبقى رسوم معالجة Stripe مع Stripe.

مطلوب إعداد استضافة Next.js

مضيف يمكنه تشغيل Next.js Route Handlers واستقبال خطافات الويب Stripe (على سبيل المثال Vercel أو خادم Node). التصدير الثابت فقط ليس كافيًا لمسار الخروج هذا.

ما الذي يتضمنه

ما يتضمنه تكامل Stripe لـ Next.js

  • التكامل مع مشروع Next.js الحالي
  • كود المصدر الكامل في المستودع الخاص بك
  • تكوين معالج البيئة والطريق
  • يلزم إجراء تغييرات على عنصر الدفع أو الدفع بالإضافة إلى خطاف الويب لمسار الدفع هذا
  • تم اختبار تدفقات دفع Next.js قبل التسليم
  • ملاحظات التسليم للاختبار مدى الحياة
  • دعم فني لمدة 30 يومًا بعد التسليم

ليس في السعر الإضافي

  • حساب Stripe، ومفاتيح API، ورسوم معالجة Stripe - أنت تمتلكها
  • قاعدة بيانات جديدة أو نظام إدارة المحتوى (CMS) إذا لم يكن لديك مكان لتخزين حالة الطلب
  • Marketplace Connect أو منتجات الفوترة المخصصة أو استبدال الشراء داخل التطبيق ما لم يتم تصنيفها على أنها عمل مخصص

Pricing

تكامل Stripe لتسعير Next.js

هذا السعر مخصص لمنصة Next.js فقط. لا يستخدم التسعير الإضافي لـ Django أو Flutter.

التكامل Stripeي لـ Next.js

أضف مدفوعات Stripe الجاهزة للإنتاج إلى تطبيق Next.js الحالي واحتفظ بكود المصدر.

المتطلبات

  • مشروع Next.js قائم
  • الوصول إلى Stripe Test Mode

$145

دفعة واحدة

Next.js

تحتاجون باكند؟

  • الشيفرة المصدرية كاملة
  • بدون رسوم ترخيص
  • دعم لمدة 30 يوماً
  • تكامل كامل

دفع آمن عبرstripe

التسليم والأمان

ممارسات التسليم والأمان الخاصة بـ Next.js

التسليم المقدر لـ Next.js

يتم تحديد نطاق تكامل الخروج Stripeي Next.js النموذجي بعد التحقق من توافق Next.js. يعتمد المخطط الزمني على واجهة مستخدم الخروج الحالية من Next.js وطبقة البيانات.

تم اختباره على Next.js قبل التسليم

يتم ممارسة بطاقات وضع الاختبار والتأمين ثلاثي الأبعاد ومسارات الإلغاء والرفض على تطبيق Next.js قبل التسليم.

تظل أسرار Stripe بعيدة عن مكونات عميل Next.js

تبقى المفاتيح السرية Stripeية وأسرار التوقيع على الويب في بيئة الخادم. يتلقى متصفح Next.js فقط مفتاحًا قابلاً للنشر وأسرار عميل قصيرة العمر.

التحقق من Webhook لأوامر Next.js

يتحقق معالج مسار Webhook Next.js من توقيعات Stripe قبل تحديث الطلب أو حالة الاستحقاق.

لا توجد مطالبات أمنية غير قابلة للتحقق من Next.js

نحن لا نطالب بالحصول على شهادة PCI، أو عدم الاحتيال، أو معدلات الموافقة المضمونة. يتم جمع بيانات بطاقة Next.js من خلال Stripe Checkout أو Payment Element، وليس نموذج بطاقة مخصصة نقوم بتخزينها.

الأسئلة الشائعة

الأسئلة الشائعة

ما الذي يتضمنه التكامل Stripeي لـ Next.js؟

يشتمل تكامل Stripe لـ Next.js على Stripe.js أو Checkout أو عنصر الدفع في صفحة الخروج Next.js الموجودة لديك، وإنشاء PaymentIntent أو Checkout Session في Route Handlers، ومعالج خطاف الويب الموقع، وتغطية الاختبار، وملاحظات التسليم. تتلقى مصدر Next.js في مشروعك. رسوم Stripe وحساب Stripe الخاص بك منفصلان.

هل ستقوم بدمج Stripe في تطبيق Next.js الموجود لدينا؟

نعم. تم تصميم Stripe Integration for Next.js لمشروع Next.js الموجود لديك بالفعل. نحن نلائم نقطة الدفع ونقطة الدفع في مسارات Next.js الحالية وواجهة المستخدم بدلاً من شحن تطبيق تجريبي منفصل باعتباره التسليم.

هل يتطلب تكامل Stripe لـ Next.js خادمًا؟

نعم لمسار شريطي Next.js للإنتاج. يجب أن تكون PaymentIntents وجلسات الدفع والمفتاح السري موجودة على الخادم. يتلقى متصفح Next.js فقط مفتاحًا قابلاً للنشر وسرًا للعميل. لا يمكن لتصدير Next.js الثابت فقط أن يستضيف مسار خطاف الويب هذا.

ما هي حزم Stripe التي يستخدمها Stripe Integration لـ Next.js؟

يستخدم Stripe Integration لـ Next.js Stripe.js الرسمي على العميل وStripe Node SDK في Next.js Route Handlers. نحن لا نضمن عملية الدفع Next.js في مكون إضافي غير موثق إلا إذا طلبت ذلك صراحةً.

هل يدعم Stripe Integration لـ Next.js Apple Pay وGoogle Pay؟

نعم عندما يدعمها حساب Stripe الخاص بك والتحقق من المجال والأجهزة. في Next.js، تكون أزرار المحفظة نطاقًا اختياريًا. يظل عنصر الدفع أو الدفع بالبطاقة في Next.js هو الإجراء الاحتياطي الافتراضي.

هل تم تضمين Pages Router في Stripe Integration لـ Next.js؟

التكامل Stripeي الافتراضي لنطاق Next.js هو جهاز توجيه التطبيقات. يمكن تضمين مسارات API لجهاز توجيه الصفحات إذا كان هذا هو ما يستخدمه مستودع Next.js الخاص بك بالفعل وقد وافقنا عليه أثناء التحقق من توافق Next.js.

هل يمكن لـ Stripe Integration لـ Next.js جمع مدفوعات الاشتراك؟

يمكن لعميل Next.js تأكيد PaymentIntent أو بدء جلسة الدفع من خلال Stripe.js. منتجات الفوترة Stripeية المتكررة وبوابة العملاء ومنطق الفاتورة مباشرة على الخادم. قد يحتاج عمل Next.js الذي يتطلب اشتراكًا كبيرًا إلى عرض أسعار مخصص.

أين توجد مفاتيح Stripe القابلة للنشر والمفاتيح السرية في تطبيق Next.js؟

يستخدم متصفح Next.js فقط مفتاح Stripe القابل للنشر. يبقى المفتاح السري وسر التوقيع على الويب في متغيرات بيئة الخادم التي تستخدمها معالجات الطريق. لا يضع تكامل Stripe لـ Next.js مفاتيح سرية في مكونات العميل.

كيف يعمل وضع اختبار Stripe والوضع المباشر في Next.js؟

نقوم بتنفيذ Stripe Integration لـ Next.js مقابل مفاتيح اختبار Stripe وبطاقات الاختبار أولاً. يعد البث المباشر عبارة عن مفتاح موثق وخطاف ويب في لوحة تحكم Stripe وبيئة خادم Next.js، وليس تنشيطًا لترخيص إضافي.

كيف يتعامل تكامل Stripe مع Next.js مع 3-D Secure / SCA؟

يتعامل Stripe Checkout وعنصر الدفع مع الأمان ثلاثي الأبعاد من خلال Stripe.js. يجب أن تحافظ صفحة Next.js على تدفق عملية الدفع حتى يُرجع Stripe الحالة النهائية؛ يقوم تكامل Stripe لـ Next.js بتوصيل تلك الحالات بشكل صريح.

هل يلزم استخدام خطافات الويب Stripe عند الخروج من Next.js؟

نعم للوفاء بعد الدفع أو الدفع في Next.js. واجهة مستخدم Next.js ليست مصدر الحقيقة. يتحقق معالج الطريق من توقيعات Stripe على الويب ثم يقوم بوضع علامة على الطلب المدفوع أو فتح المحتوى أو إخطار التنفيذ.

هل يمكننا الاحتفاظ بواجهة مستخدم الدفع Next.js الحالية مع Stripe؟

نعم. عادةً ما يحتفظ Stripe Integration لـ Next.js بمنتج Next.js وعربة التسوق وزر الدفع ويفتح Checkout أو يقوم بتحميل عنصر الدفع من هذا الإجراء. يعد نموذج بطاقة Next.js المخصص الذي يمس بيانات PAN الأولية خارج النطاق الافتراضي لأن Checkout أو Payment Element هو مسار PCI الأكثر أمانًا.

هل يتضمن سعر Stripe Integration لـ Next.js حساب Stripe أو رسومًا؟

لا، أنت تقوم بإنشاء وامتلاك حساب Stripe ومفاتيح API ورسوم معالجة Stripe. سعر الوظيفة الإضافية Next.js هو التنفيذ في مشروع Next.js الخاص بك، وليس ترخيص دفع Bacodo.

هل سيحل تكامل Stripe لـ Next.js محل الشراء داخل التطبيق من Apple أو Google؟

لا. غالبًا ما تظل السلع الرقمية التي يتم بيعها داخل متجر التطبيقات تتطلب الشراء داخل التطبيق (IAP). تكامل Stripe لـ Next.js مخصص للدفع Stripe في موقع ويب Next.js أو تطبيق ويب حيث يكون Stripe هو مسار الدفع المسموح به لنوع منتجك.

هل يمكننا تخصيص إيصالات Stripe وبيانات التعريف في Next.js؟

نعم. تتم محاذاة البيانات التعريفية لـ PaymentIntent أو Checkout Session وسجلات العملاء والحقول التي تستمر فيها بعد تأكيد خطاف الويب مع نموذج طلب Next.js الحالي أثناء تكامل Stripe لـ Next.js.

ما هو دعم Next.js الذي يتم تضمينه بعد تسليم Stripe؟

مصدر Next.js موجود في الريبو الخاص بك، حتى يتمكن فريقك من الحفاظ عليه. يغطي الدعم المضمن لمدة 30 يومًا الأسئلة الفنية والعيوب في تكامل Stripe الذي تم تسليمه لنطاق Next.js، وليس عمل ميزات Next.js غير ذي الصلة.

كيف يتم التعامل مع تحديثات Stripe.js أو Stripe API على Next.js؟

خلال فترة الـ 30 يومًا، نساعد في حل العطل في تكامل Next.js الذي تم تسليمه بسبب تغيير Stripe أو Stripe.js الموثق. ترقيات حزمة Next.js المستمرة بعد ذلك هي الصيانة الخاصة بك، أو الدعم الفني الموسع إذا قمت بشرائه.

ماذا لو فشلت دفعات Stripe في تطبيق Next.js للإنتاج؟

نقوم بتوثيق كيفية قراءة حالة PaymentIntent أو Checkout Session، وسجلات Stripe Dashboard، وتسليم webhook من مسار الخروج Next.js. يتضمن الدعم لمدة 30 يومًا عمليات رفض استكشاف الأخطاء وإصلاحها، وعمليات إسقاط الأمان ثلاثي الأبعاد، والمفاتيح التي تمت تهيئتها بشكل خاطئ لتدفق Next.js الذي تم تسليمه.

ما هي إصدارات Next.js المتوافقة مع Stripe Integration لـ Next.js؟

لقد قمنا بتأكيد إصدار Next.js وجهاز توجيه التطبيقات أو جهاز توجيه الصفحات ووقت تشغيل العقدة مقابل Stripe SDK الذي نقوم بتثبيته في وقت التكامل. قد تحتاج أوقات تشغيل Next.js الأقدم أو المتشعبة بشكل كبير إلى نطاق إضافي.

ما هو الدعم لمدة 30 يومًا مقابل الدعم الفني الممتد لمدة 6 أشهر لتكامل Stripe لـ Next.js؟

يتم تضمين 30 يومًا بعد التسليم لمسار شريط Next.js الذي تم تسليمه. يعد الدعم الفني الموسع اختياريًا بنسبة 20% من سعر الوظيفة الإضافية Next.js ويغطي ستة أشهر إضافية من المساعدة الفنية بشأن نفس تكامل Next.js، وليس إنشاء منتج جديد.

التكامل Stripeي لـ Next.js

أضف دفعات Stripe الجاهزة للإنتاج إلى تطبيق Next.js الموجود لديك، واحتفظ بكود المصدر، وتخطى عملية الدفع من البداية.

$145