‫Istruttore: In questa lezione impareremo
‫come elaborare i pagamenti con lo stripe, sul
‫front-end ogni volta che un utente fa clic su un pulsante.
‫E per iniziare, configuriamolo con quel pulsante in modo che
‫appaia solo ogni volta che un utente ha
‫effettivamente effettuato l'accesso.
‫Quindi qui nella pagina dei
‫dettagli del tour, in questo momento
‫abbiamo un utente connesso, e quindi quel pulsante dice prenota
‫tour ora, ma dovrebbe essere
‫così solo quando c'è un utente
‫attualmente connesso,
‫e in caso contrario, ci reindirizzerebbe alla pagina di accesso.
‫Va bene?
‫Quindi implementiamolo nel modello del tour.
‫E quindi è proprio qui, quindi
‫questo è questo pulsante.
‫Bene?
‫Ora, se al momento c'è un
‫utente connesso, significa che abbiamo accesso alla variabile
‫utente, e quindi possiamo fare se l'utente è ben oltre questo.
‫E se non c'è un utente, altrimenti, beh, allora
‫vogliamo semplicemente visualizzare un pulsante, che ci porta
‫alla pagina di accesso.
‫E quindi, accedi per prenotare
‫il tour, e questo dovrebbe essere in realtà
‫un collegamento, quindi abbiamo
‫bisogno di un elemento A per l'ancora.
‫Specifichiamo quindi anche la proprietà hf, che di nuovo
‫ci indirizzerà alla pagina di login,
‫va bene?
‫Ora qui dobbiamo anche aggiungere un ID, prenotare il
‫tour in modo che possiamo selezionarlo nel nostro JavaScript, e anche qualcosa
‫di molto importante,
‫è che dovremmo mettere l'ID del tour corrente
‫proprio qui in questo elemento, ok?
‫Perché è così importante?
‫Bene, ricorda come l'endpoint API che abbiamo appena creato.
‫Quindi questo qui ha bisogno dell'ID del tour, e
‫quindi quell'ID del tour deve provenire da qualche parte fondamentalmente, e quindi
‫in questo momento non abbiamo quell'informazione da
‫nessuna parte in questa pagina,
‫quindi la metteremo qui proprio su questo elemento, quindi
‫che allora o il file JavaScript può prenderlo da
‫qui e inviarlo insieme
‫alla richiesta al percorso della sessione di checkout, ok?
‫Quindi, proprio come abbiamo fatto qui con una
‫mappa, useremo un attributo di dati, e
‫quindi questo è data-,
‫e quindi praticamente qualunque nome di variabile
‫vogliamo definire.
‫E quindi questo è l'id del tour in questo caso.
‫Quindi tour. id, va bene?
‫Quindi dai
‫alla cassaforte e proviamolo ora.
‫Quindi ricaricate la pagina, e
‫prima di tutto
‫ispezioniamola per vedere se l'idea c'è
‫davvero, e infatti ci siamo.
‫E ora se ci disconnettiamo.
‫Allora vediamo cosa abbiamo, e infatti ora
‫c'è scritto, effettua il login
‫per prenotare il tour.
‫Ottimo, e facciamolo davvero.
‫Ora va bene?
‫E quindi ora creiamo uno script in
‫cui eseguiremo effettivamente la richiesta
‫ed elaboreremo il pagamento sul front-end.
‫E così, proprio come prima, sarà in pubblico,
‫quindi JavaScript.
‫Quindi un altro script qui.
‫E lo chiamerò striscia. js.
‫E ora qui abbiamo effettivamente
‫bisogno di accedere di nuovo alla libreria stripe, ma
‫quel pacchetto che abbiamo appena installato prima,
‫quindi ricorda quel pacchetto stripe MPM che abbiamo usato qui.
‫Quindi questo funziona solo per il back-end, e
‫quello che dobbiamo fare sul
‫front-end è includere effettivamente uno script nell'HTML, e poiché abbiamo solo bisogno
‫di quello script qui nella pagina del tour, lo faremo
‫proprio come noi fatto con lo script della casella della mappa.
‫Quindi questo, lo
‫metteremo qui in questo blocco di testa, va
‫bene?
‫Ora di quale script abbiamo effettivamente bisogno?
‫Bene, questo possiamo semplicemente ricavarlo dalla documentazione che abbiamo
‫già visto prima, e
‫spero che tu non l'abbia chiusa, va bene?
‫E così di nuovo questo qui spiega come utilizziamo
‫il prodotto di pagamento sia sul
‫client che sul server.
‫Quindi qui vediamo che abbiamo due
‫passaggi, prima la creazione della sessione di checkout sul
‫server, e quindi questo
‫è molto simile a quello che abbiamo fatto
‫prima nell'ultimo video, e quindi ora dobbiamo aggiungerlo anche al nostro front-end.
‫E quindi lo script di cui abbiamo bisogno è questo, va bene?
‫Quindi copiamolo e torniamo indietro.
‫E ora dobbiamo adattarci un po'.
‫Adesso giusto?
‫Quindi si trattava di esporre un oggetto stripe all'ambito globale,
‫quindi ora in questo file possiamo usarlo.
‫Quindi diciamo,
‫const stripe =, e
‫poi questo è quell'oggetto che
‫otteniamo dallo script che abbiamo appena incluso, e
‫poi qui abbiamo bisogno della nostra chiave pubblica, va bene?
‫Quindi abbiamo già usato la nostra chiave segreta sul
‫backend, ora è il momento di usare la nostra chiave pubblica.
‫Quindi torniamo alla dashboard, e in
‫realtà se sei nella documentazione, verrà
‫già mostrata qui per te, quindi questa
‫è una caratteristica
‫davvero interessante delle documentazioni stripe.
‫Quindi, ogni volta
‫che accedi, questa chiave che hai
‫qui è in realtà la tua chiave pubblica.
‫Ma se non sei su quella
‫pagina, puoi ovviamente anche ottenere la tua
‫chiave API andando alla homepage o
‫alla pagina degli sviluppatori,
‫proviamo effettivamente quella.
‫Quindi qui sulle chiavi
‫API, hai la tua chiave di prova pubblica proprio qui.
‫Quindi prendilo e
‫poi torniamo indietro e passiamolo qui.
‫E proprio
‫come prima, voglio disabilitare rapidamente eslint qui.
‫Va bene?
‫E ora creiamo finalmente una funzione,
‫che chiamerò book tour.
‫Va bene?
‫E quindi questa funzione avrà un ID tour.
‫E quindi l'ID del tour è quello che arriverà
‫proprio qui da questa interfaccia utente.
‫Quindi proprio da qui, ok?
‫Quindi, proprio come
‫prima, lo prenderemo da index. js
‫dove chiameremo anche questo libro Tour, ok?
‫Quindi molto simile a quello che abbiamo fatto prima.
‫Ad ogni modo, ora specifichiamo ancora una volta i
‫passi che faremo qui.
‫Quindi il primo passo è ottenere effettivamente
‫la sessione dal
‫server, ed è qui che entra in gioco questo percorso, ok?
‫Quindi questo è il punto in cui utilizzeremo
‫questo endpoint per portare davvero la nostra sessione di
‫checkout sul lato client.
‫Va bene?
‫Quindi controlla la sessione.
‫Dall'endpoint o dall'API non importa.
‫Fatto ciò come
‫secondo passaggio, utilizzeremo il
‫nostro oggetto stripe per creare fondamentalmente automaticamente il modulo di pagamento,
‫+ processo o diciamo + addebito, la
‫carta di credito per noi, ok?
‫Ed è proprio
‫così, quindi solo due semplici
‫passaggi e vedrai che in realtà sono piuttosto semplici.
‫Quindi memorizziamo la sessione in una variabile chiamata sessione.
‫E poi aspetteremo una richiesta HTTP, che ancora
‫una volta faremo con axios.
‫Bene?
‫Quindi devo prenderlo qui.
‫Quindi importa axios e ancora
‫una volta sto usando la sintassi del modulo ES6.
‫Ricordatelo, da axios.
‫Quindi, proprio come abbiamo fatto ad esempio nel login
‫o nelle impostazioni di aggiornamento, giusto?
‫Ora dobbiamo anche contrassegnare questa funzione come asincrona.
‫Va bene?
‫E poi in
‫axios, possiamo semplicemente passare l'URL, quando tutto
‫ciò che vogliamo fare è una semplice richiesta GET.
‫Va bene?
‫Quindi fino
‫a questo punto abbiamo sempre specificato
‫il metodo, l'URL ei dati, ma
‫ora stiamo solo eseguendo una richiesta GET,
‫quindi è molto più semplice.
‫Prendiamo l'URL qui, in
‫modo da non perdere altro tempo.
‫Allora ecco api/v1/bookings.
‫Quindi controlla la sessione.
‫E poi l'id del tour.
‫Quindi questo è
‫questo qui, che diventerà disfunzionale,
‫ok?
‫E diamo un'occhiata a
‫questo oggetto sessione nella nostra console,
‫solo per vedere se tutto
‫funziona, ok?
‫Quindi ora nel nostro indice. js fondamentalmente collegheremo
‫il pulsante verde con la disfunzione che abbiamo appena
‫creato all'interno di stripe. js.
‫Quindi importa.
‫Prenota tour da stripe.
‫Poi come sempre selezioniamo il nostro elemento dalla pagina web.
‫Quindi il pulsante del libro è = per documentare. ottieni l'elemento per ID e l'ID
‫da ricordare è, credo che
‫prenota il tour.
‫Quindi sì,
‫questo è l'ID che abbiamo appena aggiunto prima dell'ID del libro.
‫E così ora possiamo aggiungere quel gestore di eventi ad esso.
‫Quindi, se c'è un pulsante per prenotare,
‫allora bookBtn. addeventlistener, in
‫attesa di un clic, abbiamo
‫bisogno anche dell'evento, e ora dobbiamo ottenere
‫l'ID del tour da quel pulsante, quindi questo è
‫tourid =, e ora quando striscio
‫qui che è e. target,
‫e forse lo
‫conosci, quindi event. target è fondamentalmente l'elemento su cui è stato
‫fatto clic, quindi quello che ha attivato questo listener di eventi
‫qui per essere attivato, va bene?
‫E così sarà ovviamente questo pulsante.
‫Quindi lì dentro abbiamo l'ID del tour,
‫e quindi in
‫JavaScript, che verrà effettivamente chiamato tour,
‫quindi in questo modo lascia che lo scriva.
‫Quindi l'ID del tour,
‫quindi ogni volta
‫che c'è un -, verrà automaticamente
‫convertito in questa notazione CamelCase.
‫Va bene?
‫Quindi e. obbiettivo. insieme di dati. turistico.
‫Ma ora dal momento che questo nome è esattamente lo stesso di questo,
‫possiamo semplicemente usare la strutturazione su quello.
‫Quindi ancora una volta usando questo bel trucco.
‫E poi chiamiamo book tour con quell'ID tour.
‫E un'altra cosa carina che possiamo
‫fare qui, è cambiare il testo del
‫pulsante in qualcosa come l'elaborazione, e quindi facciamo
‫di nuovo e. obbiettivo.
‫Quindi di nuovo l'elemento su cui è stato fatto clic,
‫quindi questo è il pulsante. textcontent che
‫abbiamo usato prima di ascoltare,
‫quindi per cambiare il
‫testo in un elemento e cambiarlo in elaborazione,
‫ok?
‫E quindi
‫con questo penso che abbiamo tutto collegato correttamente.
‫Quindi facciamo clic su
‫quel pulsante, quindi cambiamo il testo su quel
‫pulsante, quindi otteniamo l'ID del tour
‫dall'attributo dei dati che è sul
‫pulsante e chiamiamo il tour del libro con quell'ID,
‫ok?
‫E così quell'ID verrà quindi passato a questo
‫URL, che a sua volta dovrebbe restituire una sessione di
‫pagamento, ok?
‫E poi qui daremo un'occhiata a
‫questo, proprio così.
‫A questo punto non creeremo
‫ancora il modulo di pagamento, quindi
‫lo lasceremo per l'ultimo passaggio di questo video.
‫Ma per ora voglio dare un'occhiata a
‫questo, vediamo solo
‫se il pacchetto è ancora in esecuzione
‫qui in background, quindi raggruppando tutti
‫i nostri script insieme,
‫e sembra che lo sia, quindi non proviamo effettivamente questo.
‫Quindi abbiamo effettuato l'accesso,
‫ora proviamo a Park Camper.
‫Qui sotto, fai clic su questo pulsante.
‫E sembra che non riceviamo alcun errore, quindi
‫va bene, ora diamo
‫un'occhiata alla nostra console e
‫abbiamo un oggetto, e questo
‫è il risultato di questa chiamata axios, quindi
‫axios crea sempre un oggetto come questo
‫, dove c'è un oggetto chiamato data, che è
‫la risposta effettiva.
‫E così qui vedete che abbiamo davvero la nostra sessione.
‫Quindi vedete, abbiamo l'e-mail
‫del cliente, abbiamo l'attuale ID
‫del tour, ora vediamo se abbiamo, (borbotta) Quindi
‫qui
‫abbiamo alcuni dati sul tour.
‫E così ora tutto sembra corretto qui.
‫Bene?
‫Quindi chiudiamolo e ora,
‫come ultimo passaggio, creiamo
‫fondamentalmente il modulo di pagamento e addebitiamo la
‫carta di credito.
‫Bene?
‫E in realtà avvolgiamo anche tutto questo
‫qui in un blocco try catch.
‫Perché ovviamente abbiamo alcune chiamate asincrone qui, ed entrambe ne
‫hanno un'altra in un
‫secondo, quindi è una buona pratica.
‫Per provare un blocco di cattura.
‫Bene?
‫Ma non perdiamo molto tempo con questi errori.
‫Ma mostrerò comunque un avviso in
‫caso di errore,
‫quindi ad esempio con questa chiamata API,
‫ok?
‫In modo che l'utente possa sostanzialmente vedere
‫che qualcosa è andato storto.
‫Quindi prendiamo semplicemente questa importazione di avvisi.
‫Bene?
‫E poi dì Mostra avviso, specificando
‫che si tratta di un
‫errore, e quindi solo l'errore stesso come messaggio in pratica.
‫Bene?
‫Comunque per fare ora quest'ultimo passaggio, in
‫realtà è molto, molto semplice, non
‫ci resta che attendere.
‫banda. redirectTocheck out,
‫fammi vedere se ho
‫sbagliato e fammi vedere se
‫ho capito bene, quindi reindirizza al check out.
‫Bene?
‫E poi le opzioni ma
‫solo un'opzione, che è l'ID sessione, e quindi
‫verrà dalla sessione, e ricorda come la
‫sessione era all'interno dei dati, quindi c'era
‫un oggetto dati creato lì da axios, ricorda e
‫in modo che è quindi tutta la risposta stessa.
‫E così lì dentro abbiamo la sessione. ID.
‫E basta,
‫ok?
‫E così ora arriva la parte
‫più importante di tutte, ovvero verificare effettivamente se funziona.
‫Quindi siamo ancora connessi, carichiamo
‫ancora una volta questo.
‫Fare clic su un pulsante e ora aspettarlo.
‫E infatti arriviamo alla nostra pagina di pagamento, e otteniamo
‫anche questa bella immagine qui, otteniamo tutto
‫il logo di Nature qui, otteniamo qui tutte
‫le icone, quindi tutte le
‫cose che abbiamo specificato prima, abbiamo il
‫prezzo che abbiamo anche specificato nel nostro
‫sessione di checkout
‫e davvero tutti gli altri dettagli.
‫Quindi il nome, il riassunto
‫e, naturalmente, l'immagine.
‫È davvero incredibile, vero?
‫Quindi ecco un'altra cosa grandiosa che ho menzionato prima,
‫è che l'indirizzo
‫email è già automaticamente precompilato, quindi
‫questa è un'altra caratteristica davvero interessante.
‫E quindi ora tutto ciò
‫che dobbiamo fare è inserire queste informazioni sulla carta di
‫credito, e quindi quando testiamo il numero della carta di credito
‫viene visualizzato solo quattro due quattro due quattro due quattro due
‫e così via fino a quando non abbiamo finito , va bene?
‫Allora qui ogni mese e ogni anno va bene,
‫quindi mettiamo solo due due due.
‫Quindi niente in futuro, va bene?
‫Quindi, se guardi questo corso dopo il febbraio 2022,
‫questa data non funzionerà, quindi
‫metti qualcosa dopo,
‫ok?
‫Finché non funziona anche qualsiasi numero,
‫qui funziona anche qualsiasi nome, metti
‫Laura, anche il paese ovviamente
‫non ha molta importanza, le persone si precompilano automaticamente
‫in base alla posizione del tuo IP, quindi sono
‫in Portogallo,
‫e quindi questo è quello che ottengo.
‫E ora vedete questo bel pulsante verde qui,
‫e ha questo bell'effetto, quindi
‫ora quando lo
‫clicchiamo, si sta elaborando e abbiamo finito.
‫Ottimo, allora questo è in realtà l'URL di successo che
‫abbiamo anche specificato nella nostra sessione di checkout, giusto?
‫Quindi abbiamo definito che, in
‫caso di successo,
‫torniamo a questo URL di casa.
‫E lo cambieremo qui un po'
‫più tardi, ma per ora questo è davvero quello
‫che volevamo, e quindi ha funzionato perfettamente.
‫Beh, almeno lo
‫spero, quindi diamo un'occhiata a tutti i pagamenti ora.
‫E infatti,
‫questo è quello che abbiamo appena realizzato.
‫Quindi abbiamo ricevuto con successo questo pagamento proprio
‫ora nel nostro account.
‫Quindi vedi l'indirizzo email il nome,
‫e in effetti il parco Camper Tour che abbiamo appena acquistato.
‫Fantastico, è davvero fantastico.
‫Quindi quaggiù puoi vedere le commissioni che prende lo stripe,
‫quindi ovviamente hanno anche bisogno di fare soldi,
‫e quindi quindi prendono un
‫taglio, che penso sia come 2. 9% o qualcosa del genere, ma ovviamente
‫tutte quelle cose che puoi controllare sul loro
‫sito web.
‫Poi hai anche il metodo di pagamento qui, quindi
‫i dati che abbiamo
‫appena inserito, e ottieni dei bei
‫dati sulla sessione, e probabilmente dovrebbe apparire anche qui nei tuoi clienti.
‫E sì, davvero eccola qui, e
‫quindi sì, penso
‫che ora abbia abbastanza successo.
‫Oh, e un'altra cosa che ho dimenticato di
‫menzionare è che anche i tuoi
‫utenti riceveranno automaticamente un'e-mail.
‫Quindi penso che dovrebbe essere l'impostazione predefinita qui nelle ricevute
‫e-mail, quindi vai alle tue
‫impostazioni ricevute e-mail e quindi qui
‫avrai i clienti e-mail sui pagamenti andati
‫a buon fine.
‫E quindi questa è anche una
‫caratteristica davvero interessante, il che significa che non dobbiamo inviare e-mail manualmente
‫ogni volta che un utente ha acquistato con successo un tour, va bene?
‫Quindi c'è un'altra cosa che quella striscia ci
‫toglie, Fantastic, quindi prendiamoci solo un minuto veloce per ricapitolare l'intero
‫processo che abbiamo appena attraversato.
‫Quindi abbiamo iniziato creando questa sessione di checkout, che
‫richiede come input l'ID del tour, in
‫modo da poter memorizzare una serie di dettagli sul tour
‫in quella sessione.
‫Quindi cose sul nome
‫del tour, il riepilogo e anche le immagini dei prezzi.
‫Quindi tutte quelle cose che vogliamo mostrare
‫nella pagina di
‫pagamento, ma anche nella nostra dashboard.
‫Quindi includiamo anche l'e-mail in modo che l'utente non
‫debba compilarla al momento del pagamento e
‫poi un mucchio di altri dati.
‫Quindi ricorda questo ID di riferimento del client,
‫che avrà molto più senso
‫una volta che lo utilizzeremo effettivamente.
‫Quindi creiamo questa sessione ogni
‫volta che qualcuno raggiunge questo percorso della sessione di check-out, va bene?
‫E quindi è esattamente quello che facciamo poi sul nostro front-end,
‫proprio qui a strisce. js.
‫Quindi otteniamo la nostra sessione
‫qui, e poi da lì creiamo un checkout e
‫addebitiamo la carta di credito utilizzando
‫lo stripe. redirectTocheckout, e
‫l'oggetto stripe qui
‫sta semplicemente usando la libreria stripe
‫con la nostra chiave pubblica, ok?
‫Da dove viene questo ID del tour?
‫Bene, è memorizzato qui proprio sul pulsante in cui l'utente
‫fa clic per prenotare un nuovo tour.
‫Quell'ID viene quindi letto proprio qui in index. js, ogni volta
‫che qualcuno preme il pulsante di prenotazione, ok?
‫Quindi lo memorizziamo nell'ID del
‫tour e lo passiamo al
‫tour del libro, che è di nuovo questa
‫funzione qui, che si occupa dell'elaborazione dei
‫pagamenti sul front-end.
‫E quindi il risultato di
‫tutto questo è quello
‫che abbiamo appena visto prima, dove l'utente viene
‫realmente addebitato sulla carta di credito
‫e ha acquistato il tour, quindi perfetto.
‫Ora quello che
‫manca qui è che in realtà ogni volta che
‫c'è una nuova prenotazione, vogliamo creare un nuovo documento di prenotazione nel nostro database.
‫Quindi, proprio come abbiamo discusso tempo fa quando
‫abbiamo parlato di tutti i
‫modelli di dati in questa applicazione, giusto?
‫E così, a tal fine,
‫creeremo il modello di prenotazione proprio
‫nel prossimo video, lo
‫ordineremo dopo,
‫possiamo quindi creare nuovi tour ogni
‫volta che c'è un acquisto di successo.