‫Narratore: In quest'ultima parte della sezione, ora
‫accetteremo pagamenti con carta di
‫credito nella nostra applicazione utilizzando Stripe per
‫consentire ai nostri utenti di acquistare effettivamente i tour.
‫E quindi, apriamo una nuova scheda qui
‫e poi la striscia aperta. com.
‫Quindi Stripe è la piattaforma software migliore, più popolare
‫e anche più facile da usare
‫per integrare i pagamenti in qualsiasi sito web.
‫E molto di più su come funziona un po'
‫più tardi, ma per ora iniziamo creando il nostro account gratuito.
‫Quindi fai clic qui su account
‫gratuito e quindi apri il tuo account gratuito.
‫E una volta effettuato l'accesso,
‫dovresti vedere una dashboard simile a questa.
‫Quindi, quando apri un account nuovo
‫di zecca, inizialmente sarai sempre in modalità test.
‫Questo è quello che puoi vedere qui sotto con questi dati di test.
‫Ora, non appena vorrai davvero
‫iniziare ad accettare pagamenti reali che coinvolgono
‫denaro reale da clienti reali, dovrai attivare il
‫tuo account Stripe.
‫E per questo, dovrai fornire a
‫Stripe una serie di dati sulla tua attività.
‫Ma ovviamente in
‫questo progetto non lo faremo, quindi lavoreremo sempre
‫in questo tipo di modalità di sviluppo test, ok?
‫Ma per il resto, fai semplicemente clic
‫qui su start o attiva il tuo account qui.
‫Ora questa dashboard è davvero facile e super
‫intuitiva da usare secondo me.
‫Quindi qui puoi vedere i tuoi pagamenti, che ancora una volta
‫è molto semplice, e
‫ricorda che questi sono tutti dati di prova.
‫Quindi tutti questi importi qui sono,
‫ovviamente, solo importi falsi.
‫Ma comunque, puoi vedere il tuo
‫cliente qui, puoi vedere l'importo.
‫E quando li apri, ottieni ancora più informazioni, come il
‫metodo di pagamento qui, quindi il numero della carta di credito.
‫E a proposito, in realtà non otteniamo mai l'accesso al
‫numero reale della carta di credito del cliente.
‫Quindi vedremo sempre solo queste ultime quattro cifre,
‫ma mai il vero numero della carta di credito, ok?
‫Quindi ottieni anche la panoramica
‫di ciò che è stato effettivamente acquistato.
‫Quindi, ad esempio, The Snow Adventurer Tour.
‫E tutto questo qui
‫è stato, ovviamente, da quando stavo
‫creando per la prima volta l'applicazione Natours, ok?
‫Quindi tutti questi sono solo acquisti di prova.
‫Quindi possiamo anche vedere il nostro intero saldo, quindi
‫praticamente tutti i soldi che abbiamo ricevuto.
‫E ancora, tutto questo sono solo dati di test.
‫Poi abbiamo i nostri clienti con una bella lista di tutti loro.
‫E, sì, tutto questo funziona davvero bene.
‫Ora, prima di poter iniziare, abbiamo
‫effettivamente bisogno di definire un paio di
‫impostazioni sul nostro account.
‫Quindi nel tuo nuovo account, dovresti vedere
‫qualcosa come "Account senza nome", o qualcosa del genere, qui.
‫E quindi, dovresti anche avere, come un'icona a forma di penna o
‫qualcosa in cui puoi quindi creare un nome per l'account.
‫E quindi, per favore, chiamalo "Natours" o qualcos'altro.
‫E se hai più attività,
‫puoi aggiungere un account per ciascuna di queste attività, ok?
‫Oppure, se non hai l'icona a forma di matita
‫qui, possiamo anche andare
‫alle impostazioni e quindi alle informazioni sull'account.
‫E quindi ecco dove dovresti mettere
‫il nome di questo tipo di attività.
‫Possiamo anche definire un paio di altre impostazioni,
‫quindi definiamo qui il marchio, che in
‫pratica farà corrispondere le pagine di Checkout
‫a strisce al nostro marchio.
‫Quindi aggiungiamo le nostre immagini.
‫Quindi pubblico, immagine, e poi per l'icona,
‫usiamo questa.
‫E possiamo anche caricare
‫un logo, e per questo usiamo questo.
‫Oh, e ora abbiamo bisogno della nostra password per continuare.
‫E ora cambiamo anche il nostro colore qui.
‫Quindi apri rapidamente il file CSS in pubblico e
‫poi trova il nostro tipico verde, che
‫è questo qui.
‫Quindi sembra un po' meglio.
‫Ora salviamolo qui
‫e quindi con quello, siamo a posto.
‫Successivamente, diamo un'occhiata alle nostre chiavi API.
‫Quindi, fai clic qui sulle chiavi API e
‫se il sito Web ha
‫un aspetto leggermente diverso quando guardi
‫questo video, allora forse le chiavi sono qui per gli sviluppatori.
‫Quindi qui hai anche qualcosa chiamato chiavi API, ok?
‫Ad ogni modo, esiste una chiave pubblicabile e una chiave segreta.
‫Quindi questa è fondamentalmente una
‫chiave pubblica che possiamo usare sul front-end
‫e una chiave segreta è quella necessaria sul back-end.
‫E così ne parleremo
‫una volta che avremo effettivamente iniziato a implementarlo.
‫E infine, volevo anche
‫dare una rapida occhiata insieme a voi alla documentazione.
‫E così è qui, e in
‫realtà Stripe è
‫noto per la sua eccellente documentazione.
‫È davvero facile trovare quello che stai
‫cercando in questa documentazione.
‫Ma ovviamente, quando sei solo all'inizio,
‫è molto difficile persino sapere
‫cosa stai cercando, giusto?
‫Ed è per questo
‫che stiamo implementando insieme questa funzione di pagamento qui, giusto?
‫Quindi useremo le funzionalità di pagamento di Stripe e
‫hanno un paio di opzioni diverse.
‫Ora sul web, possiamo usare Stripe
‫Checkout che fondamentalmente utilizza una pagina Checkout preformativa.
‫E quindi questo è quello che
‫useremo, oppure puoi anche usare gli elementi
‫Stripe
‫quando vuoi davvero costruire la tua esperienza di Checkout, ok?
‫Ma useremo solo questo Checkout che in realtà
‫è nuovo di zecca e
‫quindi è davvero a prova di futuro a questo punto.
‫Quindi queste sono le due opzioni
‫per il web, ma puoi anche eseguire Stripe su iOS, Android e
‫su qualsiasi altra piattaforma.
‫Quindi su Checkout, possiamo effettivamente
‫usarlo solo sul client o insieme al server, ok?
‫Quindi quaggiù c'è qualche confronto.
‫E così quando lo usiamo solo sul lato client,
‫non abbiamo nemmeno bisogno di un server.
‫Ma questo modo di usare Stripe è solo, davvero,
‫per negozi davvero, molto piccoli, quindi
‫dove hai solo una manciata di prodotti
‫che non cambiano mai il
‫loro prezzo e dove
‫devi effettivamente aggiungere tutti questi prodotti manualmente ai tuoi cruscotti Stripe.
‫E quindi vogliamo qualcosa di un
‫po' più complesso e per questo usiamo l'integrazione del server, ok?
‫E quindi, ovviamente, dobbiamo
‫ancora fare qualcosa sul lato client,
‫ma la maggior parte del codice sarà effettivamente sul lato server.
‫Ok, quindi vedi che c'è davvero un sacco
‫di cose da fare con Stripe, e possiamo anche fare molto di più.
‫Quindi potremmo avere fatturazione in cui abbiamo abbonamenti in cui abbiamo
‫fatture e tutte quelle cose buone.
‫Quindi, davvero, potresti costruire
‫un enorme business su Stripe e accettare abbonamenti, salvare
‫clienti in database e tutto
‫ciò che è integrato in Stripe.
‫Ma ancora una volta, ciò che
‫faremo qui è semplicemente utilizzare Checkout, ma
‫la versione più completa di esso
‫utilizzando il server Checkout.
‫Bene, ma ora, prima di iniziare
‫effettivamente a integrare il prodotto Stripe
‫Checkout nella nostra
‫applicazione, volevo solo impostare rapidamente il layout dell'intero
‫flusso di lavoro che implementeremo nei prossimi due video.
‫Quindi tutto inizia nel
‫back-end dove implementeremo un percorso per
‫creare una cosiddetta Stripe Checkout Session.
‫E questa sessione conterrà una serie
‫di dati sull'oggetto che può essere acquistato.
‫E nel nostro esempio, questo è il tour.
‫Quindi la sessione conterrà il prezzo del
‫tour, il nome del tour, un'immagine del prodotto e anche alcuni altri
‫dettagli come l'e-mail del cliente.
‫Quindi lo vedremo effettivamente nel prossimo video.
‫Quindi, sul front-end, creeremo una funzione per richiedere
‫la sessione di checkout dal server una volta che
‫l'utente fa clic sul pulsante di acquisto.
‫Quindi, una volta raggiunto
‫il punto finale che abbiamo
‫creato sul back-end, questo creerà una sessione e la
‫invierà al client.
‫Quindi, in base a quella
‫sessione, Stripe creerà automaticamente una pagina di pagamento per noi in
‫cui l'utente può inserire tutti i dettagli come il
‫numero della carta di credito, la data di scadenza e tutto il resto.
‫Quindi, ancora, utilizzando The
‫Session, addebiteremo finalmente la carta di credito.
‫E per questo, avremo bisogno della chiave pubblica,
‫quindi quella che abbiamo appena visto prima.
‫Quindi la chiave segreta di cui avremo bisogno
‫sul server come vedrai lassù
‫nel primo passaggio e la chiave pubblica verrà utilizzata sul front-end.
‫E ciò che è veramente importante
‫notare qui è
‫che è davvero Stripe, che
‫insieme a The Session, addebiterà la carta di
‫credito, e quindi, quindi, i dettagli della carta di credito non
‫raggiungono nemmeno il nostro server, il che rende la nostra
‫vita come sviluppatori molto più facile perché
‫poi non dobbiamo occuparci di tutte le questioni
‫di sicurezza relative alla gestione e all'archiviazione delle carte di credito, ok?
‫Quindi Stripe ci toglie tutto
‫questo, fondamentalmente usiamo la loro API in questo modo.
‫Ad ogni modo, una volta che la carta di credito è stata
‫addebitata con successo, possiamo utilizzare qualcosa chiamato
‫Stripe Webhooks sul nostro back-end, al fine di creare nuove prenotazioni.
‫Ora, questa parte del flusso di
‫lavoro funzionerà solo per i siti Web distribuiti, quindi
‫i siti Web che sono già in esecuzione su un server.
‫E quindi questa parte del
‫flusso di lavoro, saremo in grado
‫di implementarla solo entro la fine della prossima sezione, ok?
‫Ma per ora,
‫troveremo effettivamente una soluzione temporanea
‫a questo, che non
‫è molto sicura, ma funzionerà bene per ora, ok?
‫Quindi tieni a mente questo diagramma e anche questo
‫concetto che usiamo effettivamente The Session per addebitare una carta
‫di credito e non lo facciamo direttamente.
‫Allora, ci vediamo al prossimo video.