Πώς να ενσωματώσετε το PayPal Checkout σε μια εφαρμογή React

Στον χώρο του ηλεκτρονικού εμπορίου, οι λύσεις ψηφιακών πληρωμών έχουν συμβάλει στη σημαντική αύξηση των εσόδων και της συνολικής ανάπτυξης των επιχειρήσεων, επιτρέποντας και διεκπεραιώνοντας τις διασυνοριακές πληρωμές με ευκολία.

Το PayPal προσφέρει μια απλή και ευέλικτη λύση ψηφιακών πληρωμών για τη διαχείριση διαδικτυακών συναλλαγών. Με την ενσωμάτωση του PayPal στις διαδικτυακές εφαρμογές σας, μπορείτε να διασφαλίσετε ότι οι πελάτες έχουν πρόσβαση σε μια απρόσκοπτη και ασφαλή εμπειρία πληρωμής, η οποία με τη σειρά της μπορεί να οδηγήσει σε αυξημένες πωλήσεις και τη συνολική εμπιστοσύνη της επωνυμίας.

Διαβάστε παρακάτω για να μάθετε πώς να ενσωματώνετε το PayPal στις εφαρμογές σας React.

Δημιουργήστε έναν λογαριασμό PayPal Sandbox

Το PayPal Sandbox είναι ένα περιβάλλον δοκιμών που παρέχεται από το PayPal, ώστε να μπορείτε να δοκιμάσετε τις ενσωματώσεις πληρωμών στις εφαρμογές σας. Προσφέρει ένα προσομοιωμένο περιβάλλον που περιλαμβάνει όλες τις δυνατότητες πληρωμής που βρίσκονται στο ζωντανό περιβάλλον παραγωγής του PayPal.

Απλώς, το sandbox παρέχει μια πλατφόρμα για δοκιμή ενσωματώσεων πληρωμών χωρίς την ανάγκη πραγματικών χρημάτων.

Χρησιμοποιώντας τον λογαριασμό sandbox, μπορείτε να αποκτήσετε πρόσβαση σε έναν εικονικό λογαριασμό PayPal με δοκιμαστικά κεφάλαια, ο οποίος σας επιτρέπει να προσομοιώνετε διάφορους τύπους συναλλαγών και ενσωματώσεις πληρωμών.

Για να δημιουργήσετε έναν λογαριασμό sandbox, μεταβείτε στο Κονσόλα προγραμματιστή PayPal και συνδεθείτε με τα διαπιστευτήρια του λογαριασμού σας στο PayPal. Στη συνέχεια, στον πίνακα ελέγχου προγραμματιστή, κάντε κλικ στο Λογαριασμοί Sandbox κουμπί.

Για να επεξεργαστείτε μια συναλλαγή PayPal από την εφαρμογή React, χρειάζεστε δύο λογαριασμούς sandbox: έναν επαγγελματικό λογαριασμό και έναν προσωπικό λογαριασμό. Αυτοί οι δύο λογαριασμοί θα σας βοηθήσουν να προσομοιώσετε μια πλήρη συναλλαγή — τόσο από την άποψη ενός πελάτη όσο και από την άποψη ενός εμπόρου (επιχειρηματική).

Είναι σημαντικό να δοκιμάσετε τη λειτουργικότητα της ενσωμάτωσης πληρωμών στην εφαρμογή σας και από τις δύο προοπτικές.

Κάνε κλικ στο Δημιουργήστε λογαριασμό κουμπί για να ρυθμίσετε τους δύο λογαριασμούς.

Στη σελίδα ρυθμίσεων λογαριασμού, δημιουργήστε έναν από κάθε τύπο λογαριασμού: προσωπικό και μετά επαγγελματικό. Θα χρησιμοποιήσετε τα διαπιστευτήρια προσωπικού λογαριασμού για να συνδεθείτε Το sandbox του PayPal ΠΡΟΣΩΠΙΚΟΣ ΛΟΓΑΡΙΑΣΜΟΣ. Από την άλλη πλευρά, θα χρησιμοποιήσετε τα διαπιστευτήρια για τον επαγγελματικό λογαριασμό για να δημιουργήσετε ένα έργο στην κονσόλα προγραμματιστή για να αποκτήσετε το αναγνωριστικό πελάτη του PayPal.

Εναλλακτικά, αντί να δημιουργείτε νέους λογαριασμούς, μπορείτε να χρησιμοποιήσετε τους προεπιλεγμένους λογαριασμούς sandbox που παρέχονται από το PayPal για να δοκιμάσετε τις ενοποιήσεις πληρωμών.

Δημιουργήστε ένα έργο PayPal

Στη σελίδα του πίνακα ελέγχου προγραμματιστή, κάντε κλικ στο Εφαρμογές και διαπιστευτήρια κουμπί και κάντε κλικ Δημιουργία εφαρμογής κουμπί για να ρυθμίσετε ένα έργο PayPal. Στη συνέχεια, συμπληρώστε το όνομα της αίτησής σας, επιλέξτε Εμπορος ως τύπο λογαριασμού και επιλέξτε τα διαπιστευτήρια για τον επαγγελματικό λογαριασμό που δημιουργήσατε αρχικά.

Τέλος, αντιγράψτε το αναγνωριστικό πελάτη της εφαρμογής.

Ρυθμίστε το React Client

Δημιουργήστε μια εφαρμογή React, άνοιξε το public/index.html αρχείο και προσθέστε το αναγνωριστικό πελάτη σας στη μορφή που φαίνεται παρακάτω στην ενότητα του στοιχείου κεφαλής.

<γραφήsrc=" https://www.paypal.com/sdk/js? client-id=your-client-ID&currency=USD">γραφή>

Η ετικέτα σεναρίου φορτώνει το PayPal JavaScript SDK, μια βιβλιοθήκη που παρέχει λειτουργικότητα από την πλευρά του πελάτη για αλληλεπίδραση με το API του PayPal και το καθιστά διαθέσιμο για χρήση στα στοιχεία React.

Χρησιμοποιώντας τις λειτουργίες του SDK, μπορείτε να δημιουργήσετε ένα κουμπί πληρωμής PayPal που χειρίζεται τη ροή πληρωμών που περιλαμβάνει την αποστολή στοιχείων πληρωμής στο PayPal, την εξουσιοδότηση της πληρωμής και τον χειρισμό της πληρωμής απάντηση.

Δημιουργήστε ένα στοιχείο προϊόντος

Στον κατάλογο /src, δημιουργήστε έναν νέο φάκελο στοιχείων και προσθέστε δύο αρχεία: Product.js και PayPalCheckout.js.

Ανοίξτε το αρχείο Product.js και προσθέστε τον παρακάτω κώδικα:

εισαγωγή React, { useState } από"αντιδρώ";
εισαγωγή"./product.style.css";
εισαγωγή"../assests/laptop.jpg";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
"Προϊόν-δοχείο">
"Προϊόν-περιεχόμενο">
"προϊόν"> 
απαιτώ("../assests/laptop.jpg")} alt="ΦΟΡΗΤΟΣ ΥΠΟΛΟΓΙΣΤΗΣ" />
 </div>
"περιγραφή">
 MacBook Pro</h2>



 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Maxime mollitia, molestiae quas vel sint commodi repudiandae
 συνέπεια.
 </p>

Τιμή: $350.00</h3>
 </div>
 </header>
 </div>
 );
}


εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτός ο κώδικας αποδίδει ένα απλό στοιχείο προϊόντος.

Δημιουργήστε το στοιχείο PayPal Checkout

Προσθέστε τον ακόλουθο κώδικα στο αρχείο PayPalCheckout.js:

εισαγωγή React, { useRef, useEffect, useState } από"αντιδρώ";
εισαγωγή Αποτυχία πληρωμής από"./PaymentFailure";
εισαγωγή Επιτυχία πληρωμής από"./PaymentSuccess";
λειτουργίαPayPalCheckout() {
συνθ paypal = useRef();
συνθ [transactionStatus, setTransactionStatus] = useState(μηδενικό);
 useEffect(() => {
παράθυρο.paypal
. Κουμπιά({
 Δημιουργία Παραγγελίας: (δεδομένα, ενέργειες, λάθη) => {
ΕΠΙΣΤΡΟΦΗ actions.order.create({
 πρόθεση: "ΠΙΑΝΩ",
 αγορά_μονάδων: [
 {
 περιγραφή: "Φορητός υπολογιστής MacBook",
 ποσό: {
 νομισμα_κωδικός: "USD",
 αξία: 350.00,
 },
 },
 ],
 });
 },
 onApprove: ασυγχρονισμός (δεδομένα, ενέργειες) => {
συνθ παραγγελία = αναμένω actions.order.capture();
κονσόλα.κούτσουρο("επιτυχία", Σειρά);
 setTransactionStatus("επιτυχία");
 },
 έναΣφάλμα: (πλανώμαι) => {
κονσόλα.log (err);
 setTransactionStatus("αποτυχία");
 },
 })
 .render (paypal.current);
 }, []);
αν (Κατάσταση συναλλαγής "επιτυχία") {
ΕΠΙΣΤΡΟΦΗ<Επιτυχία πληρωμής />;
 }
αν (Κατάσταση συναλλαγής "αποτυχία") {
ΕΠΙΣΤΡΟΦΗ<Αποτυχία πληρωμής />;
 }
ΕΠΙΣΤΡΟΦΗ (



</div>
 </div>
 );
}
εξαγωγήΠροκαθορισμένο PayPalCheckout;

Αυτός ο κώδικας χρησιμοποιεί τρία React hooks: useRef, useState και useEffect. Χρησιμοποιεί το userRef για να δημιουργήσει μια αναφορά σε ένα στοιχείο div, το οποίο θα λειτουργεί ως κοντέινερ για το κουμπί πληρωμής PayPal.

Χρησιμοποιεί το useEffect για να δημιουργήσει ένα κουμπί PayPal με το paypal. Κουμπιά λειτουργία και, στη συνέχεια, αποδίδει αυτό το κουμπί στο στοιχείο div που αναφέρεται από paypal.currenμέθοδος t.

ο paypal. Κουμπιά Η συνάρτηση παίρνει ένα αντικείμενο με πολλές ιδιότητες:

• createOrder: Αυτή η συνάρτηση επιστρέφει ένα αντικείμενο που περιέχει τις λεπτομέρειες της παραγγελίας που έχει δημιουργήσει ο χρήστης. Τα στοιχεία της παραγγελίας θα περιλαμβάνουν τις συγκεκριμένες λεπτομέρειες του προϊόντος ή της υπηρεσίας, όπως το ποσό, το όνομα του προϊόντος, την περιγραφή και το νόμισμα.
• onApprove: Αυτή η λειτουργία εκτελείται όταν εγκριθεί η πληρωμή. Καταγράφει την πληρωμή και καταγράφει το μήνυμα επιτυχίας στην κονσόλα. Ορίζει επίσης το κατάσταση συναλλαγής κατάσταση να επιτυχία.
• oneError: Αυτή η λειτουργία εκτελείται όταν η πληρωμή αντιμετωπίζει σφάλμα. Καταγράφει το μήνυμα σφάλματος στην κονσόλα και ορίζει το κατάσταση συναλλαγής κατάσταση να αποτυχία.

Τέλος, το στοιχείο αποδίδει υπό όρους είτε το Επιτυχία πληρωμής ή Αποτυχία πληρωμής συστατικό ανάλογα με την τιμή του κατάσταση συναλλαγής κατάσταση.

Αυτά τα δύο στοιχεία θα αποδοθούν μόνο μετά από μια επιτυχημένη ή αποτυχημένη συναλλαγή. Προχωρήστε και δημιουργήστε δύο αρχεία: PaymentSuccess.js και PaymentFailure.js στο φάκελο στοιχείων και προσθέστε ένα λειτουργικό στοιχείο με ένα στοιχείο παραγράφου που αποδίδει την κατάσταση της συναλλαγής.

Ενημερώστε το στοιχείο App.js

Ανοίξτε το αρχείο src/App.js και προσθέστε τον παρακάτω κώδικα:

εισαγωγή React, { useState } από"αντιδρώ";
εισαγωγή Προϊόν από"./components/Product";
εισαγωγή PayPalCheckout από"./components/PayPalCheckout";
εισαγωγή"./App.css";
λειτουργίαApp() {
συνθ [checkout, setCheckOut] = useState(ψευδής);
ΕΠΙΣΤΡΟΦΗ (

"Εφαρμογή">
"Επικεφαλίδα εφαρμογής">
 {Ολοκλήρωση αγοράς? (

 ): (
"Προϊόν">
 className="Ολοκλήρωση αγοράς"
 onClick={() => {
 setCheckOut(αληθής);
 }}
 >
 Προσθήκη στο καλάθι και ταμείο
 </button>

 </div>
 )}
 </header>
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτός ο κωδικός χρησιμοποιεί μια προσέγγιση απόδοσης υπό όρους για να εμφανίσει είτε το στοιχείο PayPalCheckout είτε το στοιχείο Προϊόν. Το άγκιστρο useState προετοιμάζει μια μεταβλητή κατάστασης που ονομάζεται checkout ως false, η οποία παρακολουθεί την τρέχουσα κατάσταση κατά τη φόρτωση της σελίδας.

Αρχικά, το React αποδίδει το στοιχείο Προϊόν, συμπεριλαμβανομένου του κουμπιού αγοράς. Όταν ένας χρήστης κάνει κλικ στο κουμπί ολοκλήρωσης αγοράς, η λειτουργία χειρισμού onClick ενεργοποιεί την ενημέρωση της μεταβλητής ολοκλήρωσης αγοράς σε true. Αυτή η ενημέρωση ζητά από το στοιχείο της εφαρμογής να αποδώσει το στοιχείο PayPalCheckout.

Πρόσθετες λειτουργίες πληρωμής PayPal

Οι λειτουργίες πληρωμής του PayPal, όπως το One Touch και το PayPal Credit, διασφαλίζουν ότι οι πελάτες σας μπορούν να απολαμβάνουν μια βελτιωμένη διαδικασία πληρωμής που είναι ασφαλής, αξιόπιστη και βολική.

Ενώ μπορείτε να δημιουργήσετε τη δική σας υπηρεσία επεξεργασίας πληρωμών από την αρχή, η χρήση μιας πλατφόρμας πληρωμών όπως το PayPal είναι κατά προτίμηση μια πιο ευέλικτη και αποτελεσματική εναλλακτική λύση. Ουσιαστικά, με τη λύση πληρωμών σε εφαρμογή, δεν χρειάζεται να ανησυχείτε για τη διαχείριση της υποδομής που απαιτείται για τη δημιουργία μιας προσαρμοσμένης υπηρεσίας πληρωμών.