BacodoBACODO

תוסף Next.js

שילוב Stripe עבור Next.js

הוסף Stripe Checkout או Payment Element, PaymentIntents ו-webhooks חתומים לפרויקט הקיים שלך ב-Next.js App Router מבלי לבנות חיווט קופה, 3D Secure ו-Route Handler מאפס.

  • קוד מקור מלא כלול ושלך לצמיתות
  • אין צורך במפתח רישיון תוסף או ברישיון חוזר
  • מוכן לייצור ונבדק
  • משולב בפרויקט ובמחסנית Next.js הקיימים שלך
  • תמיכה טכנית של 30 יום לאחר מסירה כלולה
  • תמיכה טכנית מורחבת ל-6 חודשים אופציונלית ב-20% ממחיר התוספת

החל מ

$145

USD · Next.js

צפה בהדגמה

שילוב Stripe עבור Next.js · Next.js

קוד מקור מלאללא מפתח רישיוןמוכנה להפקהאינטגרציה נבדקהתמיכה למשך 30 יום

Requirements

What שילוב Stripe עבור Next.js needs

  • פרויקט Next.js קיים
  • גישה ל-Stripe Test Mode

אין צורך בגישה למאגר. גישה לפרויקט נדרשת רק אם תרצו ש־Bacodo ישלב ישירות.

מה זה עושה

Stripe checkout בתוך אפליקציית Next.js שלך

Bacodo משלבת את Stripe בפרויקט Next.js שכבר יש לך. לאחר המסירה, היישום מתגורר ב-repo שלך כך שהצוות שלך יכול לקרוא, לשנות ולהרחיב אותו. אתה עדיין הבעלים של חשבון Stripe, מפתחות API ועמלות Stripe.

בעיה שזה פותר

תשלומי כרטיסים וארנק ב-Next.js זקוקים ל-PaymentIntents, Checkout או Payment Element, 3-D Secure, מפתחות סודיים לשרת בלבד, ו-webhook Route Handler שמאמת חתימות. בניית הנתיב הזה מאפס היא איטית וקל לטעות.

איך זה נוחת בפרויקט

אנו מוסיפים Stripe.js בלקוח Next.js, מטפלי מסלולים (או פעולות שרת) היוצרים PaymentIntents או Checkout Sessions, אימות webhook, דפי הצלחה/ביטול ותצורת בדיקה/סביבה חיה עבור נתב האפליקציה.

למה זה חוסך זמן פיתוח

הצוות שלך מדלג על ההטמעה הראשונה של Stripe Next.js: מטפלי נתב אפליקציות, SCA, מצבי שגיאה ומסירה שמתעדת כיצד לשלוח מפתחות חיים.

למי זה מיועד

מפתחים, צוותים טכניים, סוכנויות וסטארטאפים שכבר יש להם אפליקציית Next.js ורוצים נתיב תשלום ייצור שהם יכולים לשמור.

יכולות עיקריות

מה כלול ב־שילוב Stripe עבור Next.js

Stripe Checkout או רכיב תשלום ב-Next.js

השתמש ב-Stripe Checkout המתארח או ברכיב תשלום מוטבע בדף התשלום שלך ב-Next.js. לחצני כניסת כרטיס, 3D Secure וכפתורי הארנק נשארים בנתיב ה-PCI של Stripe - לא טופס כרטיס מותאם אישית שאתה מאחסן.

מטפלי מסלולים של Next.js עבור PaymentIntents

צור הפעלות לקופה או כוונות תשלום ב-Next.js Route Handlers. הדפדפן משתמש רק במפתח הניתן לפרסום ובסוד הלקוח - המפתח הסודי לעולם אינו נשלח ברכיב לקוח.

Apple Pay ו-Google Pay ב-Next.js Checkout

הפעל לחצני ארנק ב-Stripe Checkout או ב-Payment Element כאשר חשבון ה-Stripe והדומיין שלך מאומתים. Next.js fallback נשאר בתשלום הכרטיס.

מצב בדיקה של Next.js ואז מקשי Stripe חיים

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

Webhook Route Handler עבור מצב ההזמנה Next.js

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

Next.js הצלחה, ביטול ושגיאה

טפל בכרטיסים שנדחו, Checkout שבוטל, כשלי רשת ו-3-D Secure לא שלם כך שממשק המשתמש של Next.js לא ישאיר את הלקוח בעמוד מת.

מקרי שימוש

מתי שילוב Stripe עבור Next.js מתאים

חנות או אתר הזמנות קיים של Next.js

אתה כבר מקבל הזמנות או הזמנות ב-Next.js ואתה זקוק לתשלום בכרטיס מבלי לשכתב את הקטלוג או את זרימת ההזמנות.

סוכנות מוסרת אתר לקוח של Next.js לייצור

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

אפליקציית SaaS או חברות Next.js

אפליקציית Next.js חייבת לגבות תשלום ראשון או לעדכן אמצעי תשלום בזמן שהמנויים והחשבוניות נשארים בשרת שלך וב-Stripe Billing אם אתה כבר משתמש בהם.

תשלומי Next.js marketplace או שירות מאוחר יותר

התחל עם חיובי לקוחות באפליקציית Next.js. ניתן להגדיר את חיובי Stripe Connect או היעד בנפרד אם דגם ה-Next.js שלך צריך אותם.

דמו

תצוגה מקדימה של זרימת התשלום של Next.js Stripe

הצג תצוגה מקדימה של נתיב התשלום של Next.js: פעולת עגלת קניות או תשלום, רכיב תשלום או תשלום, אישור ומצבי כשל. ארגז חול חי כנגד חשבון Stripe שלך ​​זמין לאחר בדיקת תאימות. דף זה אינו מעבד חיובים אמיתיים.

איך זה עובד

כיצד מועברת שילוב Stripe עבור Next.js

זרימת עבודה סטנדרטית של תוסף Bacodo, עם בדיקות ספציפיות ל-Next.js ול-Stripe עבור נתב אפליקציות, מטפלי מסלולים ושכבת הנתונים הקיימת שלך.

  1. 01

    בחר Next.js Stripe

    אשר את שילוב Stripe עבור Next.js והאם התשלום ביום הראשון הוא Checkout או Payment Element.

  2. 02

    בדיקת תאימות Next.js

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

  3. 03

    השתלב ב-Next.js

    הוסף Stripe.js, דפי תשלום, מטפלי מסלולים להפעלות או PaymentIntents, ומטפל חתום ב-webhook.

  4. 04

    הגדר את אפליקציית Next.js

    חוט מפתחות בדיקה של Next.js, נקודת קצה webhook ותצורת שרת ספציפית לסביבה.

  5. 05

    בדוק את נתיב התשלום Next.js

    הפעל כרטיסי בדיקת Stripe, 3-D Secure, ביטול/דחה נתיבים ואישור webhook באפליקציית Next.js.

  6. 06

    מסירת המקור Next.js

    שלח מקור Next.js, הערות תצורה ורשימת בדיקה חיה של מפתחות. היישום של Next.js הוא שלך לתחזוקה.

ארכיטקטורה

כיצד Stripe מתחבר לפרויקט Next.js

הדפדפן Next.js אף פעם לא מדבר עם Stripe עם מפתח סודי. Checkout או Payment Element משתמשים בסוד לקוח ממטפל בנתיבים. Stripe מודיע על Next.js webhook שלך לפני שאתה ממלא.

הדף הבא.jsStripe.js / Checkoutמטפל במסלוליםStripe PaymentIntentsWebhook Route Handlerמסד נתונים / מצב הזמנה

טכנולוגיות נתמכות

מה שילוב Stripe עבור Next.js באמת משתמש

נתב אפליקציית Next.js

Next.js היציב הנוכחי עם נתב אפליקציות הוא ברירת המחדל. ניתן להגדיר את נתב הדפים אם זה מה שהמאגר שלך ב-Next.js כבר משתמש.

Stripe.js ו-Stripe Node SDK

Stripe.js רשמי בלקוח Next.js ו-Stripe בשרת עבור הפעלות, PaymentIntents ואימות webhook.

שכבת הנתונים שלך ב-Next.js

עדכוני הזמנה או זכאות נשארים במסד הנתונים או ב-API שאפליקציית Next.js שלך כבר משתמשת בו. אנחנו לא מחליפים את הקצה האחורי שלך בשירות של Bacodo בלבד.

חשבון Stripe עבור אפליקציית Next.js

חשבון Stripe, בדיקה ומפתחות חיים בשימוש על ידי Next.js, נקודת קצה webhook ואירועי Dashboard. עמלות העיבוד של Stripe נשארות עם Stripe.

נדרשת הגדרת אירוח של Next.js

מארח שיכול להריץ את Next.js Route Handlers ולקבל Stripe webhooks (לדוגמה Vercel או שרת Node). ייצוא סטטי בלבד אינו מספיק עבור נתיב התשלום הזה.

מה כלול

מה כוללת שילוב Stripe עבור Next.js

  • שילוב בפרויקט Next.js הקיים
  • קוד מקור מלא במאגר שלך
  • תצורת מטפל בסביבה ומסלולים
  • נדרשים עבור נתיב התשלום הזה את התשלום או את רכיב התשלום בתוספת שינויים ב-webhook
  • נבדקו תזרימי תשלום של Next.js לפני המסירה
  • הערות מסירה לחיתוך מבחן לחיים
  • תמיכה טכנית של 30 יום לאחר מסירה

לא במחיר התוספת

  • חשבון Stripe, מפתחות API ודמי עיבוד Stripe - אתה הבעלים של אלה
  • מסד נתונים חדש או CMS אם אין לך מקום לאחסון מצב הזמנה
  • Marketplace Connect, מוצרי חיוב מותאמים אישית, או החלפת רכישה בתוך האפליקציה, אלא אם התחום הוא עבודה מותאמת אישית

Pricing

שילוב Stripe עבור תמחור Next.js

מחיר זה מיועד לפלטפורמת Next.js בלבד. הוא אינו משתמש בתמחור תוספות של Django או Flutter.

שילוב Stripe עבור Next.js

הוסף תשלומי Stripe המוכנים לייצור לאפליקציית Next.js קיימת ושמור את קוד המקור.

דרישות

  • פרויקט Next.js קיים
  • גישה ל-Stripe Test Mode

$145

חד־פעמי

Next.js

צריך באקאנד?

  • קוד מקור מלא
  • ללא דמי רישיון
  • תמיכה ל־30 יום
  • אינטגרציה מלאה

תשלום מאובטח באמצעותstripe

מסירה ואבטחה

נוהלי מסירה ואבטחה של Next.js

משלוח משוער של Next.js

אינטגרציה טיפוסית של Next.js Stripe מתקיימת לאחר בדיקת התאימות של Next.js. ציר הזמן תלוי בממשק המשתמש הנוכחי של התשלום ב-Next.js ושכבת הנתונים.

נבדק ב-Next.js לפני המסירה

כרטיסים במצב בדיקה, 3-D Secure, נתיבים לביטול ודחיה מופעלים באפליקציית Next.js לפני שאנו מוסרים.

סודות הפס נשארים מחוץ לרכיבי לקוח Next.js

מפתחות סודיים פסים וסודות חתימת ה-webhook נשארים ב-server env. הדפדפן Next.js מקבל רק מפתח שניתן לפרסום וסודות לקוח קצרי מועד.

אימות Webhook עבור הזמנות Next.js

ה-Next.js webhook Route Handler מאמת חתימות Stripe לפני עדכון הזמנה או מצב זכאות.

אין תביעות אבטחה בלתי ניתנות לאימות של Next.js

אנחנו לא טוענים לאישור PCI, אפס הונאה או שיעורי אישור מובטחים. נתוני כרטיס Next.js נאספים באמצעות Stripe Checkout או Payment Element, ולא באמצעות טופס כרטיס מותאם אישית שאנו מאחסנים.

שאלות נפוצות

שאלות נפוצות

מה כוללת שילוב Stripe עבור Next.js?

שילוב Stripe עבור Next.js כולל Stripe.js, Checkout או Payment Element בדף התשלום הקיים שלך ב-Next.js, יצירת PaymentIntent או Checkout Session ב-Route Handlers, מטפל חתום ב-webhook, כיסוי בדיקה והערות מסירה. אתה מקבל את המקור Next.js בפרויקט שלך. עמלות Stripe וחשבון Stripe שלך ​​נפרדים.

האם תשלב את Stripe באפליקציית Next.js הקיימת שלנו?

כן. Stripe Integration for Next.js נבנה עבור פרויקט Next.js שכבר יש לך. אנו מתאימים את הקופה ואת נקודת הכניסה לתשלום למסלולי Next.js ולממשק המשתמש הנוכחיים שלך במקום לשלוח אפליקציית הדגמה נפרדת כתוצר.

האם שילוב Stripe for Next.js דורש שרת?

כן עבור נתיב Next.js Stripe הפקה. PaymentIntents, ביקורי Checkout והמפתח הסודי חייבים לחיות בשרת. הדפדפן Next.js מקבל רק מפתח בר פרסום וסוד לקוח. ייצוא Next.js סטטי בלבד לא יכול לארח את נתיב ה-webhook הזה.

באילו חבילות Stripe Integration עבור Next.js משתמש?

Stripe Integration עבור Next.js משתמש ב-Stripe.js הרשמי בלקוח וב-Stripe Node SDK ב-Next.js Route Handlers. אנחנו לא עוטפים את התשלום של Next.js בתוסף לא מתועד, אלא אם כן אתה דורש כזה במפורש.

האם שילוב Stripe for Next.js תומך ב-Apple Pay ו-Google Pay?

כן כאשר חשבון Stripe, אימות הדומיין והמכשירים שלך תומכים בהם. ב-Next.js, כפתורי ארנק הם היקף אופציונלי. כרטיס Checkout או Payment Element ב-Next.js נשאר ברירת המחדל של החזרה.

האם נתב Pages כלול ב-Stripe Integration עבור Next.js?

ברירת המחדל של שילוב Stripe עבור היקף Next.js הוא נתב אפליקציות. ניתן לכלול מסלולי API של נתב נתב אם זה מה שהמאגר שלך ב-Next.js כבר משתמש ואנחנו מסכימים לכך במהלך בדיקת התאימות של Next.js.

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

לקוח Next.js יכול לאשר PaymentIntent או להתחיל סשן צ'ק-אאוט דרך Stripe.js. מוצרי Stripe Billing, פורטל לקוחות והיגיון חשבוניות פעילים בשרת. ייתכן שעבודת Next.js עתירת המנויים תזדקק להצעת מחיר מותאמת אישית.

היכן נמצאים המפתחות הסודיים והניתנים לפרסום של Stripe באפליקציית Next.js?

הדפדפן Next.js משתמש רק במפתח הניתן לפרסום ב-Stripe. המפתח הסודי וחתימת ה-webhook נשארים במשתני סביבת שרת המשמשים את מטפלי המסלולים. שילוב Stripe עבור Next.js אינו מכניס מפתחות סודיים לרכיבי לקוח.

כיצד פועלים מצב בדיקת Stripe ומצב חי ב-Next.js?

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

כיצד Integration Stripe for Next.js מטפל ב-3-D Secure / SCA?

Stripe Checkout ו-Payment Element מטפלים ב-3D Secure דרך Stripe.js. הדף Next.js חייב לשמור על זרימת התשלום חיה עד ש-Stripe יחזיר סטטוס סופי; שילוב Stripe for Next.js חוט את המצבים הללו במפורש.

האם נדרשים Stripe webhooks עבור התשלום ב-Next.js?

כן למימוש לאחר Next.js Checkout או Payment Element. ממשק המשתמש של Next.js אינו מקור האמת. מטפל בנתיבים מאמת חתימות Stripe webhook ולאחר מכן מסמן את ההזמנה בתשלום, פותח תוכן או מודיע על מילוי.

האם נוכל לשמור על ממשק המשתמש הנוכחי שלנו לקופה של Next.js עם Stripe?

כן. שילוב Stripe עבור Next.js שומר בדרך כלל על המוצר, העגלה וכפתור התשלום של Next.js שלך ופותח את Checkout או מעלה את רכיב התשלום מאותה פעולה. טופס כרטיס Next.js מותאם אישית הנוגע בנתוני PAN גולמיים אינו ברירת המחדל מכיוון ש-Checkout או Payment Element הם נתיב ה-PCI הבטוח יותר.

האם המחיר של שילוב Stripe עבור Next.js כולל חשבון Stripe או עמלות?

לא. אתה יוצר והבעלים של חשבון Stripe, מפתחות API ודמי עיבוד Stripe. מחיר התוסף של Next.js הוא הטמעה בפרויקט Next.js שלך, לא רישיון תשלום של Bacodo.

האם שילוב Stripe עבור Next.js יחליף את הרכישה בתוך האפליקציה של אפל או גוגל?

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

האם נוכל להתאים אישית קבלות ומטא נתונים של Stripe ב-Next.js?

כן. מטא-נתונים של PaymentIntent או Checkout Session, רשומות לקוחות והשדות שאתה ממשיך לאחר אישור webhook מיושרים למודל ההזמנה הקיים של Next.js במהלך שילוב Stripe for Next.js.

איזו תמיכת Next.js כלולה לאחר מסירת Stripe?

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

כיצד מטופלים עדכוני Stripe.js או Stripe API ב-Next.js?

במהלך חלון 30 הימים אנו עוזרים עם שבירה באינטגרציה של Next.js שנמסרה הנגרמת על ידי שינוי Stripe או Stripe.js מתועד. שדרוגי חבילת Next.js מתמשכים לאחר מכן הם התחזוקה שלך, או תמיכה טכנית מורחבת אם אתה קונה אותה.

מה אם תשלומי Stripe נכשלים באפליקציית Next.js לייצור?

אנו מתעדים כיצד לקרוא את סטטוס PaymentIntent או Checkout Session, יומני Stripe Dashboard, ומשלוח webhook מנתיב התשלום Next.js. תמיכה של 30 יום כוללת דחיות של פתרון בעיות, ירידה ב-3D Secure ומפתחות שגויים בתצורה של זרימת Next.js שנמסרה.

אילו גרסאות Next.js תואמות ל-Stripe Integration עבור Next.js?

אנו מאשרים את גרסת Next.js, נתב האפליקציה או נתב Pages ואת זמן הריצה של Node מול Stripe SDK שאנו מצמידים בזמן האינטגרציה. זמני ריצה של Next.js ישנים יותר או בעלי מזלג כבד עשויים להזדקק להיקף נוסף.

מהי תמיכה של 30 יום לעומת תמיכה טכנית מורחבת של 6 חודשים עבור שילוב Stripe עבור Next.js?

30 יום לאחר מסירה כלולה עבור נתיב Next.js Stripe שנמסר. תמיכה טכנית מורחבת היא אופציונלית ב-20% ממחיר התוסף הזה של Next.js ומכסה שישה חודשים נוספים של עזרה טכנית באותה אינטגרציה של Next.js, לא בניית מוצר חדש.

שילוב Stripe עבור Next.js

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

$145