- مشروع React قائم
- الوصول إلى Stripe Test Mode
- يلزم باكند للدفع الآمن
لا يلزم الوصول إلى المستودع. نحتاج صلاحية المشروع فقط إذا رغبتم أن تُدمج Bacodo الإضافة مباشرة.
رد الفعل الوظيفة الإضافية
التكامل Stripeي لـ React
أضف Stripe.js وعنصر الدفع والدفع السري للعميل إلى React SPA الموجود لديك دون إنشاء عناصر و3-D Secure وأخطاء المفتاح السري من البداية. لا تستضيف React خطافات الويب — بل إن واجهة برمجة التطبيقات (API) الخاصة بك هي التي تستضيفها.
- تم تضمين كود المصدر الكامل لك بشكل دائم
- لا يلزم وجود مفتاح ترخيص إضافي أو ترخيص متكرر
- جاهز للإنتاج وتم اختباره
- تم دمجها في مشروع React الحالي والمكدس
- يشمل الدعم الفني لمدة 30 يومًا بعد التسليم
- دعم فني اختياري ممتد لمدة 6 أشهر بخصم 20% من سعر الوظيفة الإضافية
من
$145
USD · React
التكامل Stripeي لـ React · React
كود المصدر الكامللا يوجد مفتاح الترخيصجاهز للإنتاجالتكامل الذي تم اختبارهدعم لمدة 30 يومًا
Requirements
What التكامل Stripeي لـ React needs
ماذا يفعل
عناصر Stripe في React SPA الخاص بك - لا تزال واجهة برمجة التطبيقات (API) تمتلك أسرارًا
يقوم Bacodo بدمج Stripe في مشروع React الذي لديك بالفعل (Vite أو CRA أو ما شابه). بعد التسليم، يبقى مصدر React موجودًا في الريبو الخاص بك. يظل المفتاح السري وخطاف الويب على الواجهة الخلفية التي تقوم بتشغيلها بالفعل. لا تزال تمتلك حساب Stripe ورسوم Stripe.
المشكلة يحلها
لا يمكن لـ React SPA إنشاء PaymentIntents أو التحقق من خطافات الويب بأمان. فهو يحتاج إلى Stripe.js أو Elements أو Checkout وواجهة خلفية تُرجع سر العميل. البناء الذي انقسم بشكل خاطئ يشحن المفتاح السري في الحزمة.
كيف يهبط في المشروع
نضيف @stripe/react-stripe-js، وشاشة الخروج في شجرة React الخاصة بك، واستدعاءات الجلب التي تحتاجها واجهة برمجة التطبيقات الحالية بالفعل لـ PaymentIntents. يتم التحقق من Webhook عبر واجهة برمجة التطبيقات هذه، وليس داخل React.
لماذا يوفر وقت التطوير
يتخطى فريقك أول تطبيق إنتاجي لـ Stripe React: Elements وSCA وenv للمفتاح القابل للنشر، والتسليم الذي يوثق كيفية تواصل React مع واجهة برمجة التطبيقات (API) الخاصة بك.
لمن هو
المطورون والوكالات التي لديها بالفعل واجهة React الأمامية وواجهة برمجة التطبيقات، وتريد مسارًا شريطيًا قابلاً للصيانة دون ترحيل SPA إلى Next.js.
الميزات الأساسية
ما يشمله التكامل Stripeي لـ React
عنصر الدفع في React
قم بتثبيت عنصر الدفع Stripe باستخدام @stripe/react-stripe-js على مسار الخروج الخاص بـ React. تظل بيانات البطاقة على Stripe — وليس في حالة React التي تستمر فيها.
تقوم React بجلب أسرار العميل، وليس المفتاح السري أبدًا
يستخدم تطبيق React فقط المفتاح القابل للنشر وسر العميل قصير الأمد من واجهة برمجة التطبيقات (API) الخاصة بك. تكامل Stripe لـ React لا يضع STRIPE_SECRET_KEY في Vite أو CRA env الذي يأتي إلى المتصفح.
Apple Pay وGoogle Pay في React Elements
قم بتمكين المحافظ في عنصر الدفع عندما يسمح لك حساب Stripe والمجال الخاص بك بذلك. يبقى رد الفعل الاحتياطي على عناصر البطاقة.
وضع اختبار التفاعل ثم المفتاح المباشر القابل للنشر
قم بشحن React SPA باستخدام مفتاح اختبار Stripe القابل للنشر أولاً. التغيير المباشر هو تغيير موثق للبيئة بالإضافة إلى السر المباشر المطابق في واجهة برمجة التطبيقات (API) الخاصة بك.
الاستيفاء ليس طريقًا لشكر React
شاشة نجاح React ليست مصدر الحقيقة. تتحقق واجهة برمجة التطبيقات الخاصة بك من خطاف الويب Stripe، ثم يقرأ تطبيق React الحالة المدفوعة من واجهة برمجة التطبيقات تلك.
رد فعل الخطأ وإلغاء الحالات
تعامل مع البطاقات المرفوضة والعناصر الملغاة وفشل الشبكة والتأمين ثلاثي الأبعاد غير المكتمل حتى لا تترك واجهة مستخدم React العميل في شاشة ميتة.
حالات الاستخدام
متى يناسب التكامل Stripeي لـ React
واجهة متجر React الحالية على Vite أو CRA
لديك بالفعل React SPA وواجهة برمجة التطبيقات (API). أنت بحاجة إلى دفع العناصر دون إعادة كتابة الكتالوج في Next.js.
تقوم الوكالة بتسليم SPA لعميل React إلى الإنتاج
أنت بحاجة إلى مسار Stripe يمكن صيانته في React، ومصدر في مستودع العميل، ومفتاح مباشر موثق بدلاً من العرض التوضيحي لـ CodeSandbox.
شاشة إعدادات SaaS في React
يجمع تطبيق React طريقة الدفع الأولى بينما تظل الاشتراكات على API وStripe Billing إذا كنت تستخدمها بالفعل.
واجهة React الأمامية أو Django أو Node API موجودة بالفعل
تكامل Stripe لـ React هو جانب SPA. إذا كنت بحاجة أيضًا إلى إنشاء واجهة برمجة التطبيقات (API)، فسيتم تحديد نطاق ذلك بشكل منفصل - فهذا السعر ليس واجهة خلفية جديدة.
عرض
رد فعل معاينة تدفق عناصر Stripe
قم بمعاينة مسار دفع React: إجراء الدفع، وعنصر الدفع، والتأكيد، وحالات الفشل. يتوفر وضع الحماية المباشر لحساب Stripe الخاص بك بعد التحقق من التوافق. هذه الصفحة لا تعالج الرسوم الحقيقية.
كيف يعمل
كيف يتم تسليم تكامل Stripe لـ React
سير العمل الإضافي القياسي لـ Bacodo، مع عمليات التحقق الخاصة بـ React لـ Vite/CRA وReact Router وواجهة برمجة التطبيقات التي يستدعيها SPA بالفعل.
01
حدد رد الفعل Stripe
تأكد من تكامل Stripe لـ React وأن لديك (أو ستقوم بنطاق) واجهة برمجة التطبيقات (API) التي يمكنها إنشاء PaymentIntents.
02
رد فعل التحقق من التوافق
قم بمراجعة إصدار React والمجمع وواجهة مستخدم الخروج الحالية ولغة الواجهة الخلفية التي يستخدمها SPA بالفعل.
03
التكامل في رد الفعل
قم بإضافة Stripe.js والعناصر ومكونات الخروج وعقد الجلب إلى نقطة نهاية PaymentIntent الخاصة بك.
04
قم بتكوين تطبيق React
قم بتوصيل المفتاح القابل للنشر عبر Vite/CRA public env. يبقى المفتاح السري وخطاف الويب على واجهة برمجة التطبيقات.
05
اختبر مسار الدفع React
قم بتشغيل بطاقات اختبار Stripe و3-D Secure والإلغاء/الرفض والتأكد من أن تحديثات API webhook تشير إلى قراءة تطبيق React.
06
تسليم مصدر رد الفعل
قم بتوفير مصدر React وملاحظات البيئة وقائمة التحقق من المفاتيح المباشرة. تنفيذ React هو ملكك للمحافظة عليه.
الهندسة
كيف يتصل Stripe بمشروع React
لا تحتوي حزمة React على المفتاح السري أبدًا. تستخدم Elements سر العميل من واجهة برمجة التطبيقات (API) الخاصة بك. يقوم Stripe بإعلام واجهة برمجة التطبيقات (API) عن طريق خطاف الويب. React ثم يقرأ حالة الطلب.
رد فعل سباStripe.js / العناصرواجهة برمجة التطبيقات الخاصة بكنوايا الدفع Stripeيةخطاف الويب → واجهة برمجة التطبيقاترد فعل يقرأ الحالة المدفوعة
التقنيات المدعومة
ما يستخدمه التكامل Stripeي لـ React فعليًا
رد فعل سبا
React الحالي على Vite أو CRA أو حزمة SPA مماثلة. هذا ليس هبوطًا لجهاز توجيه تطبيق Next.js - راجع Stripe Integration لـ Next.js للتعرف على هذه المجموعة.
@stripe/react-stripe-js وStripe.js
روابط Stripe React الرسمية لعنصر الدفع والمحافظ.
واجهة برمجة التطبيقات الحالية لديك
يقوم PaymentIntent بإنشاء والتحقق من خطاف الويب على الواجهة الخلفية التي يستدعيها تطبيق React بالفعل. لا تحل هذه الوظيفة الإضافية محل واجهة برمجة التطبيقات هذه بخدمة Bacodo فقط.
حساب شريطي لتطبيق React
حساب Stripe الخاص بك، ومفاتيح الاختبار والمباشرة، ونقطة نهاية خطاف الويب على واجهة برمجة التطبيقات، وأحداث لوحة المعلومات.
تقسيم الاستضافة المطلوبة
يمكن أن يكون React SPA ثابتًا. لا يمكن لخطاف الويب. لا يمكن للمضيف الثابت فقط الذي لا يحتوي على واجهة برمجة التطبيقات (API) إكمال مسار الخروج هذا.
ما الذي يتضمنه
ما يتضمنه تكامل Stripe لـ React
- التكامل في مشروع React الحالي
- كود المصدر الكامل في المستودع الخاص بك
- مكونات البيئة والخروج ذات المفتاح القابل للنشر
- قم بإحضار العقد إلى واجهة برمجة تطبيقات PaymentIntent الخاصة بك
- تم اختبار تدفقات دفع React قبل التسليم
- ملاحظات التسليم للاختبار مدى الحياة
- دعم فني لمدة 30 يومًا بعد التسليم
ليس في السعر الإضافي
- حساب Stripe، ومفاتيح API، ورسوم معالجة Stripe - أنت تمتلكها
- واجهة خلفية جديدة إذا لم يكن لديك واجهة برمجة تطبيقات (API) يمكنها إنشاء PaymentIntents
- الهجرة من React إلى Next.js
- Marketplace Connect أو الفوترة المخصصة ما لم يتم تحديدها كعمل مخصص
Pricing
تكامل Stripe لتسعير React
هذا السعر مخصص لمنصة React SPA فقط. ولا يستخدم تسعير الوظائف الإضافية Next.js أو Django أو Flutter أو React Native.
التكامل Stripeي لـ React
أضف مدفوعات Stripe الجاهزة للإنتاج إلى React SPA الموجودة واحتفظ بكود المصدر.
المتطلبات
- مشروع React قائم
- الوصول إلى Stripe Test Mode
- يلزم باكند للدفع الآمن
$145
دفعة واحدةReact
تحتاجون باكند؟
- الشيفرة المصدرية كاملة
- بدون رسوم ترخيص
- دعم لمدة 30 يوماً
- تكامل كامل
دفع آمن عبرstripe
التسليم والأمان
رد فعل التسليم والممارسات الأمنية
تسليم رد الفعل المقدر
يتم تحديد نطاق عملية سحب React Stripe النموذجية بعد التحقق من توافق React. يعتمد المخطط الزمني على واجهة المستخدم وواجهة برمجة التطبيقات الحالية الخاصة بـ React checkout.
تم اختباره على React قبل التسليم
يتم ممارسة بطاقات وضع الاختبار والتأمين ثلاثي الأبعاد ومسارات الإلغاء والرفض على React SPA قبل التسليم.
تبقى أسرار Stripe خارج حزمة React
المفتاح القابل للنشر فقط هو العام. تظل المفاتيح السرية وأسرار خطاف الويب على الخادم الذي يستدعيه تطبيق React.
يتم التحقق من Webhook على واجهة برمجة التطبيقات، وليس في React
لا تتحقق React من التوقيع Stripeي. تقوم واجهة برمجة التطبيقات الخاصة بك بذلك، ثم تقرأ React النتيجة.
لا توجد مطالبات أمان React غير قابلة للتحقق
نحن لا نطالب بشهادة PCI أو الاحتيال الصفري. تجمع React البطاقات من خلال Stripe Elements، وليس من خلال نموذج بطاقة مخصص نقوم بتخزينه.
الأسئلة الشائعة
الأسئلة الشائعة
ماذا يتضمن تكامل Stripe لـ React؟
يشتمل تكامل Stripe لـ React على Stripe.js وعنصر الدفع على شاشة الخروج الموجودة في React وعقد الجلب إلى واجهة برمجة تطبيقات PaymentIntent وتغطية الاختبار وملاحظات التسليم. تتلقى مصدر React في مشروعك. تعتبر رسوم Stripe وحساب Stripe الخاص بك وإنشاء واجهة خلفية جديدة منفصلة.
هل ستقوم بدمج Stripe في تطبيق React الموجود لدينا؟
نعم. تم تصميم Stripe Integration for React خصيصًا لـ React SPA الموجودة لديك بالفعل (Vite أو CRA أو ما شابه). نحن نلائم عنصر الدفع ونقطة إدخال الدفع في مسارات React الحالية وواجهة المستخدم بدلاً من شحن تطبيق تجريبي منفصل باعتباره التسليم.
هل يتطلب تكامل Stripe لـ React واجهة خلفية؟
نعم لمسار React Stripe للإنتاج. يجب أن تكون PaymentIntents والمفتاح السري والتحقق من webhook موجودة على الخادم. يتلقى متصفح React فقط مفتاحًا قابلاً للنشر وسرًا للعميل. لا يمكن لمضيف React الثابت فقط إكمال مسار الدفع هذا.
ما هي حزم Stripe التي يستخدمها Stripe Integration for React؟
يستخدم Stripe Integration لـ React Stripe.js و@stripe/react-stripe-js الرسميين لعنصر الدفع والمحافظ. نحن لا نقوم بتغليف React checkout في مكون إضافي غير موثق إلا إذا طلبت ذلك صراحةً.
هل يدعم تكامل Stripe لـ React Apple Pay وGoogle Pay؟
نعم عندما يدعمها حساب Stripe الخاص بك والتحقق من المجال والأجهزة. في React، تكون أزرار المحفظة نطاقًا اختياريًا. يظل عنصر الدفع بالبطاقة في React هو البديل الافتراضي.
هل تم تضمين Next.js في تكامل Stripe لـ React؟
لا، إن تكامل Stripe لـ React هو مسار SPA. جهاز توجيه التطبيق Next.js ومعالجات المسار عبارة عن تكامل شريطي لـ Next.js. نحن لا نقوم بترحيل React SPA إلى Next.js داخل سعر إضافة React هذا.
هل يستطيع Stripe Integration for React جمع مدفوعات الاشتراك؟
يمكن لعميل React تأكيد PaymentIntent أو جمع طريقة الدفع من خلال Stripe.js. منتجات الفوترة Stripeية المتكررة وبوابة العملاء ومنطق الفاتورة مباشرة على واجهة برمجة التطبيقات (API) الخاصة بك. قد تحتاج أعمال React كثيفة الاشتراك إلى عرض أسعار مخصص.
أين توجد مفاتيح Stripe القابلة للنشر والمفاتيح السرية في تطبيق React؟
يستخدم متصفح React فقط مفتاح Stripe القابل للنشر عبر بيئة Vite أو CRA العامة. يبقى المفتاح السري وسر التوقيع عبر الويب على واجهة برمجة التطبيقات (API) الخاصة بك. لا يضع تكامل Stripe لـ React مفاتيح سرية في حزمة React.
كيف يعمل وضع اختبار Stripe والوضع المباشر في React؟
نقوم بتنفيذ تكامل Stripe لـ React ضد مفاتيح اختبار Stripe وبطاقات الاختبار أولاً. إن البث المباشر هو تغيير موثق للمفتاح القابل للنشر في React بالإضافة إلى السر المباشر وخطاف الويب المطابقين على واجهة برمجة التطبيقات (API) الخاصة بك، وليس تنشيطًا لترخيص الوظيفة الإضافية.
كيف يتعامل تكامل Stripe في React مع 3-D Secure / SCA؟
يتعامل عنصر الدفع Stripeي مع الحماية ثلاثية الأبعاد من خلال Stripe.js. يجب أن تحافظ صفحة React على تدفق عملية الدفع حتى يُرجع Stripe الحالة النهائية؛ تكامل Stripe لأسلاك React تلك الحالات بشكل صريح.
هل خطافات الويب Stripeية مطلوبة من أجل الخروج من React؟
نعم للوفاء بعد عنصر الدفع React. واجهة مستخدم React ليست مصدر الحقيقة. تتحقق واجهة برمجة التطبيقات الخاصة بك من توقيعات Stripe webhook ثم تحدد الطلب المدفوع أو تفتح المحتوى أو تخطر بالتنفيذ. رد الفعل ثم يقرأ تلك الحالة.
هل يمكننا الاحتفاظ بواجهة مستخدم React checkout الحالية الخاصة بنا مع Stripe؟
نعم. عادةً ما يحافظ تكامل Stripe لـ React على منتج React وعربة التسوق وزر الدفع ويربط عنصر الدفع من هذا الإجراء. يعد نموذج بطاقة React المخصص الذي يمس بيانات PAN الأولية خارج النطاق الافتراضي لأن عنصر الدفع هو مسار PCI الأكثر أمانًا.
هل يتضمن سعر Stripe Integration لـ React حساب Stripe أو رسومًا؟
لا، أنت تقوم بإنشاء وامتلاك حساب Stripe ومفاتيح API ورسوم معالجة Stripe. سعر إضافة React هو التنفيذ في مشروع React الخاص بك، وليس ترخيص دفع Bacodo.
هل سيحل تكامل Stripe لـ React محل الشراء داخل التطبيق من Apple أو Google؟
لا. غالبًا ما تظل السلع الرقمية التي يتم بيعها داخل متجر التطبيقات تتطلب الشراء داخل التطبيق (IAP). تكامل Stripe لـ React مخصص للدفع Stripe في موقع ويب React أو SPA حيث يكون Stripe هو مسار الدفع المسموح به لنوع منتجك.
هل يمكننا تخصيص إيصالات Stripe والبيانات الوصفية في React؟
نعم. تتم محاذاة بيانات تعريف PaymentIntent وسجلات العملاء والحقول التي تستمر فيها بعد تأكيد خطاف الويب مع نموذج الطلب الحالي لديك أثناء تكامل Stripe لـ React. يعرض تطبيق React فقط ما تُرجعه واجهة برمجة التطبيقات (API) الخاصة بك.
ما هو دعم React المتضمن بعد تسليم Stripe؟
مصدر React موجود في الريبو الخاص بك، حتى يتمكن فريقك من الحفاظ عليه. يغطي الدعم المضمن لمدة 30 يومًا الأسئلة الفنية والعيوب في تكامل Stripe الذي تم تسليمه لنطاق React، وليس عمل ميزة React غير ذات الصلة.
كيف يتم التعامل مع تحديثات Stripe.js أو Stripe API على React؟
خلال فترة الـ 30 يومًا، نساعد في حل العطل في تكامل React المقدم الناتج عن تغيير Stripe أو Stripe.js الموثق. ترقيات حزمة React المستمرة بعد ذلك هي الصيانة الخاصة بك، أو الدعم الفني الموسع إذا قمت بشرائها.
ماذا لو فشلت دفعات Stripe في تطبيق React للإنتاج؟
نقوم بتوثيق كيفية قراءة حالة PaymentIntent وسجلات Stripe Dashboard وتسليم الخطاف عبر الويب من مسار الخروج في React. يتضمن الدعم لمدة 30 يومًا حالات رفض استكشاف الأخطاء وإصلاحها، وعمليات إسقاط الأمان ثلاثي الأبعاد، والمفاتيح التي تمت تهيئتها بشكل خاطئ لتدفق React الذي تم تسليمه.
ما هي إصدارات React المتوافقة مع Stripe Integration for React؟
نؤكد على إصدار React الخاص بك، والمجمع (Vite، CRA، أو ما شابه ذلك)، وواجهة برمجة التطبيقات (API) التي يستدعيها SPA بالفعل مقابل إصدار Stripe.js الذي نقوم بتثبيته في وقت التكامل. قد تحتاج أوقات تشغيل React الأقدم أو المتشعبة إلى نطاق إضافي.
ما هو الدعم لمدة 30 يومًا مقابل الدعم الفني الممتد لمدة 6 أشهر لتكامل Stripe لـ React؟
يتم تضمين 30 يومًا بعد التسليم لمسار React Stripe الذي تم تسليمه. يعد الدعم الفني الممتد اختياريًا بنسبة 20% من سعر إضافة React ويغطي ستة أشهر إضافية من المساعدة الفنية على نفس تكامل React، وليس بناء منتج جديد.
التكامل Stripeي لـ React
أضف مدفوعات Stripe الجاهزة للإنتاج إلى React SPA الموجود لديك، واحتفظ بكود المصدر، واحتفظ بالأسرار في واجهة برمجة التطبيقات (API) الخاصة بك.
$145