A Stripe egy fizetésfeldolgozó platform, amely lehetővé teszi egy előre elkészített fizetési oldal hozzáadását egy webhelyhez, valamint online fizetések elfogadását és kezelését. Széles körben népszerű az egyszerű használat, a kiterjedt dokumentáció, a helyi fizetések támogatása, a testreszabási és márkaépítési lehetőségek, az előfizetések, a számlázás és a csalásmegelőzés miatt.
A Stripe használatával számos forrásból fogadhat fizetést, beleértve a hitel- és betéti kártyákat, az Apple Pay-t és a Google Pay-t.
Stripe Checkout hozzáadása Next.js alkalmazáshoz
Integrálhatja a Stripe Checkout-ot különböző technológiákkal létrehozott alkalmazásokkal, beleértve a Next.js-t.
Ez az oktatóanyag feltételezi, hogy beállított egy Next.js e-kereskedelmi webhelyet, és csak útmutatót ad a Stripe Checkout webhelyhez való hozzáadásához.
Stripe-fiók beállítása és API-kulcsok lekérése
A Stripe Checkout használatához létre kell hoznia egy Stripe-fiókot, és be kell szereznie az API-kulcsokat. Az API-kulcsok egy közzétehető kulcsból és egy titkos kulcsból állnak, amelyeket az alkalmazástól a Stripe API-hoz intézett kérések hitelesítésére fog használni.
Kövesse az alábbi lépéseket a Stripe-fiók beállításához:
- Menj a Stripe weboldal és kattintson a "Regisztráció" gombra.
- Adja meg e-mail címét, teljes nevét, országát és jelszavát, majd kattintson a „Fiók létrehozása” gombra.
- Erősítse meg e-mail-címét a Stripe által küldött e-mailben található utasítások követésével.
- A csíkos irányítópulton kattintson a „Fizetések aktiválása” lehetőségre, és válaszoljon a feltett kérdésekre a fiókbeállítási folyamat befejezéséhez. Ezek a kérdések a vállalkozás nevére, címére és banki adataira vonatkozhatnak. Fejlesztési célokra használja a teszt módot.
- Másolja át az API-kulcsokat a „Fejlesztők” lapról az alkalmazásmappában lévő .env fájlba.
Mostantól hozzáférhet a Stripe-fiókhoz az API-kulcsok segítségével.
A Stripe npm csomag telepítése
Futtassa ezt a parancsot a Stripe npm csomag telepítéséhez.
npm install stripe
Importálja a Stripe könyvtárat a fizetési összetevő oldalára.
import Csík tól től'csík';
Az API mappában hozzon létre egy új fájlt checkout-session.js fájl néven. Inicializálja a Stripe objektumot a Stripe irányítópultjáról letöltött API-kulcsokkal.
const csík = igényelnek('csík')(process.env. STRIPE_SECRET_KEY);
A kezelő funkcióban kérje le az elemeket a törzsparaméterekből.
exportalapértelmezettasyncfunkciókezelő(req, res) {
const { item } = req.body;
};
Hozzon létre egy fizetési munkamenet objektumot a kezelő függvénynek, és adja át a tételeket.
const munkamenet = várja stripe.checkout.sessions.create({
fizetési_módszer_típusok: ['kártya'],
sor_elemek: [
tétel,
],
mód: 'fizetés',
siker_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
A munkamenet objektumnak átadott csomópontok jelentése a következő:
- fizetési_mód_típusok: A fizetési mód által elfogadott fizetési mód. Böngésszen az elérhető fizetési módok listájában a Csíkos dokumentáció.
- sor_elemek: A felhasználó által megvásárolt cikkek listája.
- mód: A Checkout Session üzemmódja. Ha a pénztári tételek tartalmaznak legalább egy ismétlődő árucikk „előfizetést”.
- siker_url: Az URL Stripe átirányítja a felhasználókat, ha a fizetés sikeres
- cancel_url: Az URL Stripe átirányítja a felhasználókat, ha törlik a fizetést.
Összességében a checkout-session.js fájlnak így kell kinéznie:
exportalapértelmezettasyncfunkciókezelő(req, res) {
ha (req.method 'POST') {
const { kosár } = kért test;próbáld ki {
const munkamenet = várja stripe.checkout.sessions.create({
sor_elemek: [
szekér
],
mód: 'fizetés',
siker_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} fogás (hiba) {
res.status (err.statusCode || 500.json (err.message);
}
} más {
res.setHeader('Lehetővé teszi', 'POST');
res.status(405).end('Nem megengedett módszer');
}
}
Ez a funkció most a try/catch funkciót használja a felhasználók átirányítására, ha a fizetés során hiba történik. Most, hogy létrehozta a fizetést feldolgozó API-útvonalat, a következő lépés egy fizetési összetevő létrehozása a fizetési folyamat kezelésére.
Tekintse meg ezt a bejegyzést API-útvonalak létrehozása a Next.js-ben a Next.js API-útvonalak részletesebb magyarázatához.
Checkout komponens létrehozása
A fizetés feldolgozásához telepítenie kell a @stripe/stripe-js könyvtárat az NPM segítségével.
npm install @stripe/stripe-js
A @stripe/stripe-js könyvtár egy betöltő segédprogram, amely segít a Stripe.js példány betöltésében.
A telepítés befejezése után hozzon létre egy új fájlt a /components könyvtárban /components/checkout.js néven. Ezután hívja meg a loadstripe függvényt a @stripe/stripe-js könyvtárból, és adja át argumentumként a közzétehető kulcsot.
import { loadStripe } tól től"@stripe/stripe-js";
const stripePromise = loadStripe(
folyamat.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
A loadstripe() olyan ígéretet ad vissza, amely egy újonnan létrehozott Stripe objektummal oldódik meg, miután a Stripe.js betöltődött.
Ezután adjon hozzá egy függvényt, amellyel fizetési munkamenetet hozhat létre az összetevőben.
exportalapértelmezettfunkcióPénztár({cart}) {
const handleCheckout = async () => {
próbáld ki {
const csík = várja stripePromise;const checkoutSession = várja axios.post("/api/checkout-session", {
kocsi,
});const eredmény = várja stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
ha (eredmény.hiba) {
riasztás (result.error.message);
}
} fogás (hiba) {
konzol.log (hiba);
}
};
Visszatérés (
</div>
);
}
Ez a funkció használja Axios az API meghívásához amelyet a /api mappában hozott létre a fizetési munkamenet lekéréséhez.
Adjon hozzá egy fizetési gombot a return utasításhoz, amelyre kattintva elindítja a handleCheckout funkciót.
A kosár oldalon a pénztári komponenst hívhatja.
A Stripe-ból történő átirányítások kezelése
A fizetési API-útvonalban definiált egy sikeres URL-t és egy megszakítási URL-t, amely csíkkal át kell irányítania a felhasználót, ha a folyamat sikeres vagy sikertelen. A törlési URL a /cancel útvonalra, míg a sikeres URL a /success útvonalra van leképezve. Adjon hozzá két siker nevű összetevőt a /pages mappához, és mégse az URL-ek kezeléséhez.
A pages/success.js fájlban adja hozzá a siker összetevőt.
exportalapértelmezettfunkcióSiker() {
Visszatérés<div>Sikeres fizetésdiv>;
}
A pages/cancel.js fájlban adja hozzá a mégse összetevőt.
exportalapértelmezettfunkcióMegszünteti() {
Visszatérés<div>Hiba történt a fizetés sorándiv>;
}Most a Stripe átirányít ezekre az oldalak bármelyikére a fizetés állapotától függően.
Ha a Next.js 13-at használja, tekintse meg ezt az oktatóanyagot hogyan működik az alkalmazásmappa a Next.js 13-ban a /pages mappából való váltáshoz.
További testreszabási lehetőségek a Checkout oldalhoz
A Stripe irányítópultján testreszabhatja a fizetési oldalt, hogy illeszkedjen a márkájához. Hozzáadhat logót, ikont, márkaszínt, kiemelő színt, és akár saját egyéni domaint is használhat. Ezenkívül a fizetési munkamenet létrehozásakor megadhatja a kívánt fizetési módokat, és megadhatja azt a nyelvet is, amelyet a Stripe megjelenítenie kell a fizetési oldalon. Mindezek a lehetőségek lehetővé teszik a fizetési folyamat testreszabását az alkalmazásának megfelelően.
Miért használja a Stripe-ot a fizetési oldalon?
Bár létrehozhatja saját fizetésfeldolgozó szolgáltatását, általában jobb megoldás egy olyan fizetési platform, mint a Stripe. A Stripe Checkout segít csökkenteni a fejlesztési időt, így rövid időn belül megkezdheti a fizetések elfogadását.
Ezenkívül további funkciókat is kap, mint például a PCI-megfelelőség, a kosár-visszaállítás, a kedvezmények, valamint a szállítási információk gyűjtésének és az utólagos számlák küldésének lehetősége.
