קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

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

באמצעות Stripe, אתה יכול לקבל תשלומים ממגוון מקורות, כולל כרטיסי אשראי וכרטיסי חיוב, Apple Pay ו-Google Pay.

הוספת Stripe Checkout לאפליקציית Next.js

אתה יכול לשלב Stripe checkout עם יישומים שנוצרו בטכנולוגיות שונות כולל Next.js.

מדריך זה מניח שיש לך אתר מסחר אלקטרוני של Next.js והוא מספק רק מדריך כיצד להוסיף Stripe checkout לאתר.

הגדרת חשבון Stripe ואחזור מפתחות API

כדי להשתמש ב-Stripe Checkout, עליך ליצור חשבון Stripe ולקבל את מפתחות ה-API. מפתחות ה-API מורכבים ממפתח שניתן לפרסום ומפתח סודי, שבהם תשתמש כדי לאמת בקשות מהאפליקציה שלך ל-Stripe API.

בצע את השלבים הבאים כדי להגדיר חשבון Stripe:

  1. עבור אל אתר פס ולחץ על כפתור "הירשם".
  2. הזן את הדואר האלקטרוני, השם המלא, המדינה והסיסמה שלך ולחץ על כפתור "צור חשבון".
    3. instagram viewer
  3. אמת את האימייל שלך על ידי ביצוע ההוראות בדוא"ל ש-Stripe תשלח לך.
  4. בלוח המחוונים של הפס, לחץ על "הפעל תשלומים" וענה על השאלות הרצויות כדי להשלים את תהליך הגדרת החשבון. שאלות אלו עשויות להיות על שם העסק, הכתובת ופרטי הבנק. למטרות פיתוח, השתמש במצב בדיקה.
  5. העתק את מפתחות ה-API מהכרטיסייה "מפתחים" לקובץ ה-env בתיקיית האפליקציה שלך.

כעת תוכל לגשת לחשבון Stripe באמצעות מפתחות ה-API.

התקנת חבילת Stripe npm

הפעל פקודה זו כדי להתקין את חבילת Stripe npm.

פס להתקין npm

ייבא את ספריית Stripe לדף רכיב התשלום שלך.

יְבוּא פס מ'פס';

בתיקיית ה-API, צור קובץ חדש בשם checkout-session.js file. אתחל את אובייקט ה-Stripe עם מפתחות ה-API שאחזרת מלוח המחוונים של Stripe.

const פס = לִדרוֹשׁ('פס')(process.env. STRIPE_SECRET_KEY);

בפונקציית המטפל, קבל את הפריטים ליציאה מהפרמטרים של הגוף.

יְצוּאבְּרִירַת מֶחדָלאסינכרוןפוּנקצִיָהמטפל(דרישה, מילואים) {
const { item } = req.body;
};

צור אובייקט הפעלה של קופה לפונקציית המטפל והעביר את הפריטים.

const מפגש = לְהַמתִין stripe.checkout.sessions.create({
 סוגי_שיטת_תשלום: ['כַּרְטִיס'],
 פריטי_שורות: [
 פריט,
 ],
 מצב: 'תַשְׁלוּם',
 success_url: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

הנה המשמעות של הצמתים שאתה מעביר לאובייקט ההפעלה:

  • סוגי_שיטת_תשלום: אמצעי התשלום שסשן התשלום מקבל. עיין ברשימת אמצעי התשלום הזמינים ב- תיעוד פס.
  • line_items: רשימה של פריטים שהמשתמש רוכש.
  • מצב: המצב של סשן התשלום. אם פריטי התשלום כוללים לפחות פריט חוזר אחד עוברים "מנוי".
  • success_url: ה-URL Stripe יפנה מחדש משתמשים אם התשלום יצליח
  • cancel_url: ה-URL Stripe יפנה מחדש משתמשים אם הם יבטלו את התשלום.

בסך הכל, הקובץ checkout-session.js אמור להיראות כך:

יְצוּאבְּרִירַת מֶחדָלאסינכרוןפוּנקצִיָהמטפל(דרישה, מילואים) {
אם (שיטה 'הודעה') {
const { cart } = req.body;
לְנַסוֹת {
const מפגש = לְהַמתִין stripe.checkout.sessions.create({
 פריטי_שורות: [
 עֲגָלָה
 ],
 מצב: 'תַשְׁלוּם',
 success_url: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, session.url);
 } לתפוס (שגיאה) {
 res.status (err.statusCode || 500).json (err.message);
 }
 } אַחֵר {
 res.setHeader('להתיר', 'הודעה');
 res.status(405).סוֹף('השיטה אינה מותרת');
 }
}

פונקציה זו משתמשת כעת ב- try/catch כדי להפנות מחדש משתמשים כאשר מתרחשת שגיאה במהלך התשלום. כעת, לאחר שיצרת את מסלול ה-API שיעבד את התשלום, השלב הבא הוא יצירת רכיב קופה שיטפל בתהליך הקופה.

בדוק את הפוסט הזה על יצירת מסלולי API ב-Next.js להסבר מעמיק יותר על מסלולי Next.js API.

יצירת רכיב קופה

כדי לעבד את התשלום, עליך להתקין את ספריית @stripe/stripe-js באמצעות NPM.

npm התקן את @stripe/stripe-js

ספריית @stripe/stripe-js היא כלי טעינה שיעזור לך לטעון את מופע Stripe.js.

לאחר סיום ההתקנה, צור קובץ חדש בספריית /components שלך בשם /components/checkout.js. לאחר מכן קרא לפונקציה loadstripe מספריית @stripe/stripe-js, תוך העברת המפתח הניתן לפרסום כארגומנט.

יְבוּא { loadStripe } מ'@stripe/stripe-js';
const stripePromise = loadStripe(
 process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() מחזירה הבטחה שנפתרת עם אובייקט Stripe שזה עתה נוצר לאחר שה-Stripe.js נטען.

לאחר מכן, הוסף פונקציה ליצירת סשן קופה ברכיב.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהלבדוק({עֲגָלָה}) {
const handleCheckout = אסינכרון () => {
לְנַסוֹת {
const פס = לְהַמתִין stripePromise;
const checkoutSession = לְהַמתִין axios.post("/api/checkout-session", {
 עֲגָלָה,
 });


const תוצאה = לְהַמתִין stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
אם (result.error) {
 התראה (result.error.message);
 }
 } לתפוס (שגיאה) {
לְנַחֵם.log (שגיאה);
 }
 };
לַחֲזוֹר (


 </div>
 );
}

פונקציה זו משתמשת Axios לקרוא ל-API יצרת בתיקייה /api כדי לאחזר את הפעלת התשלום.

הוסף לחצן קופה בהצהרת החזרה שיפעיל את פונקציית handleCheckout בלחיצה.

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

טיפול בהפניות מחדש מ-Stripe

במסלול ה-API של Checkout, הגדרת כתובת URL להצלחה וכתובת URL לביטול שהפס צריך להפנות משתמש כאשר התהליך מצליח או נכשל. כתובת האתר לביטול ממפה למסלול /cancel, בעוד שכתובת ה-URL של הצלחה ממפה למסלול /success. הוסף שני רכיבים בתיקייה /pages בשם success ובטל כדי לטפל בכתובות האתרים הללו.

ב-pages/success.js, הוסף את רכיב ההצלחה.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָההַצלָחָה() {
לַחֲזוֹר<div>יציאה בהצלחהdiv>;
}

ב-pages/cancel.js, הוסף את רכיב הביטול.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהלְבַטֵל() {
לַחֲזוֹר<div>אירעה שגיאה במהלך התשלוםdiv>;
}

כעת, Stripe תפנה מחדש לכל אחד מהדפים הללו בהתאם למצב התשלום.

אם אתה משתמש ב-Next.js 13, עיין במדריך זה על כיצד פועלת תיקיית האפליקציה ב-Next.js 13 כדי לעבור מהתיקייה /pages.

אפשרויות התאמה אישית נוספות עבור דף התשלום

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

מדוע להשתמש ב-Stripe עבור דף התשלום?

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

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