Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Stripe je platforma na spracovanie platieb, ktorá vám umožňuje pridať na webovú stránku vopred vytvorenú stránku pokladne a prijímať a spravovať online platby. Je veľmi populárny vďaka svojmu jednoduchému použitiu, rozsiahlej dokumentácii, podpore miestnych platieb, možnostiam prispôsobenia a brandingu, predplatným, fakturácii a predchádzaniu podvodom.

Pomocou Stripe môžete prijímať platby z rôznych zdrojov vrátane kreditných a debetných kariet, Apple Pay a Google Pay.

Pridanie služby Stripe Checkout do aplikácie Next.js

Pokladňu Stripe môžete integrovať s aplikáciami vytvorenými pomocou rôznych technológií vrátane Next.js.

Tento tutoriál predpokladá, že máte nastavenú stránku elektronického obchodu Next.js, a poskytuje iba návod, ako na stránku pridať pokladňu Stripe.

Nastavenie účtu Stripe a získanie kľúčov API

Ak chcete použiť pokladňu Stripe, musíte si vytvoriť účet Stripe a získať kľúče API. Kľúče API pozostávajú z publikovateľného kľúča a tajného kľúča, ktoré použijete na overenie požiadaviek z vašej aplikácie na Stripe API.

instagram viewer

Ak chcete nastaviť účet Stripe, postupujte podľa týchto krokov:

  1. Choďte na Web Stripe a kliknite na tlačidlo „Zaregistrovať sa“.
  2. Zadajte svoj e-mail, celé meno, krajinu a heslo a kliknite na tlačidlo „Vytvoriť účet“.
  3. Overte svoj e-mail podľa pokynov v e-maile, ktorý vám Stripe pošle.
  4. Na paneli s pruhmi kliknite na „Aktivovať platby“ a odpovedzte na otázky, aby ste dokončili proces nastavenia účtu. Tieto otázky sa môžu týkať obchodného názvu, adresy a bankových informácií. Na vývojové účely použite testovací režim.
  5. Skopírujte kľúče API z karty Vývojári do súboru .env v priečinku aplikácie.

Teraz budete mať prístup k účtu Stripe pomocou kľúčov API.

Inštalácia balíka Stripe npm

Spustite tento príkaz na inštaláciu balíka Stripe npm.

npm inštalačný prúžok

Importujte knižnicu Stripe na stránku komponentu pokladne.

importovať Stripe od'pruh';

V priečinku API vytvorte nový súbor s názvom checkout-session.js file. Inicializujte objekt Stripe pomocou kľúčov API, ktoré ste získali z panela Stripe.

konšt prúžok = vyžadovať('pruh')(process.env. STRIPE_SECRET_KEY);

Vo funkcii handler získajte položky na kontrolu z parametrov tela.

exportpredvolenáasyncfunkciupsovod(req, req) {
konšt { item } = req.body;
};

Vytvorte objekt relácie pokladne do funkcie obsluhy a odovzdajte položky.

konšt relácia = čakať stripe.checkout.sessions.create({
 typy_spôsobov_platby: ['karta'],
 riadkové_položky: [
 položka,
 ],
 režim: 'platba',
 success_url: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

Tu je to, čo znamenajú uzly, ktoré odovzdávate objektu relácie:

  • typy_spôsobov_platby: Typy spôsobu platby, ktoré relácia platby akceptuje. Prezrite si zoznam dostupných spôsobov platby v Pásová dokumentácia.
  • riadkové_položky: Zoznam položiek, ktoré používateľ kupuje.
  • režim: Režim relácie pokladne. Ak položky pokladne obsahujú aspoň jednu opakujúcu sa položku, prejdite na „predplatné“.
  • success_url: Pruh adresy URL presmeruje používateľov, ak bude platba úspešná
  • cancel_url: Pruh adresy URL presmeruje používateľov, ak zrušia platbu.

Celkovo by súbor checkout-session.js mal vyzerať takto:

exportpredvolenáasyncfunkciupsovod(req, req) {
ak (požadovaná metóda 'POST') {
konšt { košík } = req.body;
skúste {
konšt relácia = čakať stripe.checkout.sessions.create({
 riadkové_položky: [
 vozík
 ],
 režim: 'platba',
 success_url: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, session.url);
 } chytiť (chyba) {
 res.status (err.statusCode || 500.json (chyba.sprava);
 }
 } inak {
 res.setHeader('Povoliť', 'POST');
 res.status(405).koniec('Metóda nie je povolená');
 }
}

Táto funkcia teraz používa pokus/úlovok na presmerovanie používateľov, keď sa počas platby vyskytne chyba. Teraz, keď ste vytvorili cestu API, ktorá bude spracovávať platbu, ďalším krokom je vytvorenie komponentu pokladne na spracovanie procesu platby.

Pozrite si tento príspevok na vytváranie trás API v Next.js pre podrobnejšie vysvetlenie trás Next.js API.

Vytvorenie komponentu Checkout

Na spracovanie platby je potrebné nainštalovať knižnicu @stripe/stripe-js pomocou NPM.

npm install @stripe/stripe-js

Knižnica @stripe/stripe-js je nástroj na načítanie, ktorý vám pomôže načítať inštanciu Stripe.js.

Po dokončení inštalácie vytvorte nový súbor v adresári /components s názvom /components/checkout.js. Potom zavolajte funkciu loadstripe z knižnice @stripe/stripe-js a odovzdajte publikovateľný kľúč ako argument.

importovať { loadStripe } od'@stripe/stripe-js';
konšt stripePromise = loadStripe(
 process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() vráti prísľub, ktorý sa vyrieši s novovytvoreným objektom Stripe po načítaní súboru Stripe.js.

Ďalej pridajte funkciu na vytvorenie relácie pokladnice v komponente.

exportpredvolenáfunkciuOdhlásiť sa({košík}) {
konšt rukoväťPokladňa = async () => {
skúste {
konšt prúžok = čakať stripePromise;
konšt checkoutSession = čakať axios.post("/api/checkout-session", {
 vozík,
 });


konšt výsledok = čakať stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
ak (result.error) {
 upozornenie (vysledok.chyba.sprava);
 }
 } chytiť (chyba) {
konzoly.log (chyba);
 }
 };
vrátiť (


 </div>
 );
}

Táto funkcia využíva Axios na volanie rozhrania API ktorý ste vytvorili v priečinku /api na získanie relácie pokladnice.

Do príkazu na vrátenie pridajte tlačidlo platby, ktoré po kliknutí spustí funkciu handleCheckout.

Komponent pokladne môžete zavolať na stránke košíka.

Spracovanie presmerovaní z pruhu

V trase API pokladne ste definovali úspešnú webovú adresu a zrušovaciu webovú adresu, ktorá by mala presmerovať používateľa, keď je proces úspešný alebo zlyhá. Adresa URL na zrušenie sa mapuje na cestu /cancel, zatiaľ čo úspešná adresa URL sa mapuje na cestu /success. Pridajte dva komponenty do priečinka /pages s názvom success a zrušte na spracovanie týchto adries URL.

Do pages/success.js pridajte komponent úspechu.

exportpredvolenáfunkciuÚspech() {
vrátiť<div>Úspešná platbadiv>;
}

Do pages/cancel.js pridajte komponent cancel.

exportpredvolenáfunkciuZrušiť() {
vrátiť<div>Počas platby sa vyskytla chybadiv>;
}

Teraz sa Stripe presmeruje na niektorú z týchto stránok v závislosti od stavu platby.

Ak používate Next.js 13, pozrite si tento návod ako funguje priečinok aplikácie v Next.js 13 na prepnutie z priečinka /pages.

Ďalšie možnosti prispôsobenia pre stránku pokladne

Na paneli Stripe si môžete prispôsobiť stránku pokladne tak, aby zodpovedala vzhľadu vašej značky. Môžete pridať logo, ikonu, farbu značky, farbu zvýraznenia a dokonca použiť svoju vlastnú doménu. Okrem toho pri vytváraní relácie pokladne môžete pridať spôsoby platby, ktoré uprednostňujete, a tiež určiť jazyk, v ktorom sa má Stripe zobrazovať na stránke pokladne. Všetky tieto možnosti vám umožňujú prispôsobiť proces platby tak, aby vyhovoval vašej aplikácii.

Prečo používať Stripe pre stránku s pokladňou?

Aj keď si môžete vytvoriť svoju vlastnú službu spracovania pokladne, použitie platobnej platformy ako Stripe je zvyčajne lepšou voľbou. Stripe pokladňa vám pomôže skrátiť čas vývoja a umožní vám začať prijímať platby v krátkom čase.

Okrem toho získate ďalšie funkcie, ako je súlad s PCI, obnovenie košíka, možnosti zliav a možnosť zhromažďovať informácie o zásielke a odosielať faktúry po zaplatení.