Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Stripe on maksete töötlemise platvorm, mis võimaldab lisada veebisaidile eelnevalt koostatud kassalehe ning vastu võtta ja hallata veebimakseid. See on laialt populaarne tänu oma kasutusmugavusele, ulatuslikule dokumentatsioonile, kohalike maksete toele, kohandamis- ja kaubamärgivalikutele, tellimustele, arveldamisele ja pettuste ennetamisele.

Stripe'i abil saate vastu võtta makseid erinevatest allikatest, sealhulgas krediit- ja deebetkaartidelt, Apple Paylt ja Google Paylt.

Stripe Checkouti lisamine rakendusele Next.js

Saate integreerida Stripe Checkouti erinevate tehnoloogiatega loodud rakendustega, sealhulgas Next.js.

See õpetus eeldab, et olete seadistanud Next.js e-kaubanduse saidi, ja annab ainult juhendi, kuidas lisada saidile Stripe kassa.

Stripe'i konto seadistamine ja API võtmete hankimine

Stripe checkouti kasutamiseks peate looma Stripe'i konto ja hankima API võtmed. API võtmed koosnevad avaldatavast võtmest ja salajasest võtmest, mida kasutate oma rakendusest Stripe API-le saadetavate taotluste autentimiseks.

Stripe'i konto seadistamiseks järgige neid samme.

  1. Mine lehele Triibuline veebisait ja klõpsake nuppu "Registreeru".
  2. Sisestage oma e-posti aadress, täisnimi, riik ja parool ning klõpsake nuppu "Loo konto".
  3. Kinnitage oma e-posti aadress, järgides Stripe'i teile saadetavas meilis olevaid juhiseid.
  4. Konto seadistamise protsessi lõpuleviimiseks klõpsake triipude armatuurlaual nuppu "Aktiveeri maksed" ja vastake otse küsimustele. Need küsimused võivad puudutada ettevõtte nime, aadressi ja pangateavet. Arenduse eesmärgil kasutage testrežiimi.
  5. Kopeerige API-võtmed vahekaardilt „Arendajad” oma rakenduse kaustas olevasse env-faili.

Nüüd pääsete API-võtmete abil Stripe'i kontole juurde.

Stripe npm paketi installimine

Käivitage see käsk paketi Stripe npm installimiseks.

npm installi riba

Importige Stripe'i teek oma kassakomponendi lehele.

importida Triip alates'triip';

Looge API kaustas uus fail nimega checkout-session.js. Initsialiseerige Stripe'i objekt API-võtmetega, mille saite Stripe'i armatuurlaualt.

konst triip = nõuda('triip')(protsess.env. STRIPE_SECRET_KEY);

Käitleja funktsioonis hankige üksused kehaparameetrite järgi kontrollimiseks.

eksportidavaikimisiasünkrfunktsioonikäitleja(req, res) {
konst { item } = req.body;
};

Looge töötleja funktsioonile kassaseansi objekt ja edastage üksused.

konst seanss = ootama stripe.checkout.sessions.create({
 payment_method_types: ['kaart'],
 line_items: [
 ese,
 ],
 režiim: 'makse',
 edu_url: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

Siin on, mida tähendavad seansiobjektile edastatavad sõlmed:

  • makseviisi_tüübid: makseviisi tüübid, mida kassasseanss aktsepteerib. Sirvige saadaolevate makseviiside loendit Triibuline dokumentatsioon.
  • rida_üksused: kaupade loend, mida kasutaja ostab.
  • režiimis: Checkout Sessioni režiim. Kui kassas olevad kaubad sisaldavad vähemalt ühte korduvat kaubapassi "tellimust".
  • edu_url: URL Stripe suunab kasutajad ümber, kui makse õnnestub
  • cancel_url: URL Stripe suunab kasutajad ümber, kui nad makse tühistavad.

Kokkuvõttes peaks fail checkout-session.js välja nägema järgmine:

eksportidavaikimisiasünkrfunktsioonikäitleja(req, res) {
kui (nõutav meetod 'POSTI') {
konst { cart } = req.body;
proovi {
konst seanss = ootama stripe.checkout.sessions.create({
 line_items: [
 käru
 ],
 režiim: 'makse',
 edu_url: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, session.url);
 } püüda (err) {
 res.status (err.statusCode || 500.json (err.message);
 }
 } muidu {
 res.setHeader('Lubama', 'POSTI');
 res.status(405).lõpp("Meetod pole lubatud");
 }
}

See funktsioon kasutab nüüd kasutajate ümbersuunamiseks funktsiooni try/catch, kui maksmisel ilmneb tõrge. Nüüd, kui olete loonud API-marsruudi, mis töötleb makset, on järgmiseks sammuks kassaprotsessi haldamiseks kassakomponendi loomine.

Vaadake seda postitust aadressil API marsruutide loomine rakenduses Next.js Next.js API marsruutide põhjalikuma selgituse saamiseks.

Checkouti komponendi loomine

Kassa töötlemiseks peate installima @stripe/stripe-js teegi, kasutades NPM-i.

npm installi @stripe/stripe-js

@stripe/stripe-js teek on laadimisutiliit, mis aitab teil laadida Stripe.js eksemplari.

Kui installimine on lõppenud, looge kataloogi /components uus fail nimega /components/checkout.js. Seejärel kutsuge @stripe/stripe-js teegist funktsioon loadstripe, edastades argumendina avaldatava võtme.

importida { loadStripe } alates"@stripe/stripe-js";
konst stripePromise = loadStripe(
 protsess.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() tagastab lubaduse, mis laheneb vastloodud Stripe'i objektiga, kui Stripe.js on laaditud.

Järgmisena lisage komponendis kassasseansi loomiseks funktsioon.

eksportidavaikimisifunktsiooniKassasse({cart}) {
konst käepideCheckout = asünkr () => {
proovi {
konst triip = ootama triipPromise;
konst checkoutSession = ootama axios.post("/api/checkout-session", {
 käru,
 });


konst tulemus = ootama stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
kui (result.error) {
 hoiatus (result.error.message);
 }
 } püüda (viga) {
konsool.log (viga);
 }
 };
tagasi (


 </div>
 );
}

See funktsioon kasutab Axios API kutsumiseks mille lõite kassasseansi toomiseks /api kaustas.

Lisage tagastuslausesse kassanupp, mis käivitab klõpsamisel funktsiooni handleCheckout.

Saate helistada ostukorvi lehel olevale kassakomponendile.

Stripe'i ümbersuunamiste käsitlemine

Checkout API marsruudil määrasite eduka URL-i ja tühistamise URL-i, mille riba peaks kasutaja ümber suunama, kui protsess on edukas või ebaõnnestub. Tühistamise URL seostub /tühista marsruudiga, edukas URL aga /edu marsruudiga. Lisage kausta /pages kaks komponenti nimega Edu ja tühistage nende URL-ide käsitlemiseks.

Lisage failis pages/success.js edu komponent.

eksportidavaikimisifunktsiooniEdu() {
tagasi<div>Check out õnnestusdiv>;
}

Lisage lehele pages/cancel.js tühistamise komponent.

eksportidavaikimisifunktsiooniTühista() {
tagasi<div>Kontrollimisel ilmnes vigadiv>;
}

Nüüd suunab Stripe olenevalt kassaolekust ümber ühele neist lehtedest.

Kui kasutate versiooni Next.js 13, vaadake seda õpetust kuidas rakenduste kaust failis Next.js 13 töötab kaustast /pages lülitumiseks.

Täiendavad kohandamisvalikud kassalehe jaoks

Stripe'i armatuurlaual saate kohandada kassalehte, et see vastaks teie kaubamärgi välimusele. Saate lisada logo, ikooni, brändi värvi, aktsentvärvi ja isegi kasutada oma kohandatud domeeni. Lisaks saate kassaseansi loomisel lisada eelistatud makseviise ja määrata ka keele, mida Stripe kassalehel kuvama peaks. Kõik need valikud võimaldavad teil kohandada kassaprotsessi vastavalt oma rakendusele.

Miks kasutada kassalehe jaoks Stripe'i?

Kuigi saate luua oma kassatöötlusteenuse, on makseplatvormi, nagu Stripe, kasutamine tavaliselt parem valik. Stripe Checkout aitab teil vähendada arendusaega, võimaldades teil alustada maksete vastuvõtmist lühikese aja jooksul.

Lisaks saate lisafunktsioone, nagu PCI-vastavus, ostukorvi taastamine, allahindlusvõimalused ning võimalus koguda tarneteavet ja saata järelmaksu arveid.