paypal אחד מהאמצעי התשלום המאובטחים ביותר ברשת
מאפשר למשתמשים לחסוך את חשיפת כרטיסי האשראי ברשת ולשלם באמצעות צד שלישי
במדריך זה נתעמק בתהליך המימוש של אמצעי תשלום זה באפליקציות react + node.js.

תהליך המימוש בשרת node

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

CreateOrder Fn

יצירת הזמנה חדשה בpaypal , כדי להתחיל ביצירת ההזמנה נצטרך שתי דברים.

1. ליצור משתמש בsandbox Account
2. לשלוח בקשה authentication לapi של paypal שתאמת את הזהות ע״י המשתמש שיצרנו בשלב הראשון.

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

יצירת sandbox account

1. כניסה למערכת - לחץ כאן
2. כניסה אל ה Apps & Credentials - במקום הזה נייצר את חשבון paypal לאפלקציה.

לאחר יצירת האפלקציה ולחיצה נקבל את הפרטים הבאים:
Api Credentials בחלק הזה נמצאים הפרטים המזהים של האפלקציה שלנו בענן של paypal,
Client ID - המזהה של החשבון secret key - מזהה סודי לחשבון כמו סוג של סיסמא

כעת דרך הפרטים האלו שקיבלנו נוכל לשלוח בקשה לapi של paypal לקבלת הtoken וקבלת הרשאה ליצירה של עסקאות חדשות.

קבלת הרשאה וזיהוי לביצוע פעולות בPaypal

מימוש תהליך הAuthentication לקבלת הרשאה:

const axios = require("axios");

async function generateAccessToken() {
  try {
    const { data } = await axios({
      url: "https://api-m.sandbox.paypal.com/v1/oauth2/token",
      method: "POST",
      data: "grant_type=client_credentials",
      auth: {
        username: process.env.PAYPAL_CLIENT_ID,
        password: process.env.PAYPAL_SECRET,
      },
    });
    return data.access_token;
  } catch (error) {
    console.log(error);
  }
}

יצירת עסקה - CreateOrder

אז לצורך ביצוע עסקה paypal מספקת לנו Docs מקצועיים לכניסה אל הDocs - לחץ כאן

לפני שליחת הבקשה נצטרך לבקש את הtoken כמו בחלק לעיל,
ואז לשלוח בקשה לapi של יצירת הזמנה עם פרטי ההזמנה ,
מימוש פונקציית createOrder:

exports.createOrder = async () => {
  try {
    const access_token = await generateAccessToken();

    const { data } = await axios({
      url: "https://api-m.sandbox.paypal.com/v2/checkout/orders",
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${access_token}`,
      },
      data: JSON.stringify({
        intent: "CAPTURE",
        purchase_units: [
          {
            amount: {
              currency_code: "ILS",
              value: "49.00",
            },
          },
        ],
        application_context: {
          shipping_preference: "NO_SHIPPING",
          user_action: "PAY_NOW",
          brand_name: "nethanel love paypal",
          // return_url:"שולח אותכם לכתובת שבחרתם"
          // cancel_url:"במידה וביטלתם שולח אותכם לכתובת שבחרתם"
        },
      }),
    });
    return data.id;
  } catch (error) {
    console.log(error);
  }
};

כעת ההזמנה נוצרה בcloud של paypal אך עדין לא אושרה ,
לאחר שליחת הבקשה הפונקציה מחזירה id ,
אותו הid של ההעסקה שנשמרה על הcloud של paypal ,
נוכל להשתמש בו אחרי זה כדי לבצע CAPTURE תפיסה של העסקה מהcloud של paypal ,
מה שיוביל אותנו לסיום ההזמנה.

תפיסת פרטי העסקה - Capture

נממש שליחה בקשה אחרונה אל הapi של paypal ,
לקבלת פרטי ההזמנה , מימוש:

exports.capturePayment = async (orderId) => {
  try {
    const access_token = await generateAccessToken();

    const { data } = await axios({
      url: `https://api-m.sandbox.paypal.com/v2/checkout/orders/${orderId}/capture`,
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization:
          `Bearer ${access_token}`,
      },
    });
    // save data in db

    return data;
  } catch (error) {
    console.log(error);
  }
};

הפונקציה מקבלת את הOrderId שזה הid של ההזמנה שהתקבל בחלק הקודם,
ככה paypal מוצאת את ההזמנה בcloud ומטפלת בה ,
כמובן שגם פה אנו מעבירים את הToken לאימות הזהות של האפליקציה, כדי שpaypal תחפש את ההזמנה לפי id בחשבון המתאים.

סיום העבודה צד שרת

ניצור נקודות קצה שיטפלו בבקשות של יצירת הזמנה, ואישור הזמנה.

מימוש:

const { createOrder, capturePayment } = require("../service/paypal");
const router = require("express").Router();

router.post("/create-order",async (req,res) => {
    try {
      const orderId = await createOrder();
      res.json({orderId})
    } catch (error) {
        res.status(500).json({message:false})
    }
});

router.post("/complete-order",async(req,res) => {
try {
    const {orderId} = req.body;

   const captureData = await capturePayment(orderId);
   res.json(captureData)
} catch (error) {
    console.log(error)
    res.status(500).json({message:false})

}
})

תהליך המימוש צד לקוח react

נוכל לראות את תהליך המימוש בצד לקוח בDocs הרשמיים של Paypal - client sdk
ליישום התהליך בצד לקוח בריאקט נוריד ספרייה שתעזור לנו במימוש,

הורדת הספרייה ויישום

להורדת הספרייה - npm i @paypal/react-paypal-js
לאחר מכן נצטרך לספק Provider , שיכיל את ההגדרות של החשבון והבקשות.

יישום Provider

נעטוף את הקומפוננטה הראשית בProvider שמסופק לנו מהספרייה שהורדנו ,
כעת אנו יכולים לייצר כפתור של paypal מכל קומפוננטה באפליקציה שלנו.

import { PayPalScriptProvider } from "@paypal/react-paypal-js";

ReactDOM.createRoot(document.getElementById("root")).render(
  <PayPalScriptProvider options={{ clientId: import.meta.env.VITE_CLIENT_ID , intent:"capture" , currency:"ILS"}}>
      <App />
  </PayPalScriptProvider>
);

יישום Paypal Button

כעת החלק האחרון ביישום הצד לקוח זה כפתור הPaypal ,
שהוא קומפוננטה שמכילה 2 חלקים ,

1. התבנית העיצובית של הכפתור
2. Props - פונקציות שנעביר אותם שייצרו triger לביצוע אירועים בכפתור.

החלק השני הוא החלק המשמעותי יותר ,
אנו נצטרך לייצר 2 פונקציות הראשונה ליצירת ההזמנה ואישור ההזמנה ,
השניה למשיכת נתוני ההזמנה מapi של paypal.

מימוש הכפתור:

  const createOrder = async (data) => {
    // ההזמנה שנשלחת לשרת , והשרת מחזיר את המזהה של ההזמנה שנוצרה בפאיפל
    const response = await axios({
      url: "http://localhost:3000/payment/create-order",
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      // data:JSON.stringify({cart})
    });
    return response.data.orderId;
  };

  const onApprove = async (data) => {
    // ההאזנה להחלטתו של הלקוח נשלחת לנקודת קצה בשרת ומבצעת אישור \ ביטול
  const response = await axios({
      url: "http://localhost:3000/payment/complete-order",
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      data: JSON.stringify({ orderId: data.orderID }),
    });
    return response.data;
  };

      <PayPalButtons
        createOrder={(data, actions) => createOrder(data, actions)}
        onApprove={(data, actions) => onApprove(data, actions)}
      />

בראבוווֿ!!!

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

יישום משתמשים פקטיביים Testing

לאחר שסיימנו את תהליך המימוש , נרצה לבדוק שהכל עובד כראוי ,
לשם כך paypal יצרה פלטפורמה למפתחים SandBox Developer Platform.

Business account

נחזור לחשבון שיצרנו בשלב הראשון ,
ונכנס לאותה האפליקציה שיצרנו איפה שהיה Apis & Credentials,
אם נגלול נבחין בכותרת Sandbox account info
שמכילה פרטים כמו : Email , Password .
האימייל והסיסמא האלה הם של החשבון העסקי שנוצר שיצרנו חשבון לאפליקציה

זה חשבון פקטיבי ונוכל להתחבר אליו בפלטפורמה של המפתחים sandbox.

Personal account

כדי לייצר לקוחות פקטיביים נבחר בתפריט ניווט באתר של Sandbox
Testing Tools נבחר בTab של Sandbox Accounts ,
כעת נייצר חשבון פקטיבי ע״י לחיצה על הכפתור create account ,

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

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