रिएक्ट एप्लिकेशन में पेपाल चेकआउट को कैसे एकीकृत करें

ई-कॉमर्स स्पेस में, डिजिटल भुगतान समाधानों ने आसानी से सीमा पार भुगतान को सक्षम और संसाधित करके राजस्व में उल्लेखनीय वृद्धि और व्यवसायों के समग्र विकास में योगदान दिया है।

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

पेपाल को अपने रिएक्ट एप्लिकेशन में एकीकृत करने का तरीका जानने के लिए आगे पढ़ें।

एक पेपैल सैंडबॉक्स खाता सेट अप करें

पेपाल सैंडबॉक्स पेपाल द्वारा प्रदान किया गया एक परीक्षण वातावरण है ताकि आप अपने अनुप्रयोगों के भीतर भुगतान एकीकरण का परीक्षण कर सकें। यह एक सिम्युलेटेड वातावरण प्रदान करता है जिसमें पेपाल के लाइव उत्पादन वातावरण में पाई जाने वाली सभी भुगतान सुविधाएँ शामिल हैं।

सीधे शब्दों में, सैंडबॉक्स वास्तविक धन की आवश्यकता के बिना भुगतान एकीकरण का परीक्षण करने के लिए एक मंच प्रदान करता है।

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

सैंडबॉक्स खाता बनाने के लिए, पर जाएँ पेपैल डेवलपर कंसोल और अपने पेपैल खाते के प्रमाण-पत्रों के साथ साइन इन करें। अगला, डेवलपर डैशबोर्ड पर, पर क्लिक करें सैंडबॉक्स खाते बटन।

अपने रिएक्ट एप्लिकेशन से पेपाल लेनदेन को संसाधित करने के लिए, आपको दो सैंडबॉक्स खातों की आवश्यकता होगी: एक व्यवसाय खाता और एक व्यक्तिगत खाता। ये दो खाते आपको एक ग्राहक के दृष्टिकोण और एक व्यापारी (व्यवसाय) के दृष्टिकोण से एक पूर्ण लेन-देन का अनुकरण करने में मदद करेंगे।

दोनों दृष्टिकोणों से आपके आवेदन पर भुगतान एकीकरण की कार्यक्षमता का परीक्षण करना महत्वपूर्ण है।

पर क्लिक करें खाता बनाएं दो खाते सेट करने के लिए बटन।

खाता सेटिंग पृष्ठ पर, प्रत्येक प्रकार के खाते में से एक बनाएँ: व्यक्तिगत, फिर व्यावसायिक। साइन इन करने के लिए आप व्यक्तिगत खाता क्रेडेंशियल्स का उपयोग करेंगे पेपैल का सैंडबॉक्स व्यक्तिगत खाता. दूसरी ओर, आप पेपैल की क्लाइंट आईडी प्राप्त करने के लिए डेवलपर कंसोल पर एक प्रोजेक्ट बनाने के लिए व्यावसायिक खाते के क्रेडेंशियल्स का उपयोग करेंगे।

वैकल्पिक रूप से, नए खाते बनाने के बजाय, आप भुगतान एकीकरण का परीक्षण करने के लिए पेपाल द्वारा प्रदान किए गए डिफ़ॉल्ट सैंडबॉक्स खातों का उपयोग कर सकते हैं।

एक पेपैल परियोजना बनाएँ

डेवलपर डैशबोर्ड पेज पर, पर क्लिक करें ऐप्स और क्रेडेंशियल्स बटन और क्लिक करें ऐप बनाएं पेपैल परियोजना स्थापित करने के लिए बटन। अगला, अपने आवेदन का नाम भरें, चुनें व्यापारी खाते के प्रकार के रूप में, और आपके द्वारा प्रारंभ में बनाए गए व्यवसाय खाते के लिए क्रेडेंशियल्स का चयन करें।

अंत में, ऐप की क्लाइंट आईडी कॉपी करें।

रिएक्ट क्लाइंट सेट करें

एक रिएक्ट एप्लिकेशन बनाएं, खोलें सार्वजनिक/index.html फ़ाइल, और अपनी क्लाइंट आईडी को नीचे दिखाए गए प्रारूप में हेड एलिमेंट सेक्शन में जोड़ें।

<लिखी हुई कहानीस्रोत=" https://www.paypal.com/sdk/js? क्लाइंट-आईडी = आपका-क्लाइंट-आईडी और मुद्रा = यूएसडी">लिखी हुई कहानी>

स्क्रिप्ट टैग पेपाल जावास्क्रिप्ट एसडीके को लोड करता है, एक पुस्तकालय जो पेपाल के एपीआई के साथ बातचीत करने के लिए क्लाइंट-साइड कार्यक्षमता प्रदान करता है, और इसे रिएक्ट घटकों में उपयोग के लिए उपलब्ध कराता है।

एसडीके के कार्यों का उपयोग करके, आप एक पेपैल भुगतान बटन बना सकते हैं जो भुगतान प्रवाह को संभालता है पेपाल को भुगतान विवरण भेजना, भुगतान को अधिकृत करना और भुगतान को संभालना शामिल है जवाब।

एक उत्पाद घटक बनाएँ

/Src निर्देशिका में, एक नया घटक फ़ोल्डर बनाएँ, और दो फ़ाइलें जोड़ें: Product.js और PayPalCheckout.js।

Product.js फ़ाइल खोलें और नीचे कोड जोड़ें:

आयात प्रतिक्रिया, {useState} से"प्रतिक्रिया";
आयात"./product.style.css";
आयात"../assests/laptop.jpg";
समारोहअनुप्रयोग() {
वापस करना (
"उत्पाद-कंटेनर">
"उत्पाद सामग्री">
"उत्पाद"> 
ज़रूरत होना("../assests/laptop.jpg")} ऑल्ट ="लैपटॉप" />
 </div>
"उतरना">
 मैकबुक प्रो</h2>



 लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटुर एडिपिसिसिंग एलीट।
 मैक्सिम मोलिटिया, मोलेस्टिया क्वास वेल सिंट कमोडी रिपुडिंडे
 परिणाम।
 </p>

मूल्य: $350.00</h3>
 </div>
 </header>
 </div>
 );
}


निर्यातगलती करना अनुप्रयोग;

यह कोड एक साधारण उत्पाद घटक प्रस्तुत करता है।

पेपैल चेकआउट घटक बनाएँ

निम्नलिखित कोड को PayPalCheckout.js फ़ाइल में जोड़ें:

आयात प्रतिक्रिया, {useRef, useEffect, useState} से"प्रतिक्रिया";
आयात भुगतान विफलता से"./PaymentFailure";
आयात भुगतान की सफलता से"।/भुगतान की सफलता";
समारोहपेपैल चेकआउट() {
कॉन्स्ट पेपैल = useRef ();
कॉन्स्ट [ट्रांजेक्शनस्टैटस, सेटट्रांसएक्शनस्टैटस] = यूज़स्टेट (व्यर्थ);
 उपयोग प्रभाव (() => {
खिड़कीपेपैल
 ।बटन({
 निर्माण आदेश: (डेटा, क्रियाएं, गलती) => {
वापस करना कार्य.आदेश.क्रिएट({
 इरादा: "कब्ज़ा करना",
 खरीद_इकाइयां: [
 {
 विवरण: "मैकबुक लैपटॉप",
 मात्रा: {
 मुद्रा कोड: "USD",
 कीमत: 350.00,
 },
 },
 ],
 });
 },
 अनुमोदन पर: async (डेटा, क्रियाएं) => {
कॉन्स्ट आदेश = इंतजार कार्य.आदेश.कब्जा ();
सांत्वना देना।लकड़ी का लट्ठा("सफलता", आदेश देना);
 सेटट्रांसएक्शनस्टेटस("सफलता");
 },
 त्रुटि पर: (ग़लती होना) => {
सांत्वना देनालॉग (त्रुटि);
 सेटट्रांसएक्शनस्टेटस("असफलता");
 },
 })
 .रेंडर (पेपैल.वर्तमान);
 }, []);
अगर (लेन-देन की स्थिति "सफलता") {
वापस करना<भुगतान की सफलता />;
 }
अगर (लेन-देन की स्थिति "असफलता") {
वापस करना<भुगतान विफलता />;
 }
वापस करना (



</div>
 </div>
 );
}
निर्यातगलती करना पेपैल चेकआउट;

यह कोड तीन का उपयोग करता है प्रतिक्रिया हुक: useRef, useState, और useEffect। यह div तत्व का संदर्भ बनाने के लिए useRef का उपयोग करता है, जो पेपैल चेकआउट बटन के लिए एक कंटेनर के रूप में कार्य करेगा।

यह पेपैल बटन बनाने के लिए useEffect का उपयोग करता है पेपैल। बटन फ़ंक्शन, और उसके बाद उस बटन को संदर्भित div तत्व में प्रस्तुत करता है paypal.currenटी विधि।

पेपैल। बटन फ़ंक्शन एक वस्तु को कई गुणों के साथ लेता है:

• createOrder: यह फ़ंक्शन एक ऑब्जेक्ट देता है जिसमें उपयोगकर्ता द्वारा बनाए गए ऑर्डर का विवरण होता है। ऑर्डर विवरण में उत्पाद या सेवा के विशिष्ट विवरण शामिल होंगे जैसे राशि, उत्पाद का नाम, विवरण और मुद्रा।
• onApprove: यह फ़ंक्शन तब चलता है जब भुगतान स्वीकृत हो जाता है। यह भुगतान को कैप्चर करता है और सफलता संदेश को कंसोल पर लॉग करता है। यह भी सेट करता है TransactionStatus करने के लिए राज्य सफलता.
• onError: यह फ़ंक्शन तब चलता है जब भुगतान में कोई त्रुटि आती है। यह त्रुटि संदेश को कंसोल में लॉग करता है और सेट करता है TransactionStatus करने के लिए राज्य असफलता.

अंत में, घटक सशर्त रूप से या तो प्रस्तुत करता है भुगतान की सफलता या भुगतान विफलता घटक के मूल्य पर निर्भर करता है TransactionStatus राज्य।

ये दो घटक केवल एक सफल लेनदेन या असफल लेनदेन के बाद ही प्रदर्शित होंगे। आगे बढ़ें और दो फाइलें बनाएं: PaymentSuccess.js और PaymentFailure.js घटक फ़ोल्डर में और एक पैराग्राफ तत्व के साथ एक कार्यात्मक घटक जोड़ें जो लेन-देन की स्थिति को प्रस्तुत करता है।

App.js घटक को अपडेट करें

src/App.js फ़ाइल खोलें और नीचे कोड जोड़ें:

आयात प्रतिक्रिया, {useState} से"प्रतिक्रिया";
आयात उत्पाद से"./घटक/उत्पाद";
आयात पेपैल चेकआउट से"./components/PayPalCheckout";
आयात"./App.css";
समारोहअनुप्रयोग() {
कॉन्स्ट [चेकआउट, सेटचेकआउट] = यूज़स्टेट (असत्य);
वापस करना (

"अनुप्रयोग">
"ऐप-हेडर">
 {चेक आउट? (

 ): (
"उत्पाद">
 वर्गनाम ="चेक आउट"
 ऑनक्लिक = {() => {
 सेटचेकआउट(सत्य);
 }}
 >
 कार्ट और चेकआउट में जोड़ें
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

यह कोड या तो PayPalCheckout घटक या उत्पाद घटक को प्रदर्शित करने के लिए एक सशर्त रेंडरिंग दृष्टिकोण का उपयोग करता है। यूज़स्टेट हुक चेकआउट नामक एक राज्य चर को गलत के रूप में आरंभ करता है, जो पृष्ठ लोड होने पर वर्तमान स्थिति का ट्रैक रखता है।

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

अतिरिक्त पेपैल भुगतान सुविधाएँ

पेपाल की भुगतान सुविधाएँ, जैसे कि वन टच और पेपाल क्रेडिट, सुनिश्चित करती हैं कि आपके ग्राहक एक सुव्यवस्थित भुगतान प्रक्रिया का आनंद ले सकते हैं जो सुरक्षित, विश्वसनीय और सुविधाजनक है।

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