كيفية دمج PayPal Checkout في تطبيق React

في مجال التجارة الإلكترونية ، ساهمت حلول الدفع الرقمية في زيادة كبيرة في الإيرادات والنمو الإجمالي للشركات من خلال تمكين ومعالجة المدفوعات عبر الحدود بسهولة.

يقدم PayPal حلاً بسيطًا ومرنًا للدفع الرقمي لإدارة المعاملات عبر الإنترنت. من خلال دمج PayPal في تطبيقات الويب الخاصة بك ، يمكنك ضمان وصول العملاء إلى تجربة دفع سلسة وآمنة والتي بدورها يمكن أن تؤدي إلى زيادة المبيعات وثقة العلامة التجارية بشكل عام.

تابع القراءة لمعرفة كيفية دمج PayPal في تطبيقات React الخاصة بك.

قم بإعداد حساب PayPal Sandbox

PayPal Sandbox هي بيئة اختبار توفرها PayPal حتى تتمكن من اختبار تكاملات الدفع داخل تطبيقاتك. يوفر بيئة محاكاة تتضمن جميع ميزات الدفع الموجودة في بيئة الإنتاج الحية لـ PayPal.

ببساطة ، يوفر sandbox نظامًا أساسيًا لاختبار تكاملات الدفع دون الحاجة إلى أموال حقيقية.

باستخدام حساب وضع الحماية ، يمكنك الوصول إلى حساب PayPal افتراضي بأموال تجريبية ، مما يسمح لك بمحاكاة أنواع مختلفة من المعاملات وتكاملات الدفع.

لإنشاء حساب sandbox ، توجه إلى وحدة تحكم مطوري PayPal وقم بتسجيل الدخول باستخدام بيانات اعتماد حساب PayPal الخاص بك. بعد ذلك ، في لوحة تحكم المطور ، انقر فوق ملف حسابات Sandbox زر.

لمعالجة معاملة PayPal من تطبيق React الخاص بك ، فأنت بحاجة إلى حسابين في وضع الحماية: حساب تجاري وحساب شخصي. سيساعدك هذان الحسابان على محاكاة معاملة كاملة — من وجهة نظر العميل وعرض التاجر (الأعمال).

من المهم اختبار وظيفة تكامل الدفع في التطبيق الخاص بك من كلا المنظورين.

اضغط على إنشاء حساب زر لإعداد الحسابين.

في صفحة إعدادات الحساب ، قم بإنشاء حساب من كل نوع: شخصي ، ثم حساب تجاري. ستستخدم بيانات اعتماد الحساب الشخصية لتسجيل الدخول إلى صندوق حماية PayPal حساب شخصي. من ناحية أخرى ، ستستخدم بيانات اعتماد حساب الأعمال لإنشاء مشروع على وحدة تحكم المطورين للحصول على معرف عميل PayPal.

بدلاً من ذلك ، بدلاً من إنشاء حسابات جديدة ، يمكنك استخدام حسابات الحماية الافتراضية التي يوفرها PayPal لاختبار تكامل الدفع.

قم بإنشاء مشروع PayPal

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

أخيرًا ، انسخ معرّف عميل التطبيق.

قم بإعداد عميل React

أنشئ تطبيق React، افتح ال public / index.html ملف ، وأضف معرف العميل الخاص بك بالتنسيق الموضح أدناه في قسم عنصر الرأس.

<النصيsrc=" https://www.paypal.com/sdk/js? معرف العميل = معرف العميل والعملة = الدولار الأمريكي>النصي>

تقوم علامة البرنامج النصي بتحميل PayPal JavaScript SDK ، وهي مكتبة توفر وظائف من جانب العميل للتفاعل مع واجهة برمجة تطبيقات PayPal ، وتجعلها متاحة للاستخدام في مكونات React.

باستخدام وظائف SDK ، يمكنك إنشاء زر دفع PayPal يتعامل مع تدفق الدفع يتضمن إرسال تفاصيل الدفع إلى PayPal ، والإذن بالدفع ، ومعالجة الدفع إجابة.

قم بإنشاء مكون منتج

في الدليل / src ، أنشئ مجلدًا جديدًا للمكونات ، وأضف ملفين: Product.js و PayPalCheckout.js.

افتح ملف Product.js وأضف الرمز أدناه:

يستورد رد فعل ، {useState} من"تتفاعل";
يستورد"./product.style.css";
يستورد"../assests/l laptop.jpg";
وظيفةبرنامج() {
يعود (
"حاوية المنتج">
"محتوى المنتج">
"منتج"> 
يتطلب("../assests/l laptop.jpg")} alt ="حاسوب محمول" />
 </div>
"وصف">
 ماك بوك برو </h2>



 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Maxime mollitia، molestiae quas in sint repudiandae
 يترتب على ذلك.
 </p>

السعر: $350.00</h3>
 </div>
 </header>
 </div>
 );
}


يصدّرتقصير برنامج؛

يقدم هذا الرمز مكون منتج بسيط.

قم بإنشاء مكون PayPal Checkout

أضف الكود التالي إلى ملف PayPalCheckout.js:

يستورد React، {useRef، useEffect، useState} من"تتفاعل";
يستورد فشل الدفع من"./فشل الدفع";
يستورد الدفع الناجح من"./الدفع الناجح";
وظيفةPayPalCheckout() {
مقدار ثابت باي بال = useRef () ،
مقدار ثابت [transactionStatus، setTransactionStatus] = useState (باطل);
 useEffect (() => {
نافذة او شباك.paypal
 .أزرار({
 إنشاء النظام: (البيانات ، الإجراءات ، يخطئ) => {
يعود Actions.order.create ({
 نية: "يأسر",
 buy_units: [
 {
 وصف: "كمبيوتر محمول MacBook",
 كمية: {
 رمز العملة: "دولار أمريكي",
 قيمة: 350.00,
 },
 },
 ],
 });
 },
 عند الموافقة: غير متزامن (البيانات ، الإجراءات) => {
مقدار ثابت طلب = انتظر Actions.order.capture () ؛
وحدة التحكم.سجل("نجاح"، طلب)؛
 setTransactionStatus ("نجاح");
 },
 onError: (يخطئ) => {
وحدة التحكم.log (يخطئ) ؛
 setTransactionStatus ("فشل");
 },
 })
 .render (paypal.current) ؛
 }, []);
لو (حالة عملية "نجاح") {
يعود<الدفع الناجح />;
 }
لو (حالة عملية "فشل") {
يعود<فشل الدفع />;
 }
يعود (



</div>
 </div>
 );
}
يصدّرتقصير PayPalCheckout

يستخدم هذا الرمز ثلاثة رد فعل الخطافات: useRef و useState و useEffect. يستخدم useRef لإنشاء مرجع لعنصر div ، والذي سيكون بمثابة حاوية لزر الدفع في PayPal.

يستخدم useEffect لإنشاء زر PayPal بامتداد باي بال. أزرار وظيفة ، ثم يعرض هذا الزر في عنصر div المشار إليه بواسطة paypal.currenطريقة ر.

ال باي بال. أزرار تأخذ الدالة كائنًا بعدة خصائص:

• createOrder: تقوم هذه الوظيفة بإرجاع كائن يحتوي على تفاصيل الترتيب الذي أنشأه المستخدم. ستشمل تفاصيل الطلب التفاصيل المحددة للمنتج أو الخدمة مثل المبلغ واسم المنتج والوصف والعملة.
• عند الموافقة: يتم تشغيل هذه الوظيفة عند الموافقة على الدفع. إنه يلتقط الدفع ويسجل رسالة النجاح إلى وحدة التحكم. كما أنه يحدد ملف حالة عملية دولة ل نجاح.
• onError: يتم تشغيل هذه الوظيفة عندما يواجه الدفعة خطأ. يقوم بتسجيل رسالة الخطأ إلى وحدة التحكم ويقوم بتعيين ملف حالة عملية دولة ل فشل.

أخيرًا ، يعرض المكون بشكل مشروط إما الدفع الناجح أو فشل الدفع المكون اعتمادًا على قيمة ملف حالة عملية ولاية.

لن يتم عرض هذين المكونين إلا بعد إجراء معاملة ناجحة أو معاملة فاشلة. انطلق وأنشئ ملفين: PaymentSuccess.js و PaymentFailure.js في مجلد المكونات وإضافة مكون وظيفي مع عنصر فقرة يعرض حالة المعاملة.

قم بتحديث مكون App.js

افتح ملف src / App.js وأضف الكود أدناه:

يستورد رد فعل ، {useState} من"تتفاعل";
يستورد منتج من"./components/Product";
يستورد PayPalCheckout من"./components/PayPalCheckout";
يستورد"./App.css";
وظيفةبرنامج() {
مقدار ثابت [checkout، setCheckOut] = useState (خطأ شنيع);
يعود (

"برنامج">
"عنوان التطبيق">
 {الدفع؟ (

 ): (
"منتج">
 className ="الدفع"
 onClick = {() => {
 setCheckOut (حقيقي);
 }}
 >
 أضف إلى عربة التسوق والدفع
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
يصدّرتقصير برنامج؛

يستخدم هذا الرمز أسلوب العرض الشرطي لعرض مكون PayPalCheckout أو مكون المنتج. يقوم الخطاف useState بتهيئة متغير حالة يسمى checkout as false ، والذي يتتبع الحالة الحالية عند تحميل الصفحة.

في البداية ، يعرض React مكون المنتج ، بما في ذلك زر الخروج. عندما يقوم المستخدم بالنقر فوق زر الخروج ، يتم تشغيل وظيفة معالج onClick لتحديث متغير السداد إلى صحيح. يطالب هذا التحديث مكون التطبيق بعرض مكون PayPalCheckout بدلاً من ذلك.

ميزات دفع PayPal إضافية

تضمن ميزات الدفع في PayPal ، مثل One Touch و PayPal Credit ، أن يتمتع عملاؤك بعملية دفع مبسطة وآمنة وموثوقة ومريحة.

بينما يمكنك إنشاء خدمة معالجة الدفع الخاصة بك من البداية ، يُفضل استخدام منصة دفع مثل PayPal كبديل أكثر مرونة وفعالية. بشكل أساسي ، مع وجود حل للدفع ، لا داعي للقلق بشأن إدارة البنية التحتية المطلوبة لإعداد خدمة دفع مخصصة.