Stripe عبارة عن نظام أساسي لمعالجة الدفع يتيح لك إضافة صفحة دفع مسبقة الصنع إلى موقع ويب وقبول المدفوعات عبر الإنترنت وإدارتها. إنه شائع على نطاق واسع نظرًا لسهولة استخدامه ، والتوثيق الشامل ، ودعم المدفوعات المحلية ، وخيارات التخصيص والعلامة التجارية ، والاشتراكات ، والفواتير ، ومنع الاحتيال.
باستخدام Stripe ، يمكنك قبول المدفوعات من مجموعة متنوعة من المصادر ، بما في ذلك بطاقات الائتمان والخصم و Apple Pay و Google Pay.
إضافة Stripe Checkout إلى تطبيق Next.js
يمكنك دمج Stripe checkout مع التطبيقات التي تم إنشاؤها باستخدام تقنيات مختلفة بما في ذلك Next.js.
يفترض هذا البرنامج التعليمي أن لديك موقع التجارة الإلكترونية Next.js الذي تم إعداده ويوفر فقط دليلًا حول كيفية إضافة تسجيل الخروج Stripe إلى الموقع.
إعداد حساب Stripe واسترداد مفاتيح API
لاستخدام Stripe checkout ، تحتاج إلى إنشاء حساب Stripe والحصول على مفاتيح API. تتكون مفاتيح API من مفتاح قابل للنشر ومفتاح سري ، والذي ستستخدمه لمصادقة الطلبات من تطبيقك إلى Stripe API.
اتبع هذه الخطوات لإعداد حساب Stripe:
- اذهب إلى موقع Stripe وانقر على زر "تسجيل".
- أدخل بريدك الإلكتروني والاسم الكامل والبلد وكلمة المرور ، وانقر على زر "إنشاء حساب".
- تحقق من بريدك الإلكتروني باتباع الإرشادات الواردة في البريد الإلكتروني الذي سيرسله لك Stripe.
- في لوحة التحكم الشريطية ، انقر على "تنشيط المدفوعات" وأجب عن الأسئلة السريعة لإكمال عملية إعداد الحساب. قد تكون هذه الأسئلة حول اسم النشاط التجاري والعنوان والمعلومات المصرفية. لأغراض التطوير ، استخدم وضع الاختبار.
- انسخ مفاتيح API من علامة التبويب "Developers" إلى ملف env. في مجلد التطبيق الخاص بك.
ستتمكن الآن من الوصول إلى حساب Stripe باستخدام مفاتيح API.
تثبيت حزمة Stripe npm
قم بتشغيل هذا الأمر لتثبيت حزمة Stripe npm.
npm تثبيت شريط
قم باستيراد مكتبة Stripe إلى صفحة مكون السحب الخاصة بك.
يستورد شريط من'شريط';
في مجلد API ، قم بإنشاء ملف جديد يسمى ملف checkout-session.js. قم بتهيئة كائن Stripe باستخدام مفاتيح API التي استردتها من لوحة معلومات Stripe.
مقدار ثابت شريط = يتطلب('شريط') (process.env. STRIPE_SECRET_KEY) ،
في وظيفة المعالج ، احصل على العناصر المراد سحبها من معلمات الجسم.
يصدّرتقصيرغير متزامنوظيفةمعالج(مطلوب ، الدقة) {
مقدار ثابت {item} = req.body ؛
};
قم بإنشاء كائن جلسة السحب إلى وظيفة المعالج وتمرير العناصر.
مقدار ثابت جلسة = انتظر stripe.checkout.sessions.create ({
طرق_الدفع: ['بطاقة'],
line_items: [
غرض،
],
وضع: 'قسط',
نجاح_ URL: `$ {req.headers.origin}/?success=true`,
إلغاء_ URL: `$ {req.headers.origin}/?canceled=true`,
});
إليك ما تعنيه العقد التي تقوم بتمريرها إلى كائن الجلسة:
- طرق_الدفع: أنواع طرق الدفع التي تقبلها جلسة الخروج. تصفح قائمة طرق الدفع المتاحة في وثائق شريطية.
- line_items: قائمة العناصر التي يشتريها المستخدم.
- وضع: وضع جلسة الخروج. إذا تضمنت عناصر السحب عنصرًا متكررًا واحدًا على الأقل ، فقم بتمرير "اشتراك".
- نجاح_ URL: سيعيد URL Stripe توجيه المستخدمين في حالة نجاح الدفع
- إلغاء_ URL: سيعيد URL Stripe توجيه المستخدمين إذا قاموا بإلغاء الدفع.
يجب أن يبدو ملف checkout-session.js كالتالي:
يصدّرتقصيرغير متزامنوظيفةمعالج(مطلوب ، الدقة) {
لو (مطلوب طريقة 'بريد') {
مقدار ثابت {عربة} = req.body؛يحاول {
مقدار ثابت جلسة = انتظر stripe.checkout.sessions.create ({
line_items: [
عربة التسوق
],
وضع: 'قسط',
نجاح_ URL: `$ {req.headers.origin}/success`,
إلغاء_ URL: `$ {req.headers.origin}/cancele`,
});
res. إعادة التوجيه (303، session.url) ؛
} يمسك (يخطئ) {
res.status (err.statusCode || 500) .json (err.message) ؛
}
} آخر {
res.setHeader ('يسمح', 'بريد');
res.status (405).نهاية('الطريقة غير مسموحة');
}
}
تستخدم هذه الوظيفة الآن المحاولة / catch لإعادة توجيه المستخدمين عند حدوث خطأ أثناء الخروج. الآن بعد أن أنشأت مسار واجهة برمجة التطبيقات (API) الذي سيعالج الدفع ، فإن الخطوة التالية هي إنشاء مكون سداد للتعامل مع عملية السداد.
تحقق من هذه الوظيفة على إنشاء مسارات API في Next.js للحصول على شرح أكثر تفصيلاً لمسارات Next.js API.
إنشاء مكون الخروج
لمعالجة السحب ، تحتاج إلى تثبيت مكتبة @ stripe / stripe-js باستخدام NPM.
تثبيت npm @ stripe / stripe-js
تعد مكتبة @ stripe / stripe-js أداة مساعدة للتحميل ستساعدك في تحميل مثيل Stripe.js.
بمجرد انتهاء التثبيت ، قم بإنشاء ملف جديد في دليل / component الخاص بك باسم /components/checkout.js. ثم اتصل بوظيفة loadstripe من مكتبة @ stripe / stripe-js ، وقم بتمرير المفتاح القابل للنشر كوسيطة.
يستورد {loadStripe} من"@ شريط / شريط- js";
مقدار ثابت StripePromise = loadStripe (
عملية. env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
يُرجع loadstripe () وعدًا يتم حله باستخدام كائن Stripe تم إنشاؤه حديثًا بمجرد تحميل Stripe.js.
بعد ذلك ، أضف وظيفة لإنشاء جلسة سداد في المكون.
يصدّرتقصيروظيفةالدفع({عربة التسوق}) {
مقدار ثابت handleCheckout = غير متزامن () => {
يحاول {
مقدار ثابت شريط = انتظر وعدمقدار ثابت جلسة الدفع = انتظر axios.post ("/ api / checkout-session", {
عربة التسوق،
});مقدار ثابت النتيجة = انتظر stripe.redirectToCheckout ({
sessionId: checkoutSession.data.id ،
});
لو (خطأ نتيجة) {
تنبيه (result.error.message) ؛
}
} يمسك (خطأ) {
وحدة التحكم.log (خطأ) ؛
}
};
يعود (
</div>
);
}
تستخدم هذه الوظيفة Axios لاستدعاء API قمت بإنشائه في مجلد / api لاسترداد جلسة السحب.
أضف زر الخروج في بيان الإرجاع الذي سيؤدي إلى تشغيل وظيفة handleCheckout عند النقر عليه.
يمكنك استدعاء مكون الخروج على صفحة عربة التسوق.
معالجة عمليات إعادة التوجيه من Stripe
في مسار واجهة برمجة تطبيقات الخروج ، حددت عنوان URL ناجحًا وعنوان URL للإلغاء يجب على الشريط إعادة توجيه المستخدم عندما تنجح العملية أو تفشل. يتم تعيين عنوان URL للإلغاء على مسار / إلغاء ، بينما يتم تعيين عنوان URL الخاص بالنجاح على / مسار النجاح. أضف مكونين في المجلد / pages باسم Success وإلغاء للتعامل مع عناوين URL هذه.
في pages / Success.js ، أضف مكوِّن النجاح.
يصدّرتقصيروظيفةنجاح() {
يعود<شعبة>الخروج بنجاحشعبة>;
}
في pages / Cancel.js ، أضف مكون الإلغاء.
يصدّرتقصيروظيفةيلغي() {
يعود<شعبة>حدث خطأ أثناء الخروجشعبة>;
}الآن ، سيعيد Stripe التوجيه إلى أي من هذه الصفحات اعتمادًا على حالة الخروج.
إذا كنت تستخدم Next.js 13 ، فراجع هذا البرنامج التعليمي على كيف يعمل مجلد التطبيق في Next.js 13 للتبديل من مجلد / pages.
خيارات التخصيص الإضافية لصفحة الخروج
من لوحة معلومات Stripe ، يمكنك تخصيص صفحة الخروج لتتناسب مع مظهر علامتك التجارية. يمكنك إضافة شعار وأيقونة ولون العلامة التجارية ولون التمييز وحتى استخدام المجال المخصص الخاص بك. بالإضافة إلى ذلك ، عند إنشاء جلسة الدفع ، يمكنك إضافة طرق الدفع التي تفضلها وتحديد اللغة التي يجب أن يعرضها Stripe في صفحة الخروج. تتيح لك كل هذه الخيارات تخصيص عملية السداد بما يتناسب مع طلبك.
لماذا استخدام Stripe لصفحة الخروج؟
بينما يمكنك إنشاء خدمة معالجة السداد الخاصة بك ، فإن استخدام منصة دفع مثل Stripe عادة ما يكون خيارًا أفضل. يساعدك Stripe checkout على تقليل وقت التطوير ، مما يسمح لك ببدء قبول المدفوعات في غضون وقت قصير.
علاوة على ذلك ، يمكنك الحصول على ميزات إضافية مثل امتثال PCI ، واسترداد سلة التسوق ، وإمكانيات الخصم ، والقدرة على جمع معلومات الشحن وإرسال فواتير الدفع المسبق.
