מההתחלה ועד הסוף, מדריך זה מעביר אותך דרך השלבים להפעלת תשלומי PayPal.

בתחום המסחר האלקטרוני, פתרונות תשלום דיגיטליים תרמו לגידול משמעותי בהכנסות ובצמיחה הכוללת של עסקים על ידי מתן אפשרות ועיבוד תשלומים חוצי גבולות בקלות.

PayPal מציעה פתרון תשלום דיגיטלי פשוט וגמיש לניהול עסקאות מקוונות. על ידי שילוב PayPal ביישומי האינטרנט שלך, אתה יכול להבטיח ללקוחות גישה לחוויית תשלום חלקה ומאובטחת, אשר בתורה יכולה להוביל להגדלת המכירות ולאמון המותג הכולל.

המשך לקרוא כדי ללמוד כיצד לשלב את PayPal באפליקציות React שלך.

הגדר חשבון PayPal Sandbox

PayPal Sandbox היא סביבת בדיקה שמסופקת על ידי PayPal כך שתוכל לבדוק שילובי תשלום בתוך האפליקציות שלך. הוא מציע סביבה מדומה הכוללת את כל תכונות התשלום שנמצאות בסביבת הייצור החי של PayPal.

פשוט, ארגז החול מספק פלטפורמה לבדיקת שילובי תשלום ללא צורך בכסף אמיתי.

באמצעות חשבון ה-sandbox ניתן לגשת לחשבון PayPal וירטואלי עם כספי בדיקה, המאפשר לדמות סוגים שונים של עסקאות ושילובי תשלום.

כדי ליצור חשבון ארגז חול, עבור אל מסוף מפתחים של PayPal והיכנס עם האישורים של חשבון PayPal שלך. לאחר מכן, בלוח המחוונים למפתחים, לחץ על חשבונות ארגז חול לַחְצָן.

instagram viewer

כדי לעבד עסקת PayPal מאפליקציית React שלך, אתה צריך שני חשבונות ארגז חול: חשבון עסקי וחשבון אישי. שני חשבונות אלה יעזרו לך לדמות עסקה שלמה - הן מנקודת מבטו של לקוח והן מנקודת מבטו של הסוחר (העסקי).

חשוב לבדוק את הפונקציונליות של שילוב התשלום באפליקציה שלך משתי נקודות המבט.

הקלק על ה צור חשבון לחצן כדי להגדיר את שני החשבונות.

בדף הגדרות החשבון, צור אחד מכל סוג של חשבון: אישי ולאחר מכן עסקי. אתה תשתמש באישורי החשבון האישי כדי להיכנס ארגז החול של PayPal חשבון אישי. מצד שני, תשתמש באישורים של החשבון העסקי כדי ליצור פרויקט בקונסולת המפתחים כדי לקבל את מזהה הלקוח של PayPal.

לחלופין, במקום ליצור חשבונות חדשים, אתה יכול להשתמש בחשבונות ברירת המחדל של ארגז החול שמסופקים על ידי PayPal כדי לבדוק את שילובי התשלום.

צור פרויקט PayPal

בדף לוח המחוונים למפתחים, לחץ על אפליקציות ואישורים כפתור ולחץ צור אפליקציה לחצן להגדרת פרויקט PayPal. לאחר מכן, מלא את שם הבקשה שלך, בחר סוֹחֵר כסוג החשבון, ובחר את האישורים עבור החשבון העסקי שיצרת בתחילה.

לבסוף, העתק את מזהה הלקוח של האפליקציה.

הגדר את React Client

צור אפליקציית React, פתח את ה public/index.html קובץ, והוסף את מזהה הלקוח שלך בפורמט המוצג למטה בקטע head element.

<תַסרִיטsrc=" https://www.paypal.com/sdk/js? client-id=your-client-ID&currency=USD">תַסרִיט>

תג הסקריפט טוען את PayPal JavaScript SDK, ספרייה המספקת פונקציונליות בצד הלקוח לאינטראקציה עם ה-API של PayPal, ומאפשרת אותה לשימוש ברכיבי React.

באמצעות הפונקציות של SDK, אתה יכול ליצור כפתור תשלום PayPal המטפל בתזרים התשלום אשר כולל שליחת פרטי תשלום ל-PayPal, אישור התשלום וטיפול בתשלום תְגוּבָה.

אתה יכול למצוא את הקוד של הפרויקט הזה בו מאגר GitHub.

צור רכיב מוצר

בספריית /src, צור תיקיית רכיבים חדשה והוסף שני קבצים: Product.js ו-PayPalCheckout.js.

פתח את הקובץ Product.js והוסף את הקוד למטה:

יְבוּא תגובה, { useState } מ"לְהָגִיב";
יְבוּא"./product.style.css";
יְבוּא"../assests/laptop.jpg";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
"מיכל מוצר">
"תוכן מוצר">
"מוצר"> 
לִדרוֹשׁ("../assests/laptop.jpg")} alt="מחשב נייד" />
 </div>
"תיאור">
 MacBook Pro</h2>





 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Maxime mollitia, molestiae quas vel sint commodi repudiandae
 תוצאת.
 </p>


מחיר: $350.00</h3>
 </div>
 </header>
 </div>
 );
}






יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קוד זה יוצר רכיב מוצר פשוט.

צור את רכיב PayPal Checkout

הוסף את הקוד הבא לקובץ PayPalCheckout.js:

יְבוּא תגובה, { useRef, useEffect, useState } מ"לְהָגִיב";
יְבוּא כשל בתשלום מ"./Payment Failure";
יְבוּא PaymentSuccess מ"./PaymentSuccess";
פוּנקצִיָהPayPalCheckout() {
const paypal = useRef();
const [transactionStatus, setTransactionStatus] = useState(ריק);


 useEffect(() => {
חַלוֹן.paypal
 .כפתורים({
 createOrder: (נתונים, פעולות, טעות) => {
לַחֲזוֹר actions.order.create({
 כוונה: "לִלְכּוֹד",
 יחידות_רכישה: [
 {
 תיאור: "מחשב נייד MacBook",
 כמות: {
 קוד מטבע: "דולר אמריקאי",
 ערך: 350.00,
 },
 },
 ],
 });
 },
 על אישור: אסינכרון (נתונים, פעולות) => {
const סדר = לְהַמתִין actions.order.capture();


לְנַחֵם.עֵץ("הַצלָחָה", להזמין);
 setTransactionStatus("הַצלָחָה");
 },
 onError: (לִטְעוֹת) => {
לְנַחֵם.log (שגיאה);
 setTransactionStatus("כישלון");
 },
 })
 .render (paypal.current);
 }, []);


אם (סטטוס עסקה "הַצלָחָה") {
לַחֲזוֹר<PaymentSuccess />;
 }


אם (סטטוס עסקה "כישלון") {
לַחֲזוֹר<כשל בתשלום />;
 }


לַחֲזוֹר (




</div>
 </div>
 );
}


יְצוּאבְּרִירַת מֶחדָל PayPalCheckout;

קוד זה משתמש בשלושה ווי תגובה: useRef, useState ו-useEffect. הוא משתמש ב-useRef כדי ליצור הפניה לרכיב div, שיפעל כמיכל עבור כפתור התשלום ב-PayPal.

הוא משתמש ב-useEffect כדי ליצור כפתור PayPal עם paypal. כפתורים function, ולאחר מכן מעבד את הכפתור הזה באלמנט div שאליו מתייחסים paypal.currenשיטת t.

ה paypal. כפתורים הפונקציה לוקחת אובייקט עם מספר מאפיינים:

  • createOrder: פונקציה זו מחזירה אובייקט המכיל את פרטי ההזמנה שהמשתמש יצר. פרטי ההזמנה יכללו את הפרטים הספציפיים של המוצר או השירות כגון הסכום, שם המוצר, התיאור והמטבע.
  • onApprove: פונקציה זו פועלת כאשר התשלום מאושר. זה לוכד את התשלום ומתעד את הודעת ההצלחה לקונסולה. זה גם קובע את סטטוס העסקה מדינה ל הַצלָחָה.
  • onError: פונקציה זו פועלת כאשר התשלום נתקל בשגיאה. הוא רושם את הודעת השגיאה למסוף ומגדיר את סטטוס העסקה מדינה ל כישלון.

לבסוף, הרכיב הופך באופן מותנה את ה- PaymentSuccess אוֹ כשל בתשלום רכיב בהתאם לערך של סטטוס העסקה מדינה.

שני רכיבים אלה יעבדו רק לאחר, עסקה מוצלחת או נכשלה. קדימה, צור שני קבצים: PaymentSuccess.js ו PaymentFailure.js בתיקיית הרכיבים והוסיפו רכיב פונקציונלי עם רכיב פסקה המציג את מצב העסקה.

עדכן את רכיב App.js

פתח את הקובץ src/App.js והוסף את הקוד למטה:

יְבוּא תגובה, { useState } מ"לְהָגִיב";
יְבוּא מוצר מ"./components/Product";
יְבוּא PayPalCheckout מ"./components/PayPalCheckout";
יְבוּא"./App.css";
פוּנקצִיָהאפליקציה() {
const [checkout, setCheckOut] = useState(שֶׁקֶר);


לַחֲזוֹר (


"אפליקציה">
"כותרת אפליקציה">
 {לבדוק? (

 ): (
"מוצר">
 className="לבדוק"
 onClick={() => {
 setCheckOut(נָכוֹן);
 }}
 >
 הוסף לעגלה ותשלום
 </button>

 </div>
 )}
 </header>
 </div>
 );
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קוד זה משתמש בגישת עיבוד מותנה כדי להציג את רכיב PayPalCheckout או את רכיב המוצר. ה-useState hook מאתחל משתנה מצב שנקרא checkout as false, שעוקב אחר המצב הנוכחי כאשר הדף נטען.

בתחילה, React מעבד את רכיב המוצר, כולל כפתור התשלום. כאשר משתמש לוחץ על כפתור התשלום, פונקציית המטפל onClick מפעילה לעדכן את משתנה התשלום ל-true. עדכון זה מנחה את רכיב האפליקציה להציג את רכיב PayPalCheckout במקום זאת.

תכונות תשלום נוספות של PayPal

תכונות התשלום של PayPal, כגון One Touch ו-PayPal Credit, מבטיחות שהלקוחות שלך יוכלו ליהנות מתהליך תשלום יעיל, מאובטח, אמין ונוח.

בעוד שאתה יכול לבנות שירות עיבוד תשלומים משלך מאפס, שימוש בפלטפורמת תשלום כמו PayPal היא עדיף אלטרנטיבה גמישה ויעילה יותר. בעיקרו של דבר, עם פתרון תשלום במקום, אינך צריך לדאוג לגבי ניהול התשתית הנדרשת להקמת שירות תשלום מותאם אישית.