Stripe ir maksājumu apstrādes platforma, kas ļauj vietnei pievienot iepriekš izveidotu norēķinu lapu un pieņemt un pārvaldīt tiešsaistes maksājumus. Tas ir plaši populārs, pateicoties tā lietošanas vienkāršībai, plašajai dokumentācijai, vietējo maksājumu atbalstam, pielāgošanas un zīmola veidošanas iespējām, abonementiem, rēķinu izrakstīšanai un krāpšanas novēršanai.
Izmantojot Stripe, varat pieņemt maksājumus no dažādiem avotiem, tostarp kredītkartēm un debetkartēm, Apple Pay un Google Pay.
Stripe Checkout pievienošana lietojumprogrammai Next.js
Stripe checkout var integrēt ar lietojumprogrammām, kas izveidotas ar dažādām tehnoloģijām, tostarp Next.js.
Šajā apmācībā tiek pieņemts, ka esat iestatījis Next.js e-komercijas vietni, un tajā ir sniegti tikai norādījumi par to, kā vietnei pievienot Stripe izrakstīšanos.
Stripe konta iestatīšana un API atslēgu izgūšana
Lai izmantotu Stripe izrakstīšanos, jums ir jāizveido Stripe konts un jāiegūst API atslēgas. API atslēgas sastāv no publicējamās atslēgas un slepenās atslēgas, ko izmantosit, lai autentificētu pieprasījumus no savas lietojumprogrammas uz Stripe API.
Lai iestatītu Stripe kontu, veiciet šīs darbības:
- Dodieties uz Stripe vietne un noklikšķiniet uz pogas "Reģistrēties".
- Ievadiet savu e-pastu, pilnu vārdu, valsti un paroli un noklikšķiniet uz pogas "Izveidot kontu".
- Apstipriniet savu e-pastu, izpildot norādījumus e-pastā, ko Stripe jums nosūtīs.
- Svītru informācijas panelī noklikšķiniet uz “Aktivizēt maksājumus” un atbildiet uz uzdotajiem jautājumiem, lai pabeigtu konta iestatīšanas procesu. Šie jautājumi var būt par uzņēmuma nosaukumu, adresi un bankas informāciju. Izstrādes nolūkos izmantojiet testa režīmu.
- Kopējiet API atslēgas no cilnes “Izstrādātāji” uz .env failu savas lietotnes mapē.
Tagad varēsiet piekļūt Stripe kontam, izmantojot API atslēgas.
Stripe npm pakotnes instalēšana
Palaidiet šo komandu, lai instalētu Stripe npm pakotni.
npm instalējiet svītru
Importējiet Stripe bibliotēku savā norēķinu komponenta lapā.
imports Svītra no'svītra';
API mapē izveidojiet jaunu failu ar nosaukumu checkout-session.js. Inicializējiet Stripe objektu ar API atslēgām, kuras izguvāt no Stripe informācijas paneļa.
konst svītra = pieprasīt('svītra')(process.env. STRIPE_SECRET_KEY);
Apdarinātāja funkcijā pārbaudiet vienumus no ķermeņa parametriem.
eksportētnoklusējumaasinhronāfunkcijuapdarinātājs(req, res) {
konst { item } = req.body;
};
Izveidojiet norēķinu sesijas objektu apstrādātāja funkcijai un nododiet preces.
konst sesija = gaidīt stripe.checkout.sessions.create({
payment_method_types: ['karte'],
line_items: [
lieta,
],
režīms: 'maksājums',
success_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
Lūk, ko nozīmē mezgli, kurus nododat sesijas objektam:
- maksājuma_metodes_veidi: maksājuma veida veidi, ko pieņem norēķināšanās sesija. Pārlūkojiet pieejamo maksājuma veidu sarakstu vietnē Svītru dokumentācija.
- line_items: to preču saraksts, kuras lietotājs pērk.
- režīmā: Checkout sesijas režīms. Ja norēķināšanās vienībās ir iekļauts vismaz viens periodiskas preču kartes “abonements”.
- veiksmes_url: URL Stripe novirzīs lietotājus, ja maksājums būs veiksmīgs
- cancel_url: URL Stripe novirzīs lietotājus, ja viņi atcels maksājumu.
Kopumā failam checkout-session.js vajadzētu izskatīties šādi:
eksportētnoklusējumaasinhronāfunkcijuapdarinātājs(req, res) {
ja (req.metode 'POST') {
konst {grozs} = req.body;mēģināt {
konst sesija = gaidīt stripe.checkout.sessions.create({
line_items: [
ratiņi
],
režīms: 'maksājums',
success_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, sesija.url);
} noķert (kļūda) {
res.status (err.statusCode || 500.json (err.message);
}
} cits {
res.setHeader('Atļaut', 'POST');
res.status(405.end("Metode nav atļauta");
}
}
Šī funkcija tagad izmanto try/catch, lai novirzītu lietotājus, ja norēķināšanās laikā rodas kļūda. Tagad, kad esat izveidojis API maršrutu, kas apstrādās maksājumu, nākamais solis ir izveidot izrakstīšanās komponentu, lai apstrādātu norēķinu procesu.
Apskatiet šo ziņu vietnē API maršrutu izveide programmā Next.js lai iegūtu padziļinātu Next.js API maršrutu skaidrojumu.
Checkout komponenta izveide
Lai apstrādātu norēķināšanos, jums ir jāinstalē @stripe/stripe-js bibliotēka, izmantojot NPM.
npm instalējiet @stripe/stripe-js
@stripe/stripe-js bibliotēka ir ielādes utilīta, kas palīdzēs ielādēt Stripe.js gadījumu.
Kad instalēšana ir pabeigta, direktorijā /components izveidojiet jaunu failu ar nosaukumu /components/checkout.js. Pēc tam izsauciet funkciju loadstripe no @stripe/stripe-js bibliotēkas, nododot publicējamo atslēgu kā argumentu.
imports {loadStripe} no"@stripe/stripe-js";
konst stripePromise = loadStripe(
process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadstripe() atgriež solījumu, kas tiek atrisināts ar jaunizveidotu Stripe objektu, tiklīdz Stripe.js ir ielādēts.
Pēc tam pievienojiet funkciju, lai komponentā izveidotu izrakstīšanās sesiju.
eksportētnoklusējumafunkcijuIzrakstīties({cart}) {
konst rokturisCheckout = asinhronā () => {
mēģināt {
konst svītra = gaidīt svītraPromise;konst checkoutSession = gaidīt axios.post("/api/checkout-session", {
ratiņi,
});konst rezultāts = gaidīt stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
ja (rezultāts.kļūda) {
brīdinājums (result.error.message);
}
} noķert (kļūda) {
konsole.log (kļūda);
}
};
atgriezties (
</div>
);
}
Šī funkcija izmanto Axios izsaukt API izveidojāt mapē /api, lai izgūtu norēķināšanās sesiju.
Atgriešanas paziņojumā pievienojiet izrakstīšanās pogu, kas, noklikšķinot, aktivizēs handCheckout funkciju.
Jūs varat izsaukt norēķinu komponentu groza lapā.
Pārvirzīšanas no Stripe apstrāde
Izrakstīšanās API maršrutā jūs definējāt veiksmīgu URL un atcelšanas URL, kam ir jānovirza lietotājs, ja process ir veiksmīgs vai neizdodas. Atcelšanas URL tiek kartēts uz /cancel maršrutu, bet veiksmes URL tiek kartēts uz /veiksmes maršrutu. Pievienojiet divus komponentus mapē /pages ar nosaukumu panākumi un atceliet, lai apstrādātu šos URL.
Lapā pages/success.js pievienojiet veiksmes komponentu.
eksportētnoklusējumafunkcijuPanākumi() {
atgriezties<div>Izrakstīties veiksmīgidiv>;
}
Lapā pages/cancel.js pievienojiet atcelšanas komponentu.
eksportētnoklusējumafunkcijuAtcelt() {
atgriezties<div>Izrakstīšanās laikā radās kļūdadiv>;
}Tagad Stripe novirzīs uz kādu no šīm lapām atkarībā no izrakstīšanās statusa.
Ja izmantojat Next.js 13, skatiet šo pamācību kā lietotņu mape darbojas vietnē Next.js 13 lai pārslēgtos no mapes /pages.
Papildu pielāgošanas opcijas norēķinu lapai
Stripe informācijas panelī varat pielāgot norēķinu lapu, lai tā atbilstu jūsu zīmola izskatam. Varat pievienot logotipu, ikonu, zīmola krāsu, akcenta krāsu un pat izmantot savu pielāgoto domēnu. Turklāt, veidojot norēķinu sesiju, varat pievienot vēlamos maksājuma veidus, kā arī norādīt valodu, kas Stripe jāparāda norēķinu lapā. Visas šīs opcijas ļauj pielāgot izrakstīšanās procesu atbilstoši jūsu pieteikumam.
Kāpēc norēķinu lapai izmantot Stripe?
Lai gan jūs varat izveidot savu norēķinu apstrādes pakalpojumu, parasti labāks risinājums ir izmantot tādu maksājumu platformu kā Stripe. Stripe checkout palīdz samazināt izstrādes laiku, ļaujot sākt pieņemt maksājumus īsā laikā.
Turklāt jūs saņemat papildu funkcijas, piemēram, PCI atbilstību, groza atkopšanu, atlaižu iespējas un iespēju apkopot piegādes informāciju un nosūtīt pēcapmaksas rēķinus.
