आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

स्ट्राइप एक पेमेंट प्रोसेसिंग प्लेटफॉर्म है जो आपको वेबसाइट पर प्री-बिल्ट चेकआउट पेज जोड़ने और ऑनलाइन भुगतान स्वीकार करने और प्रबंधित करने की अनुमति देता है। यह अपने उपयोग में आसानी, व्यापक प्रलेखन, स्थानीय भुगतानों के लिए समर्थन, अनुकूलन और ब्रांडिंग विकल्प, सदस्यता, चालान-प्रक्रिया और धोखाधड़ी की रोकथाम के कारण व्यापक रूप से लोकप्रिय है।

स्ट्राइप का उपयोग करके, आप क्रेडिट और डेबिट कार्ड, ऐप्पल पे और गूगल पे सहित विभिन्न स्रोतों से भुगतान स्वीकार कर सकते हैं।

Next.js एप्लिकेशन में स्ट्राइप चेकआउट जोड़ना

आप स्ट्राइप चेकआउट को नेक्स्ट.जेएस सहित विभिन्न तकनीकों के साथ बनाए गए एप्लिकेशन के साथ एकीकृत कर सकते हैं।

यह ट्यूटोरियल मानता है कि आपके पास एक Next.js ई-कॉमर्स साइट सेट अप है और साइट पर स्ट्राइप चेकआउट जोड़ने के बारे में केवल एक गाइड प्रदान करता है।

स्ट्राइप खाता सेट अप करना और API कुंजियाँ प्राप्त करना

स्ट्राइप चेकआउट का उपयोग करने के लिए, आपको एक स्ट्राइप खाता बनाना होगा और एपीआई कुंजियाँ प्राप्त करनी होंगी। एपीआई कुंजियों में एक प्रकाशन योग्य कुंजी और एक गुप्त कुंजी होती है, जिसका उपयोग आप अपने एप्लिकेशन से स्ट्राइप एपीआई के अनुरोधों को प्रमाणित करने के लिए करेंगे।

instagram viewer

स्ट्राइप अकाउंट सेट करने के लिए इन चरणों का पालन करें:

  1. पर जाएँ धारी वेबसाइट और "साइन अप" बटन पर क्लिक करें।
  2. अपना ईमेल, पूरा नाम, देश और पासवर्ड दर्ज करें और "खाता बनाएं" बटन पर क्लिक करें।
  3. ईमेल स्ट्राइप द्वारा आपको भेजे जाने वाले निर्देशों का पालन करके अपना ईमेल सत्यापित करें।
  4. धारीदार डैशबोर्ड पर, "भुगतान सक्रिय करें" पर क्लिक करें और खाता सेटअप प्रक्रिया को पूरा करने के लिए शीघ्र प्रश्नों का उत्तर दें। ये प्रश्न व्यवसाय के नाम, पते और बैंक की जानकारी के बारे में हो सकते हैं। विकास उद्देश्यों के लिए, परीक्षण मोड का उपयोग करें।
  5. अपने ऐप फ़ोल्डर में "डेवलपर्स" टैब से .env फ़ाइल में API कुंजियों को कॉपी करें।

अब आप एपीआई कुंजियों का उपयोग करके स्ट्राइप खाते तक पहुंच सकेंगे।

स्ट्राइप एनपीएम पैकेज स्थापित करना

स्ट्राइप एनपीएम पैकेज को स्थापित करने के लिए इस कमांड को चलाएँ।

एनपीएम स्थापित पट्टी

स्ट्राइप लाइब्रेरी को अपने चेकआउट घटक पृष्ठ में आयात करें।

आयात पट्टी से'पट्टी';

एपीआई फ़ोल्डर में, checkout-session.js फ़ाइल नामक एक नई फ़ाइल बनाएँ। आपके द्वारा अपने स्ट्राइप डैशबोर्ड से प्राप्त की गई API कुंजियों के साथ स्ट्राइप ऑब्जेक्ट को इनिशियलाइज़ करें।

कॉन्स्ट पट्टी = ज़रूरत होना('पट्टी')(प्रक्रिया.env. STRIPE_SECRET_KEY);

हैंडलर फ़ंक्शन में, बॉडी पैरामीटर से चेक आउट करने के लिए आइटम प्राप्त करें।

निर्यातगलती करनाasyncसमारोहहैंडलर(अनुरोध, Res) {
कॉन्स्ट {आइटम} = अनुरोध शरीर;
};

हैंडलर फ़ंक्शन में चेकआउट सत्र ऑब्जेक्ट बनाएं और आइटम पास करें।

कॉन्स्ट सत्र = इंतजार स्ट्राइप.चेकआउट.सेशन.क्रिएट ({
 payment_method_types: ['कार्ड'],
 लाइन आइटम: [
 वस्तु,
 ],
 तरीका: 'भुगतान',
 Success_url: `${req.headers.origin}/?success=true`,
 रद्द_यूआरएल: `${req.headers.origin}/?canceled=true`,
});

सत्र ऑब्जेक्ट में आप जो नोड्स पास कर रहे हैं उसका अर्थ यहां दिया गया है:

  • payment_method_types: भुगतान विधि प्रकार चेकआउट सत्र स्वीकार करता है। में उपलब्ध भुगतान विधियों की सूची ब्राउज़ करें धारीदार दस्तावेज.
  • लाइन आइटम: उपयोगकर्ता द्वारा खरीदे जाने वाले आइटम की सूची.
  • तरीका: चेकआउट सत्र का तरीका। यदि चेकआउट आइटम में कम से कम एक आवर्ती आइटम पास "सदस्यता" शामिल है।
  • Success_url: भुगतान सफल होने पर URL स्ट्राइप उपयोगकर्ताओं को पुनर्निर्देशित करेगा
  • रद्द_यूआरएल: यदि उपयोगकर्ता भुगतान रद्द करते हैं तो URL स्ट्राइप उपयोगकर्ताओं को पुनर्निर्देशित करेगा।

कुल मिलाकर, checkout-session.js फ़ाइल इस तरह दिखनी चाहिए:

निर्यातगलती करनाasyncसमारोहहैंडलर(अनुरोध, Res) {
अगर (अनुरोध विधि 'डाक') {
कॉन्स्ट {गाड़ी} = अनुरोध शरीर;
कोशिश {
कॉन्स्ट सत्र = इंतजार स्ट्राइप.चेकआउट.सेशन.क्रिएट ({
 लाइन आइटम: [
 कार्ट
 ],
 तरीका: 'भुगतान',
 Success_url: `${req.headers.origin}/success`,
 रद्द_यूआरएल: `${req.headers.origin}/cancele`,
 });
 रेस.रीडायरेक्ट (303, सत्र.यूआरएल);
 } पकड़ना (गलती) {
 res.status (err.statusCode || 500.json (err.message);
 }
 } अन्य {
 res.setHeader('अनुमति देना', 'डाक');
 res.status (405)।अंत('विधि अनुमत नहीं');
 }
}

चेकआउट के दौरान त्रुटि होने पर यह फ़ंक्शन अब उपयोगकर्ताओं को रीडायरेक्ट करने के लिए कोशिश/पकड़ का उपयोग करता है। अब जब आपने एपीआई मार्ग बना लिया है जो भुगतान को संसाधित करेगा, तो अगला कदम चेकआउट प्रक्रिया को संभालने के लिए एक चेकआउट घटक बनाना है।

इस पोस्ट को देखें Next.js में API रूट बनाना Next.js API मार्गों की अधिक गहन व्याख्या के लिए।

एक चेकआउट घटक बनाना

चेकआउट को संसाधित करने के लिए, आपको NPM का उपयोग करके @stripe/stripe-js लाइब्रेरी स्थापित करने की आवश्यकता है।

एनपीएम इंस्टॉल @ स्ट्राइप/स्ट्राइप-जेएस

@stripe/stripe-js लाइब्रेरी एक लोडिंग यूटिलिटी है जो आपको Stripe.js उदाहरण लोड करने में मदद करेगी।

एक बार स्थापना समाप्त हो जाने पर, अपनी /components निर्देशिका में /components/checkout.js नामक एक नई फ़ाइल बनाएँ। फिर @stripe/stripe-js लाइब्रेरी से लोडस्ट्रिप फ़ंक्शन को कॉल करें, प्रकाशित करने योग्य कुंजी को तर्क के रूप में पास करें।

आयात {लोडस्ट्राइप} से'@धारी/पट्टी-js';
कॉन्स्ट स्ट्राइपप्रोमिस = लोडस्ट्राइप (
 प्रक्रिया.env। NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

लोडस्ट्राइप () एक वादा देता है जो स्ट्राइप.जेएस के लोड होने के बाद एक नए बनाए गए स्ट्राइप ऑब्जेक्ट के साथ हल हो जाता है।

अगला, घटक में चेकआउट सत्र बनाने के लिए एक फ़ंक्शन जोड़ें।

निर्यातगलती करनासमारोहचेक आउट({गाड़ी}) {
कॉन्स्ट हैंडलचेकआउट = async () => {
कोशिश {
कॉन्स्ट पट्टी = इंतजार धारीवाद;
कॉन्स्ट चेकआउट सत्र = इंतजार axios.post ("/एपीआई/चेकआउट-सत्र", {
 गाड़ी,
 });


कॉन्स्ट परिणाम = इंतजार स्ट्राइप.रीडायरेक्ट टू चेकआउट ({
 sessionId: checkoutSession.data.id,
 });
अगर (परिणाम त्रुटि) {
 चेतावनी (result.error.message);
 }
 } पकड़ना (गलती) {
सांत्वना देनालॉग (त्रुटि);
 }
 };
वापस करना (


 </div>
 );
}

यह फ़ंक्शन उपयोग करता है Axios एपीआई कॉल करने के लिए आपने चेकआउट सत्र को पुनः प्राप्त करने के लिए /api फ़ोल्डर में बनाया है।

रिटर्न स्टेटमेंट में एक चेकआउट बटन जोड़ें जो क्लिक करने पर हैंडलचेकआउट फ़ंक्शन को ट्रिगर करेगा।

आप कार्ट पेज पर चेकआउट घटक को कॉल कर सकते हैं।

स्ट्राइप से रीडायरेक्ट को हैंडल करना

चेकआउट एपीआई मार्ग में, आपने एक सफल URL और एक रद्द URL परिभाषित किया है जो प्रक्रिया के सफल होने या विफल होने पर उपयोगकर्ता को रीडायरेक्ट करना चाहिए। रद्द URL /cancel रूट पर मैप करता है, जबकि सक्सेस URL /सफलता रूट पर मैप करता है। इन URL को प्रबंधित करने के लिए /pages फ़ोल्डर में दो घटक जोड़ें जिसका नाम Success और Cancel है।

पृष्ठों/सफलता.जेएस में, सफलता घटक जोड़ें।

निर्यातगलती करनासमारोहसफलता() {
वापस करना<डिव>सफलतापूर्वक चेकआउट करेंडिव>;
}

पेज/कैंसल.जेएस में, कैंसल कंपोनेंट जोड़ें।

निर्यातगलती करनासमारोहरद्द करना() {
वापस करना<डिव>चेकआउट के दौरान एक त्रुटि हुईडिव>;
}

अब, चेकआउट स्थिति के आधार पर स्ट्राइप इनमें से किसी भी पेज पर रीडायरेक्ट करेगा।

यदि आप Next.js 13 का उपयोग कर रहे हैं, तो इस ट्यूटोरियल को देखें ऐप फ़ोल्डर Next.js 13 में कैसे काम करता है /pages फ़ोल्डर से स्विच करने के लिए।

चेकआउट पृष्ठ के लिए अतिरिक्त अनुकूलन विकल्प

स्ट्राइप डैशबोर्ड से, आप अपने ब्रांड के लुक से मेल खाने के लिए चेकआउट पेज को कस्टमाइज़ कर सकते हैं। आप एक लोगो, आइकन, ब्रांड रंग, एक्सेंट रंग जोड़ सकते हैं और यहां तक ​​कि अपने स्वयं के कस्टम डोमेन का उपयोग भी कर सकते हैं। इसके अतिरिक्त, चेकआउट सत्र बनाते समय, आप अपनी पसंद की भुगतान विधियों को जोड़ सकते हैं और यह भी निर्दिष्ट कर सकते हैं कि भाषा स्ट्राइप को चेकआउट पृष्ठ पर प्रदर्शित होना चाहिए। ये सभी विकल्प आपको अपने आवेदन के अनुरूप चेकआउट प्रक्रिया को अनुकूलित करने की अनुमति देते हैं।

चेकआउट पृष्ठ के लिए स्ट्राइप का उपयोग क्यों करें?

जब आप अपनी स्वयं की चेकआउट प्रोसेसिंग सेवा बना सकते हैं, तो स्ट्राइप जैसे भुगतान प्लेटफ़ॉर्म का उपयोग करना आमतौर पर एक बेहतर विकल्प होता है। स्ट्राइप चेकआउट आपको विकास के समय को कम करने में मदद करता है, जिससे आप कम समय में भुगतान स्वीकार करना शुरू कर सकते हैं।

इसके अलावा, आपको PCI अनुपालन, कार्ट रिकवरी, छूट क्षमता और शिपिंग जानकारी एकत्र करने और पोस्ट-पेमेंट चालान भेजने की क्षमता जैसी अतिरिक्त सुविधाएं मिलती हैं।