- פרויקט React קיים
- גישה ל-Stripe Test Mode
- נדרש באקאנד לתשלומים מאובטחים
אין צורך בגישה למאגר. גישה לפרויקט נדרשת רק אם תרצו ש־Bacodo ישלב ישירות.
תוסף תגובה
שילוב Stripe עבור React
הוסף את Stripe.js, Payment Element ותשלום סודי לקוח ל-React SPA הקיים שלך מבלי לבנות אלמנטים, 3-D Secure וטעויות מפתח סודי מאפס. React לא מארח webhooks - ה-API שלך כן.
- קוד מקור מלא כלול ושלך לצמיתות
- אין צורך במפתח רישיון תוסף או ברישיון חוזר
- מוכן לייצור ונבדק
- משולב בפרויקט ובמחסנית React הקיימים שלך
- תמיכה טכנית של 30 יום לאחר מסירה כלולה
- תמיכה טכנית מורחבת ל-6 חודשים אופציונלית ב-20% ממחיר התוספת
החל מ
$145
USD · React
שילוב Stripe עבור React · React
קוד מקור מלאללא מפתח רישיוןמוכנה להפקהאינטגרציה נבדקהתמיכה למשך 30 יום
Requirements
What שילוב Stripe עבור React needs
מה זה עושה
רכיבי פס ב-React SPA שלך - ה-API עדיין מחזיק בסודות
Bacodo משלבת את Stripe בפרויקט React שכבר יש לך (Vite, CRA או דומה). לאחר המסירה, מקור ה-React מתגורר ב-repo שלך. המפתח הסודי וה-webhook נשארים ב-backend שאתה כבר מפעיל. אתה עדיין הבעלים של חשבון Stripe ועמלות Stripe.
בעיה שזה פותר
React SPA לא יכול ליצור בבטחה PaymentIntents או לאמת webhooks. הוא צריך Stripe.js, Elements או Checkout, ו-backend שמחזיר סוד לקוח. בניין שפצל לא נכון שולח את המפתח הסודי בחבילה.
איך זה נוחת בפרויקט
אנו מוסיפים את @stripe/react-stripe-js, מסך תשלום בעץ ה-React שלך, והאחזור קורא ל-API הקיים שלך כבר צריך עבור PaymentIntents. אימות Webhook מחובר באמצעות ה-API הזה, לא בתוך React.
למה זה חוסך זמן פיתוח
הצוות שלך מדלג על ההטמעה הראשונה של Stripe React: Elements, SCA, env עבור המפתח הניתן לפרסום, ומסירה שמתעדת כיצד React מדברת עם ה-API שלך.
למי זה מיועד
מפתחים וסוכנויות שכבר יש להם ממשק קצה של React ו-API, ורוצים נתיב Stripe בר תחזוקה מבלי להעביר את ה-SPA ל-Next.js.
יכולות עיקריות
מה כלול ב־שילוב Stripe עבור React
רכיב תשלום ב-React
Mount Stripe Payment Element עם @stripe/react-stripe-js במסלול התשלום שלך ב-React. נתוני הכרטיס נשארים ב-Stripe - לא במצב React אתה ממשיך.
React מביא את סודות הלקוח - לעולם לא את המפתח הסודי
אפליקציית React משתמשת רק במפתח הניתן לפרסום ובסוד לקוח קצר מועד מהממשק ה-API שלך. Stripe Integration for React לא מכניס STRIPE_SECRET_KEY ל-Vite או CRA env שנשלח לדפדפן.
Apple Pay ו-Google Pay ב-React Elements
הפעל ארנקים ב-Payment Element כאשר חשבון Stripe והדומיין שלך מאפשרים זאת. React fallback נשאר על רכיבי הכרטיס.
מצב בדיקה של תגובה ואז מפתח בר פרסום חי
תחילה שלח את ה-React SPA עם המפתח הניתן לפרסום של בדיקת Stripe. חיתוך חי הוא שינוי מקיף מתועד בתוספת הסוד החי התואם ב-API שלך.
הגשמה אינה מסלול תודה של React
מסך הצלחה של React אינו מקור האמת. ה-API שלך מאמת את ה-Stripe webhook, ואז אפליקציית React קוראת מצב בתשלום מאותו API.
תגובה לשגיאה ובטל מצבים
טפל בכרטיסים שנדחו, באלמנטים שבוטלו, בתקלות רשת וב-3-D Secure לא שלם כך שממשק המשתמש של React לא ישאיר את הלקוח על מסך מת.
מקרי שימוש
מתי שילוב Stripe עבור React מתאים
חלון ראווה קיים של React ב-Vite או CRA
כבר יש לך React SPA ו-API. אתה זקוק ל-Elements Checkout מבלי לשכתב את הקטלוג ב-Next.js.
סוכנות מוסרת ספא ללקוח React לייצור
אתה צריך נתיב Stripe הניתן לתחזוקה ב-React, מקור ב-Repo של הלקוח, וחתך מפתח חי מתועד במקום הדגמה של CodeSandbox.
מסך הגדרות SaaS ב-React
אפליקציית React אוספת אמצעי תשלום ראשון בזמן שהמנויים נשארים ב-API שלך וב-Stripe Billing אם אתה כבר משתמש בהם.
ממשק קצה, Django או Node API כבר קיים
שילוב Stripe for React הוא הצד של SPA. אם אתה גם צריך את ה-API בנוי, זה מוגדר בנפרד - המחיר הזה אינו קצה עורפי חדש.
דמו
תצוגה מקדימה של זרימת React Stripe Elements
הצג תצוגה מקדימה של נתיב התשלום ב-React: פעולת תשלום, רכיב תשלום, אישור ומצבי כשל. ארגז חול חי כנגד חשבון Stripe שלך זמין לאחר בדיקת תאימות. דף זה אינו מעבד חיובים אמיתיים.
איך זה עובד
כיצד מועברת שילוב Stripe for React
זרימת עבודה סטנדרטית של תוסף Bacodo, עם בדיקות ספציפיות ל-React עבור Vite/CRA, React Router וה-API שה-SPA כבר קורא לו.
01
בחר React Stripe
אשר את שילוב Stripe עבור React ושיש לך (או תגדיר) ממשק API שיכול ליצור PaymentIntents.
02
תגובה לבדיקת תאימות
סקור את גרסת ה-React, את המצרף, את ממשק המשתמש הקיים בקופה ואת שפת הקצה האחורי שה-SPA כבר משתמש בו.
03
השתלב ב-React
הוסף את Stripe.js, Elements, רכיבי תשלום וחוזה האחזור לנקודת הקצה שלך ב-PaymentIntent.
04
הגדר את אפליקציית React
העבר את המפתח הניתן לפרסום באמצעות Vite/CRA public env. מפתח סודי ו-webhook נשארים ב-API.
05
בדוק את נתיב התשלום של React
הפעל כרטיסי בדיקת Stripe, 3-D Secure, בטל/דחה, ואשר את מצב עדכוני ה-API webhook שהאפליקציה React קוראת.
06
מסירת מקור ה-React
שלח מקור React, הערות Env ורשימת בדיקה חיה. היישום של React הוא שלך לתחזוקה.
ארכיטקטורה
איך Stripe מתחבר לפרויקט React
חבילת React אף פעם לא מחזיקה את המפתח הסודי. Elements משתמש בסוד לקוח מהממשק ה-API שלך. Stripe מודיע על ה-API הזה באמצעות webhook. React ואז קורא את מצב ההזמנה.
React SPAStripe.js / Elementsה-API שלךStripe PaymentIntentsWebhook → APIReact קורא מצב בתשלום
טכנולוגיות נתמכות
מה שילוב Stripe עבור React באמת משתמש
React SPA
Current React on Vite, CRA או חבילת ספא דומה. זה לא נחיתת נתב Next.js App - ראה שילוב Stripe עבור Next.js עבור ערימה זו.
@stripe/react-stripe-js ו-Stripe.js
כריכות רשמיות של Stripe React עבור רכיב תשלום וארנקים.
ה-API הקיים שלך
PaymentIntent יצירה ואימות webhook בקצה העורפי שאפליקציית React כבר מתקשרת. תוסף זה אינו מחליף את ה-API הזה בשירות Bacodo בלבד.
חשבון Stripe עבור אפליקציית React
חשבון ה-Stripe שלך, מפתחות בדיקה ומפתחות חיים, נקודת קצה של webhook ב-API ואירועי Dashboard.
פיצול אירוח נדרש
ה-React SPA יכול להיות סטטי. ה-webhook לא יכול. מארח סטטי בלבד ללא API לא יכול להשלים את נתיב התשלום הזה.
מה כלול
מה כוללת שילוב Stripe for React
- שילוב בפרויקט React הקיים
- קוד מקור מלא במאגר שלך
- רכיבי קובץ מקיף וניתן לפרסום
- אחזר חוזה ל-PaymentIntent API שלך
- נבדקו תזרימי תשלום של React לפני מסירה
- הערות מסירה לחיתוך מבחן לחיים
- תמיכה טכנית של 30 יום לאחר מסירה
לא במחיר התוספת
- חשבון Stripe, מפתחות API ודמי עיבוד Stripe - אתה הבעלים של אלה
- קצה אחורי חדש אם אין לך API שיכול ליצור PaymentIntents
- העברה מ-React ל-Next.js
- Marketplace Connect או חיוב מותאם אישית, אלא אם הוגדר כעבודה מותאמת אישית
Pricing
שילוב Stripe לתמחור React
מחיר זה מיועד לפלטפורמת React SPA בלבד. הוא אינו משתמש בתמחור התוספות Next.js, Django, Flutter או React Native.
שילוב Stripe עבור React
הוסף תשלומי Stripe המוכנים לייצור ל-React SPA קיים ושמור את קוד המקור.
דרישות
- פרויקט React קיים
- גישה ל-Stripe Test Mode
- נדרש באקאנד לתשלומים מאובטחים
$145
חד־פעמיReact
צריך באקאנד?
- קוד מקור מלא
- ללא דמי רישיון
- תמיכה ל־30 יום
- אינטגרציה מלאה
תשלום מאובטח באמצעותstripe
מסירה ואבטחה
נהלי מסירה ואבטחה תגובה
משלוח משוער של React
בדיקת React Stripe טיפוסית נמדדת לאחר בדיקת התאימות של React. ציר הזמן תלוי בממשק המשתמש הנוכחי שלך ב-React Checkout וב-API.
נבדק ב-React לפני המסירה
כרטיסי מצב בדיקה, מסלולי 3D Secure, ביטול ודחיה מופעלים ב-React SPA לפני שאנו מוסרים.
סודות הפסים נשארים מחוץ לצרור React
רק המפתח הניתן לפרסום הוא ציבורי. מפתחות סודיים וסודות webhook נשארים בשרת שאפליקציית React קוראת לו.
אימות Webhook נמצא ב-API, לא ב-React
React לא מאמת את חתימת ה-Stripe-Signature. ה-API שלך עושה זאת, ואז React קורא את התוצאה.
אין טענות אבטחה בלתי ניתנות לאימות של React
אנחנו לא טוענים לאישור PCI או לאפס הונאה. React אוספת כרטיסים דרך Stripe Elements, לא טופס כרטיס מותאם אישית שאנו מאחסנים.
שאלות נפוצות
שאלות נפוצות
מה כוללת שילוב Stripe for React?
שילוב Stripe for React כולל Stripe.js, רכיב תשלום במסך התשלום הקיים שלך ב-React, חוזה האחזור ל-PaymentIntent API שלך, כיסוי בדיקה והערות מסירה. אתה מקבל את מקור ה-React בפרויקט שלך. עמלות Stripe, חשבון Stripe שלך ובניית קצה אחורי חדש נפרדים.
האם תשלב את Stripe באפליקציית React הקיימת שלנו?
כן. שילוב Stripe for React נבנה עבור React SPA שכבר יש לך (Vite, CRA או דומה). אנו מתאימים את אלמנט התשלום ונקודת הכניסה לתשלום למסלולי React ולממשק המשתמש הנוכחיים שלך במקום לשלוח אפליקציית הדגמה נפרדת כתוצר.
האם אינטגרציית Stripe for React דורשת קצה אחורי?
כן עבור מסלול הפקה של React Stripe. PaymentIntents, המפתח הסודי ואימות ה-webhook חייבים לחיות בשרת. דפדפן React מקבל רק מפתח בר פרסום וסוד לקוח. מארח React סטטי בלבד לא יכול להשלים את נתיב התשלום הזה.
באילו חבילות Stripe משתמשת Stripe Integration for React?
שילוב Stripe for React משתמש ב-Stripe.js הרשמי וב-@stripe/react-stripe-js עבור רכיב תשלום וארנקים. אנחנו לא עוטפים את React checkout בתוסף לא מתועד, אלא אם כן אתה דורש אחד מפורשות.
האם אינטגרציית Stripe for React תומכת ב- Apple Pay ו- Google Pay?
כן כאשר חשבון Stripe, אימות הדומיין והמכשירים שלך תומכים בהם. ב-React, כפתורי ארנק הם היקף אופציונלי. רכיב התשלום בכרטיס ב-React נשאר ברירת המחדל של החזרה.
האם Next.js כלול ב-Stripe Integration for React?
לא. שילוב Stripe for React הוא נתיב SPA. נתב אפליקציית Next.js ומטפלי מסלולים הם שילוב Stripe עבור Next.js. אנחנו לא מעבירים React SPA ל-Next.js בתוך מחיר התוספת של React.
האם אינטגרציית Stripe for React יכולה לגבות תשלומי מנוי?
לקוח React יכול לאשר PaymentIntent או לאסוף אמצעי תשלום דרך Stripe.js. מוצרי Stripe Billing, פורטל לקוחות והיגיון חשבוניות פעילים ב-API שלך. עבודת React עתירת מנויים עשויה להזדקק להצעת מחיר מותאמת אישית.
היכן נמצאים מפתחות סודיים והניתנים לפרסום של Stripe באפליקציית React?
דפדפן React משתמש רק במפתח הניתן לפרסום של Stripe דרך Vite או CRA public env. המפתח הסודי וחתימת ה-webhook נשארים ב-API שלך. Integration Stripe for React לא מכניס מפתחות סודיים לחבילת React.
כיצד פועלים מצב בדיקת Stripe ומצב חי ב-React?
אנו מיישמים תחילה אינטגרציה של Stripe עבור React נגד מפתחות בדיקה וכרטיסי בדיקה של Stripe. העלייה לאוויר היא שינוי מפתח בר-פרסום מתועד ב-React בתוספת הסוד החי וה-webhook התואמים ב-API שלך, לא הפעלת רישיון תוסף.
כיצד Integration Stripe for React מטפל ב-3-D Secure / SCA?
Stripe Payment Element מטפל ב-3D Secure דרך Stripe.js. דף React חייב לשמור על זרימת התשלום חיה עד ש-Stripe יחזיר סטטוס סופי; שילוב Stripe for React חוט את המצבים הללו במפורש.
האם יש צורך ב-Stripe webhooks לתשלום ב-React?
כן למימוש לאחר React Payment Element. ממשק המשתמש של React אינו מקור האמת. ה-API שלך מאמת את חתימות Stripe webhook ולאחר מכן מסמן את ההזמנה בתשלום, פותח תוכן או מודיע על מילוי. React ואז קורא את המצב הזה.
האם נוכל לשמור על ממשק המשתמש הנוכחי שלנו ב-React Checkout עם Stripe?
כן. שילוב Stripe for React שומר בדרך כלל על מוצר React, העגלה וכפתור התשלום ומעלה את רכיב התשלום מהפעולה הזו. טופס כרטיס React מותאם אישית שנוגע בנתוני PAN גולמיים הוא מחוץ לטווח ברירת המחדל מכיוון ש-Payment Element הוא נתיב ה-PCI הבטוח יותר.
האם המחיר של שילוב Stripe עבור React כולל חשבון Stripe או עמלות?
לא. אתה יוצר והבעלים של חשבון Stripe, מפתחות API ודמי עיבוד Stripe. מחיר התוסף של React הוא הטמעה בפרויקט React שלך, לא רישיון תשלום של Bacodo.
האם אינטגרציית Stripe for React תחליף את הרכישה בתוך האפליקציה של אפל או גוגל?
לא. מוצרים דיגיטליים הנמכרים בחנות אפליקציות עדיין דורשים IAP. שילוב Stripe for React מיועד ל-Stripe ב-Stripe באתר React או SPA שבו Stripe הוא נתיב תשלום מותר לסוג המוצר שלך.
האם נוכל להתאים אישית קבלות ומטא נתונים של Stripe ב-React?
כן. מטא-נתונים של PaymentIntent, רשומות לקוחות והשדות שאתה ממשיך לאחר אישור webhook מיושרים למודל ההזמנה הקיים שלך במהלך Integration Stripe for React. אפליקציית React מציגה רק את מה שה-API שלך מחזיר.
איזו תמיכת React כלולה לאחר מסירת Stripe?
מקור ה-React נמצא ב-repo שלך, כך שהצוות שלך יכול לתחזק אותו. התמיכה הכלולה למשך 30 יום מכסה שאלות טכניות ופגמים בהיקף ה-Stripe Integration for React שסופק, ולא עבודת תכונות React שאינה קשורה.
כיצד מטופלים עדכוני Stripe.js או Stripe API ב-React?
במהלך חלון 30 הימים אנו עוזרים עם שבירה באינטגרציה של React שנמסרה הנגרמת על ידי שינוי Stripe או Stripe.js מתועד. שדרוגי חבילת React מתמשכים לאחר מכן הם התחזוקה שלך, או תמיכה טכנית מורחבת אם אתה קונה את זה.
מה אם תשלומי Stripe נכשלים באפליקציית React לייצור?
אנו מתעדים כיצד לקרוא את סטטוס PaymentIntent, יומני Stripe Dashboard, ומשלוח חיבור לאינטרנט מנתיב התשלום של React. תמיכה של 30 יום כוללת דחיות בפתרון בעיות, ירידה ב-3D Secure ומפתחות שגויים בתצורה של זרימת React שנמסרה.
אילו גרסאות React מתאימות ל-Stripe Integration for React?
אנו מאשרים את גרסת ה-React, ה-Bundler שלך (Vite, CRA או דומה), ואת ה-API שה-SPA כבר קורא כנגד מהדורת Stripe.js שאנו מצמידים בזמן האינטגרציה. זמני ריצה ישנים יותר או בעלי מזלג כבד עשויים להזדקק להיקף נוסף.
מהי תמיכה של 30 יום לעומת תמיכה טכנית מורחבת של 6 חודשים עבור שילוב Stripe for React?
30 יום לאחר מסירה כלולה עבור נתיב ה-React Stripe שנמסר. תמיכה טכנית מורחבת היא אופציונלית ב-20% ממחיר התוסף הזה של React ומכסה שישה חודשים נוספים של עזרה טכנית באותה אינטגרציה של React, לא בניית מוצר חדש.
שילוב Stripe עבור React
הוסף תשלומי Stripe המוכנים לייצור ל-React SPA הקיים שלך, שמור את קוד המקור ושמור סודות ב-API שלך.
$145