Το Stripe είναι μια πλατφόρμα επεξεργασίας πληρωμών που σας επιτρέπει να προσθέσετε μια προκατασκευασμένη σελίδα ολοκλήρωσης αγοράς σε έναν ιστότοπο και να αποδεχτείτε και να διαχειριστείτε διαδικτυακές πληρωμές. Είναι ευρέως δημοφιλές λόγω της ευκολίας χρήσης, της εκτεταμένης τεκμηρίωσης, της υποστήριξης για τοπικές πληρωμές, των επιλογών προσαρμογής και επωνυμίας, των συνδρομών, της τιμολόγησης και της πρόληψης απάτης.
Χρησιμοποιώντας το Stripe, μπορείτε να δέχεστε πληρωμές από διάφορες πηγές, όπως πιστωτικές και χρεωστικές κάρτες, Apple Pay και Google Pay.
Προσθήκη Stripe Checkout σε μια εφαρμογή Next.js
Μπορείτε να ενσωματώσετε το Stripe checkout με εφαρμογές που έχουν δημιουργηθεί με διαφορετικές τεχνολογίες, συμπεριλαμβανομένου του Next.js.
Αυτό το σεμινάριο προϋποθέτει ότι έχετε ρυθμίσει έναν ιστότοπο ηλεκτρονικού εμπορίου Next.js και παρέχει μόνο έναν οδηγό για το πώς μπορείτε να προσθέσετε το Stripe checkout στον ιστότοπο.
Ρύθμιση λογαριασμού Stripe και ανάκτηση κλειδιών API
Για να χρησιμοποιήσετε το Stripe checkout, πρέπει να δημιουργήσετε έναν λογαριασμό Stripe και να λάβετε τα κλειδιά API. Τα κλειδιά API αποτελούνται από ένα κλειδί με δυνατότητα δημοσίευσης και ένα μυστικό κλειδί, τα οποία θα χρησιμοποιήσετε για τον έλεγχο ταυτότητας αιτημάτων από την εφαρμογή σας στο Stripe API.
Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε έναν λογαριασμό Stripe:
- μεταβείτε στο Ιστότοπος Stripe και κάντε κλικ στο κουμπί "Εγγραφή".
- Εισαγάγετε το email, το πλήρες όνομα, τη χώρα και τον κωδικό πρόσβασής σας και κάντε κλικ στο κουμπί "Δημιουργία λογαριασμού".
- Επαληθεύστε το email σας ακολουθώντας τις οδηγίες στο email που θα σας στείλει η Stripe.
- Στον πίνακα εργαλείων της λωρίδας, κάντε κλικ στην «Ενεργοποίηση πληρωμών» και απαντήστε στις ερωτήσεις που σας ζητούν για να ολοκληρώσετε τη διαδικασία ρύθμισης λογαριασμού. Αυτές οι ερωτήσεις μπορεί να αφορούν το όνομα της επιχείρησης, τη διεύθυνση και τα στοιχεία της τράπεζας. Για σκοπούς ανάπτυξης, χρησιμοποιήστε τη λειτουργία δοκιμής.
- Αντιγράψτε τα κλειδιά API από την καρτέλα "Προγραμματιστές" στο αρχείο .env στον φάκελο της εφαρμογής σας.
Τώρα θα μπορείτε να αποκτήσετε πρόσβαση στον λογαριασμό Stripe χρησιμοποιώντας τα κλειδιά API.
Εγκατάσταση του πακέτου Stripe npm
Εκτελέστε αυτήν την εντολή για να εγκαταστήσετε το πακέτο Stripe npm.
npm λωρίδα εγκατάστασης
Εισαγάγετε τη βιβλιοθήκη Stripe στη σελίδα στοιχείων ολοκλήρωσης αγοράς.
εισαγωγή Ταινία από'ταινία';
Στον φάκελο API, δημιουργήστε ένα νέο αρχείο που ονομάζεται αρχείο checkout-session.js. Αρχικοποιήστε το αντικείμενο Stripe με τα κλειδιά API που ανακτήσατε από τον πίνακα εργαλείων Stripe.
συνθ ρίγα = απαιτώ('ταινία')(διαδικασία.env. STRIPE_SECRET_KEY);
Στη λειτουργία χειριστή, ελέγξτε τα στοιχεία από τις παραμέτρους του σώματος.
εξαγωγήΠροκαθορισμένοασυγχρονισμόςλειτουργίαχειριστής(απαίτηση, ανάλογ) {
συνθ { item } = req.body;
};
Δημιουργήστε ένα αντικείμενο συνεδρίας ολοκλήρωσης αγοράς στη συνάρτηση χειριστή και περάστε τα στοιχεία.
συνθ συνεδρία = αναμένω stripe.checkout.sessions.create({
τύποι_μέθοδος_πληρωμής: ['κάρτα'],
στοιχεία_γραμμής: [
είδος,
],
τρόπος: 'πληρωμή',
success_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
Εδώ είναι τι σημαίνουν οι κόμβοι που μεταβιβάζετε στο αντικείμενο συνεδρίας:
- τρόποι_πληρωμών: Ο τρόπος πληρωμής που δέχεται η περίοδος ολοκλήρωσης αγοράς. Περιηγηθείτε στη λίστα των διαθέσιμων τρόπων πληρωμής στο Τεκμηρίωση λωρίδας.
- στοιχεία_γραμμής: Μια λίστα με τα είδη που αγοράζει ο χρήστης.
- τρόπος: Η λειτουργία της συνεδρίας ολοκλήρωσης αγοράς. Εάν τα στοιχεία ολοκλήρωσης αγοράς περιλαμβάνουν τουλάχιστον μία επαναλαμβανόμενη «συνδρομή» πάσου προϊόντος.
- success_url: Το URL Stripe θα ανακατευθύνει τους χρήστες εάν η πληρωμή είναι επιτυχής
- cancel_url: Το URL Stripe θα ανακατευθύνει τους χρήστες εάν ακυρώσουν την πληρωμή.
Συνολικά, το αρχείο checkout-session.js θα πρέπει να μοιάζει με αυτό:
εξαγωγήΠροκαθορισμένοασυγχρονισμόςλειτουργίαχειριστής(απαίτηση, ανάλογ) {
αν (απαιτ.μέθοδος 'ΘΕΣΗ') {
συνθ { cart } = req.body;δοκιμάστε {
συνθ συνεδρία = αναμένω stripe.checkout.sessions.create({
στοιχεία_γραμμής: [
καροτσάκι
],
τρόπος: 'πληρωμή',
success_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} σύλληψη (λάθος) {
res.status (err.statusCode || 500.json (err.message);
}
} αλλού {
res.setHeader('Επιτρέπω', 'ΘΕΣΗ');
res.status(405).τέλος('Μη επιτρεπτή μέθοδος');
}
}
Αυτή η συνάρτηση χρησιμοποιεί τώρα το try/catch για να ανακατευθύνει τους χρήστες όταν παρουσιαστεί σφάλμα κατά την ολοκλήρωση αγοράς. Τώρα που έχετε δημιουργήσει τη διαδρομή API που θα επεξεργαστεί την πληρωμή, το επόμενο βήμα είναι να δημιουργήσετε ένα στοιχείο ολοκλήρωσης αγοράς για να χειριστείτε τη διαδικασία ολοκλήρωσης αγοράς.
Δείτε αυτήν την ανάρτηση στο δημιουργία διαδρομών API στο Next.js για μια πιο εμπεριστατωμένη εξήγηση των διαδρομών API Next.js.
Δημιουργία στοιχείου Checkout
Για να επεξεργαστείτε το ταμείο, πρέπει να εγκαταστήσετε τη βιβλιοθήκη @stripe/stripe-js χρησιμοποιώντας το NPM.
npm εγκατάσταση @stripe/stripe-js
Η βιβλιοθήκη @stripe/stripe-js είναι ένα βοηθητικό πρόγραμμα φόρτωσης που θα σας βοηθήσει να φορτώσετε το στιγμιότυπο Stripe.js.
Μόλις ολοκληρωθεί η εγκατάσταση, δημιουργήστε ένα νέο αρχείο στον κατάλογο /components με το όνομα /components/checkout.js. Στη συνέχεια, καλέστε τη συνάρτηση loadstripe από τη βιβλιοθήκη @stripe/stripe-js, περνώντας το δημοσιευόμενο κλειδί ως όρισμα.
εισαγωγή { loadStripe } από'@stripe/stripe-js';
συνθ stripePromise = loadStripe(
διεργασία.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
Η loadstripe() επιστρέφει μια υπόσχεση που επιλύεται με ένα αντικείμενο Stripe που δημιουργήθηκε πρόσφατα μόλις φορτωθεί το Stripe.js.
Στη συνέχεια, προσθέστε μια συνάρτηση για να δημιουργήσετε μια περίοδο ολοκλήρωσης αγοράς στο στοιχείο.
εξαγωγήΠροκαθορισμένολειτουργίαΟλοκλήρωση αγοράς({καροτσάκι}) {
συνθ handleCheckout = ασυγχρονισμός () => {
δοκιμάστε {
συνθ ρίγα = αναμένω stripePromise;συνθ checkoutSession = αναμένω axios.post("/api/checkout-session", {
καροτσάκι,
});συνθ αποτέλεσμα = αναμένω stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
αν (αποτέλεσμα.σφάλμα) {
ειδοποίηση (result.error.message);
}
} σύλληψη (λάθος) {
κονσόλα.log (σφάλμα);
}
};
ΕΠΙΣΤΡΟΦΗ (
</div>
);
}
Αυτή η λειτουργία χρησιμοποιεί Axios για να καλέσετε το API δημιουργήσατε στο φάκελο /api για να ανακτήσετε την περίοδο ολοκλήρωσης αγοράς.
Προσθέστε ένα κουμπί ολοκλήρωσης αγοράς στη δήλωση επιστροφής που θα ενεργοποιήσει τη λειτουργία handleCheckout όταν κάνετε κλικ.
Μπορείτε να καλέσετε το στοιχείο ολοκλήρωσης αγοράς στη σελίδα καλαθιού.
Χειρισμός των ανακατευθύνσεων από το Stripe
Στη διαδρομή API ολοκλήρωσης αγοράς, καθορίσατε μια διεύθυνση URL επιτυχίας και μια διεύθυνση URL ακύρωσης που η λωρίδα θα πρέπει να ανακατευθύνει έναν χρήστη όταν η διαδικασία είναι επιτυχής ή αποτύχει. Η διεύθυνση URL ακύρωσης αντιστοιχεί στη διαδρομή /cancel, ενώ η διεύθυνση URL επιτυχίας στη διαδρομή /success. Προσθέστε δύο στοιχεία στο φάκελο /pages με το όνομα success και ακυρώστε για να χειριστείτε αυτές τις διευθύνσεις URL.
Στο pages/success.js, προσθέστε το στοιχείο επιτυχίας.
εξαγωγήΠροκαθορισμένολειτουργίαΕπιτυχία() {
ΕΠΙΣΤΡΟΦΗ<div>Ολοκλήρωση αγοράς με επιτυχίαdiv>;
}
Στο pages/cancel.js, προσθέστε το στοιχείο ακύρωσης.
εξαγωγήΠροκαθορισμένολειτουργίαΜαταίωση() {
ΕΠΙΣΤΡΟΦΗ<div>Παρουσιάστηκε σφάλμα κατά την ολοκλήρωση αγοράςdiv>;
}Τώρα, το Stripe θα ανακατευθύνει σε οποιαδήποτε από αυτές τις σελίδες ανάλογα με την κατάσταση ολοκλήρωσης αγοράς.
Εάν χρησιμοποιείτε το Next.js 13, ανατρέξτε σε αυτό το σεμινάριο πώς λειτουργεί ο φάκελος της εφαρμογής στο Next.js 13 για εναλλαγή από το φάκελο /pages.
Πρόσθετες επιλογές προσαρμογής για τη σελίδα ολοκλήρωσης αγοράς
Από τον πίνακα ελέγχου Stripe, μπορείτε να προσαρμόσετε τη σελίδα ολοκλήρωσης αγοράς ώστε να ταιριάζει με την εμφάνιση της επωνυμίας σας. Μπορείτε να προσθέσετε ένα λογότυπο, ένα εικονίδιο, ένα χρώμα επωνυμίας, ένα χρώμα έμφασης, ακόμη και να χρησιμοποιήσετε τον δικό σας προσαρμοσμένο τομέα. Επιπλέον, κατά τη δημιουργία της περιόδου ολοκλήρωσης αγοράς, μπορείτε να προσθέσετε τους τρόπους πληρωμής που προτιμάτε και επίσης να καθορίσετε τη γλώσσα που πρέπει να εμφανίζεται το Stripe στη σελίδα ολοκλήρωσης αγοράς. Όλες αυτές οι επιλογές σάς επιτρέπουν να προσαρμόσετε τη διαδικασία ολοκλήρωσης αγοράς ώστε να ταιριάζει στην αίτησή σας.
Γιατί να χρησιμοποιήσετε το Stripe για τη σελίδα ολοκλήρωσης αγοράς;
Ενώ μπορείτε να δημιουργήσετε τη δική σας υπηρεσία επεξεργασίας ολοκλήρωσης αγοράς, η χρήση μιας πλατφόρμας πληρωμών όπως το Stripe είναι συνήθως μια καλύτερη επιλογή. Το Stripe checkout σάς βοηθά να μειώσετε τον χρόνο ανάπτυξης, επιτρέποντάς σας να αρχίσετε να δέχεστε πληρωμές σε σύντομο χρονικό διάστημα.
Επιπλέον, λαμβάνετε πρόσθετες λειτουργίες όπως η συμμόρφωση με το PCI, η ανάκτηση καλαθιού, οι δυνατότητες εκπτώσεων και η δυνατότητα συλλογής πληροφοριών αποστολής και αποστολής τιμολογίων μετά την πληρωμή.
