Stripe is een betalingsverwerkingsplatform waarmee u een vooraf gebouwde afrekenpagina aan een website kunt toevoegen en online betalingen kunt accepteren en beheren. Het is zeer populair vanwege het gebruiksgemak, uitgebreide documentatie, ondersteuning voor lokale betalingen, aanpassings- en merkopties, abonnementen, facturering en fraudepreventie.
Met Stripe kunt u betalingen accepteren van verschillende bronnen, waaronder creditcards en betaalpassen, Apple Pay en Google Pay.
Stripe Checkout toevoegen aan een Next.js-toepassing
U kunt Stripe Checkout integreren met applicaties die zijn gemaakt met verschillende technologieën, waaronder Next.js.
Deze tutorial gaat ervan uit dat je een Next.js e-commerce site hebt opgezet en geeft alleen een handleiding over hoe je Stripe checkout aan de site kunt toevoegen.
Een Stripe-account opzetten en API-sleutels ophalen
Om Stripe-afrekenen te gebruiken, moet u een Stripe-account maken en de API-sleutels ophalen. De API-sleutels bestaan uit een publiceerbare sleutel en een geheime sleutel, die u zult gebruiken om verzoeken van uw applicatie aan de Stripe API te verifiëren.
Volg deze stappen om een Stripe-account in te stellen:
- Ga naar de Streep website en klik op de knop "Aanmelden".
- Voer uw e-mailadres, volledige naam, land en wachtwoord in en klik op de knop "Account maken".
- Verifieer je e-mailadres door de instructies te volgen in de e-mail die Stripe je stuurt.
- Klik op het stripe-dashboard op "Betalingen activeren" en beantwoord de promptvragen om het accountconfiguratieproces te voltooien. Deze vragen kunnen gaan over de bedrijfsnaam, het adres en bankgegevens. Gebruik de testmodus voor ontwikkelingsdoeleinden.
- Kopieer de API-sleutels van het tabblad "Ontwikkelaars" naar het .env-bestand in uw app-map.
Je hebt nu toegang tot het Stripe-account met behulp van de API-sleutels.
Het Stripe npm-pakket installeren
Voer deze opdracht uit om het Stripe npm-pakket te installeren.
npm installeer streep
Importeer de Stripe-bibliotheek in uw uitcheckcomponentpagina.
importeren Streep van'streep';
Maak in de API-map een nieuw bestand met de naam checkout-session.js-bestand. Initialiseer het Stripe-object met de API-sleutels die u hebt opgehaald van uw Stripe-dashboard.
const streep = vereisen('streep')(proces.env. STREEP_SECRET_KEY);
Haal in de handler-functie de items op om uit te checken uit de body-parameters.
exporterenstandaardasynchroonfunctiebehandelaar(req, res) {
const { item } = aanvraaglichaam;
};
Maak een checkout-sessieobject voor de handlerfunctie en geef de items door.
const sessie = wachten stripe.checkout.sessions.create({
betalingsmethode_types: ['kaart'],
regelitems: [
item,
],
modus: 'betaling',
succes_url: `${req.headers.origin}/?success=true`,
annuleren_url: `${req.headers.origin}/?canceled=true`,
});
Dit is wat de knooppunten die u doorgeeft aan het sessieobject betekenen:
- betalingsmethode_types: De betaalmethode die de checkout-sessie accepteert. Blader door de lijst met beschikbare betaalmethoden in de Streep documentatie.
- regelitems: Een lijst met items die de gebruiker koopt.
- modus: De modus van de afrekensessie. Als de afrekenitems minstens één terugkerend item bevatten, pas dan een "abonnement" toe.
- succes_url: De URL Stripe zal gebruikers omleiden als de betaling succesvol is
- annuleer_url: De URL Stripe zal gebruikers omleiden als ze de betaling annuleren.
Alles bij elkaar zou het bestand checkout-session.js er als volgt uit moeten zien:
exporterenstandaardasynchroonfunctiebehandelaar(req, res) {
als (vereist methode 'NA') {
const { winkelwagen } = aanvraaglichaam;poging {
const sessie = wachten stripe.checkout.sessions.create({
regelitems: [
kar
],
modus: 'betaling',
succes_url: `${req.headers.origin}/success`,
annuleren_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, sessie.url);
} vangst (fout) {
res.status (fout.statusCode || 500.json (foutbericht);
}
} anders {
reset.setHeader('Toestaan', 'NA');
res.status(405).einde('Methode niet toegestaan');
}
}
Deze functie gebruikt nu de try/catch om gebruikers om te leiden wanneer er een fout optreedt tijdens het afrekenen. Nu u de API-route hebt gemaakt die de betaling zal verwerken, is de volgende stap het maken van een afrekencomponent om het afrekenproces af te handelen.
Bekijk dit bericht op API-routes maken in Next.js voor een meer diepgaande uitleg van Next.js API-routes.
Een afrekencomponent maken
Om het afrekenen te verwerken, moet u de @stripe/stripe-js-bibliotheek installeren met behulp van NPM.
npm installeer @stripe/stripe-js
@stripe/stripe-js-bibliotheek is een laadhulpprogramma waarmee u de Stripe.js-instantie kunt laden.
Zodra de installatie is voltooid, maakt u een nieuw bestand in uw map /components met de naam /components/checkout.js. Roep vervolgens de loadstripe-functie aan vanuit de @stripe/stripe-js-bibliotheek en geef de publiceerbare sleutel door als argument.
importeren { belastingStripe } van'@streep/streep-js';
const stripePromise = loadStripe(
proces.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadstripe() retourneert een belofte die wordt opgelost met een nieuw gemaakt Stripe-object zodra Stripe.js is geladen.
Voeg vervolgens een functie toe om een checkout-sessie in de component te maken.
exporterenstandaardfunctieUitchecken({winkelwagen}) {
const handleCheckout = asynchroon () => {
poging {
const streep = wachten streepBelofte;const checkoutSessie = wachten axios.post("/api/kassa-sessie", {
kar,
});const resultaat = wachten streep.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
als (resultaat.fout) {
waarschuwing (resultaat.fout.bericht);
}
} vangst (fout) {
troosten.log (fout);
}
};
opbrengst (
</div>
);
}
Deze functie gebruikt Axios om de API aan te roepen die u hebt gemaakt in de map /api om de uitchecksessie op te halen.
Voeg een afrekenknop toe aan de retourverklaring die de functie handleCheckout activeert wanneer erop wordt geklikt.
U kunt de afrekencomponent op de winkelwagenpagina aanroepen.
De omleidingen van Stripe afhandelen
In de checkout API-route heb je een succes-URL en een annulerings-URL gedefinieerd die stripe een gebruiker moet omleiden wanneer het proces succesvol is of mislukt. De annuleer-URL verwijst naar de /cancel-route, terwijl de succes-URL verwijst naar de /succes-route. Voeg twee componenten toe aan de map /pages met de naam success en cancel om deze URL's te verwerken.
Voeg in pages/success.js de succescomponent toe.
exporterenstandaardfunctieSucces() {
opbrengst<div>Afrekenen succesvoldiv>;
}
Voeg in pages/cancel.js de component annuleren toe.
exporterenstandaardfunctieAnnuleren() {
opbrengst<div>Er is een fout opgetreden tijdens het afrekenendiv>;
}Nu zal Stripe doorverwijzen naar een van deze pagina's, afhankelijk van de afrekenstatus.
Als u Next.js 13 gebruikt, raadpleegt u deze zelfstudie op hoe de app-map werkt in Next.js 13 om over te schakelen van de map /pages.
Aanvullende aanpassingsopties voor de afrekenpagina
Vanuit het Stripe-dashboard kunt u de afrekenpagina aanpassen aan de uitstraling van uw merk. U kunt een logo, pictogram, merkkleur, accentkleur toevoegen en zelfs uw eigen aangepaste domein gebruiken. Bovendien kunt u bij het maken van de afrekensessie de gewenste betaalmethoden toevoegen en ook de taal specificeren die Stripe op de afrekenpagina moet weergeven. Met al deze opties kunt u het afrekenproces aanpassen aan uw toepassing.
Waarom Stripe gebruiken voor de afrekenpagina?
Hoewel u uw eigen kassaverwerkingsservice kunt bouwen, is het gebruik van een betalingsplatform zoals Stripe meestal een betere optie. Stripe Checkout helpt u de ontwikkelingstijd te verkorten, zodat u binnen korte tijd kunt beginnen met het accepteren van betalingen.
Bovendien krijgt u extra functies zoals PCI-compliance, winkelwagenherstel, kortingsmogelijkheden en de mogelijkheid om verzendinformatie te verzamelen en facturen na betaling te verzenden.