Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Stripe yra mokėjimų apdorojimo platforma, leidžianti į svetainę įtraukti iš anksto sukurtą atsiskaitymo puslapį ir priimti bei valdyti mokėjimus internetu. Jis yra labai populiarus dėl paprasto naudojimo, išsamios dokumentacijos, vietinių mokėjimų palaikymo, tinkinimo ir prekės ženklo parinkčių, prenumeratos, sąskaitų faktūrų išrašymo ir sukčiavimo prevencijos.

Naudodami Stripe galite priimti mokėjimus iš įvairių šaltinių, įskaitant kredito ir debeto korteles, Apple Pay ir Google Pay.

Stripe Checkout įtraukimas į Next.js programą

Galite integruoti „Stripe Checkout“ su programomis, sukurtomis naudojant skirtingas technologijas, įskaitant „Next.js“.

Šioje mokymo programoje daroma prielaida, kad esate sukūrę Next.js el. prekybos svetainę, ir pateikiamas tik vadovas, kaip į svetainę įtraukti Stripe patikrą.

„Stripe“ paskyros nustatymas ir API raktų gavimas

instagram viewer

Norėdami naudoti „Stripe“ patikrą, turite sukurti „Stripe“ paskyrą ir gauti API raktus. API raktus sudaro skelbiamas raktas ir slaptasis raktas, kuriuos naudosite autentifikuodami užklausas iš savo programos į Stripe API.

Norėdami sukurti „Stripe“ paskyrą, atlikite šiuos veiksmus:

  1. Eikite į Stripe svetainė ir spustelėkite mygtuką „Registruotis“.
  2. Įveskite savo el. pašto adresą, vardą, pavardę, šalį ir slaptažodį ir spustelėkite mygtuką „Sukurti paskyrą“.
  3. Patvirtinkite savo el. pašto adresą vadovaudamiesi instrukcijomis el. laiške, kurį Stripe jums atsiųs.
  4. Juostelių prietaisų skydelyje spustelėkite „Suaktyvinti mokėjimus“ ir atsakykite į klausimus, kad užbaigtumėte paskyros sąrankos procesą. Šie klausimai gali būti susiję su įmonės pavadinimu, adresu ir banko informacija. Kūrimo tikslais naudokite bandymo režimą.
  5. Nukopijuokite API raktus iš skirtuko „Kūrėjai“ į .env failą programos aplanke.

Dabar galėsite pasiekti Stripe paskyrą naudodami API raktus.

„Stripe npm“ paketo diegimas

Vykdykite šią komandą, kad įdiegtumėte Stripe npm paketą.

npm įdiegti juostą

Importuokite „Stripe“ biblioteką į patikros komponento puslapį.

importuoti Juostelė iš'juostele';

API aplanke sukurkite naują failą pavadinimu checkout-session.js. Inicijuokite Stripe objektą naudodami API raktus, kuriuos gavote iš Stripe prietaisų skydelio.

konst juostelė = reikalauti('juostele')(procesas.env. STRIPE_SECRET_KEY);

Naudodamiesi tvarkyklės funkcija, gaukite elementus, kuriuos reikia patikrinti pagal kūno parametrus.

eksportuotinumatytasasyncfunkcijaprižiūrėtojas(req, res) {
konst { elementas } = req.body;
};

Sukurkite patikros seanso objektą tvarkyklės funkcijai ir perduokite elementus.

konst sesija = laukti stripe.checkout.sessions.create({
 payment_method_types: ["kortelė"],
 line_items: [
 daiktas,
 ],
 režimas: "mokėjimas",
 sėkmės_url: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

Štai ką reiškia mazgai, kuriuos perduodate seanso objektui:

  • mokėjimo_būdo_tipai: mokėjimo metodo tipai, kuriuos priima atsiskaitymo sesija. Naršykite galimų mokėjimo būdų sąrašą Juostinė dokumentacija.
  • eilutės_elementai: prekių, kurias vartotojas perka, sąrašas.
  • režimu: Patikrinimo seanso režimas. Jei atsiskaitymo prekėse yra bent vienas pasikartojančių prekių abonemento „prenumerata“.
  • sėkmės_url: URL juostelė nukreips naudotojus, jei mokėjimas bus sėkmingas
  • cancel_url: URL juostelė nukreips naudotojus, jei jie atšauks mokėjimą.

Iš viso checkout-session.js failas turėtų atrodyti taip:

eksportuotinumatytasasyncfunkcijaprižiūrėtojas(req, res) {
jeigu (req.metod „PASKELBTI“) {
konst {krepšelis} = req.body;
bandyti {
konst sesija = laukti stripe.checkout.sessions.create({
 line_items: [
 krepšelis
 ],
 režimas: "mokėjimas",
 sėkmės_url: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, sesija.url);
 } sugauti (err) {
 res.status (err.statusCode || 500.json (err.message);
 }
 } Kitas {
 res.setHeader('Leisti', „PASKELBTI“);
 res.status(405).galas('Metodas neleidžiamas');
 }
}

Ši funkcija dabar naudoja try/catch, kad nukreiptų vartotojus, kai atsiskaitymo metu įvyksta klaida. Dabar, kai sukūrėte API maršrutą, kuris apdoros mokėjimą, kitas veiksmas yra sukurti patikros komponentą, kuris tvarkys atsiskaitymo procesą.

Peržiūrėkite šį įrašą API maršrutų kūrimas Next.js Norėdami gauti išsamesnį Next.js API maršrutų paaiškinimą.

Patikros komponento kūrimas

Norėdami apdoroti atsiskaitymą, turite įdiegti @stripe/stripe-js biblioteką naudodami NPM.

npm įdiegti @stripe/stripe-js

@stripe/stripe-js biblioteka yra įkėlimo programa, kuri padės įkelti Stripe.js egzempliorių.

Baigę diegti, sukurkite naują failą /components kataloge pavadinimu /components/checkout.js. Tada iškvieskite funkciją „loadstripe“ iš @stripe/stripe-js bibliotekos, kaip argumentą perduodant publikuojamą raktą.

importuoti { loadStripe } iš„@stripe/stripe-js“;
konst stripePromise = loadStripe(
 procesas.aplink. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() grąžina pažadą, kuris išsprendžiamas naudojant naujai sukurtą Stripe objektą, kai Stripe.js įkeliamas.

Tada pridėkite funkciją, kad sukurtumėte patikros seansą komponente.

eksportuotinumatytasfunkcijaPatikra({krepšelis}) {
konst rankenaCheckout = async () => {
bandyti {
konst juostelė = laukti stripePažadas;
konst CheckoutSession = laukti axios.post("/api/checkout-session", {
 krepšelis,
 });


konst rezultatas = laukti stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
jeigu (rezultatas.klaida) {
 įspėjimas (result.error.message);
 }
 } sugauti (klaida) {
konsolė.log (klaida);
 }
 };
grąžinti (


 </div>
 );
}

Ši funkcija naudoja Axios iškviesti API sukūrėte aplanke /api, kad gautumėte atsiskaitymo seansą.

Į grąžinimo teiginį įtraukite atsiskaitymo mygtuką, kuris spustelėjus suaktyvins HandelCheckout funkciją.

Krepšelio puslapyje galite paskambinti į kasos komponentą.

Peradresavimų iš Stripe tvarkymas

Patikrinimo API maršrute apibrėžėte sėkmingą URL ir atšaukimo URL, kuris turėtų nukreipti vartotoją, kai procesas sėkmingas arba nepavyksta. Atšaukimo URL susiejamas su /cancel maršrutu, o sėkmės URL susieja su /sėkmės maršrutu. Pridėkite du komponentus aplanke /pages, pavadintą sėkmingai, ir atšaukite, kad tvarkytumėte šiuos URL.

Puslapiuose/success.js pridėkite sėkmės komponentą.

eksportuotinumatytasfunkcijaSėkmė() {
grąžinti<div>Atsiskaityti sėkmingaidiv>;
}

Puslapiuose/cancel.js pridėkite atšaukimo komponentą.

eksportuotinumatytasfunkcijaAtšaukti() {
grąžinti<div>Atsiskaitant įvyko klaidadiv>;
}

Dabar „Stripe“ nukreips į bet kurį iš šių puslapių, atsižvelgdama į atsiskaitymo būseną.

Jei naudojate Next.js 13, žr. šią mokymo programą kaip veikia programos aplankas Next.js 13 norėdami perjungti iš /pages aplanko.

Papildomos patikros puslapio tinkinimo parinktys

„Stripe“ prietaisų skydelyje galite tinkinti atsiskaitymo puslapį, kad jis atitiktų jūsų prekės ženklo išvaizdą. Galite pridėti logotipą, piktogramą, prekės ženklo spalvą, akcento spalvą ir netgi naudoti savo tinkintą domeną. Be to, kurdami atsiskaitymo seansą, galite pridėti pageidaujamus mokėjimo būdus ir nurodyti kalbą, kurią Stripe turėtų rodyti atsiskaitymo puslapyje. Visos šios parinktys leidžia pritaikyti atsiskaitymo procesą pagal jūsų prašymą.

Kodėl atsiskaitymo puslapyje naudoti Stripe?

Nors galite sukurti savo atsiskaitymo apdorojimo paslaugą, naudoti mokėjimo platformą, pvz., „Stripe“, paprastai yra geresnis pasirinkimas. „Stripe Checkout“ padeda sutrumpinti kūrimo laiką, todėl galite pradėti priimti mokėjimus per trumpą laiką.

Be to, jūs gaunate papildomų funkcijų, pvz., PCI atitiktį, krepšelio atkūrimą, nuolaidų galimybes ir galimybę rinkti pristatymo informaciją ir siųsti atidėto mokėjimo sąskaitas faktūras.