1 00:00:01,130 --> 00:00:03,770 ‫Narratore: In quest'ultima parte della sezione, ora 2 00:00:03,770 --> 00:00:06,160 ‫accetteremo pagamenti con carta di 3 00:00:06,160 --> 00:00:08,770 ‫credito nella nostra applicazione utilizzando Stripe per 4 00:00:08,770 --> 00:00:12,233 ‫consentire ai nostri utenti di acquistare effettivamente i tour. 5 00:00:14,080 --> 00:00:16,320 ‫E quindi, apriamo una nuova scheda qui 6 00:00:18,160 --> 00:00:21,730 ‫e poi la striscia aperta. com. 7 00:00:21,730 --> 00:00:25,080 ‫Quindi Stripe è la piattaforma software migliore, più popolare 8 00:00:25,080 --> 00:00:27,910 ‫e anche più facile da usare 9 00:00:27,910 --> 00:00:30,810 ‫per integrare i pagamenti in qualsiasi sito web. 10 00:00:30,810 --> 00:00:34,210 ‫E molto di più su come funziona un po' 11 00:00:34,210 --> 00:00:38,040 ‫più tardi, ma per ora iniziamo creando il nostro account gratuito. 12 00:00:38,040 --> 00:00:40,540 ‫Quindi fai clic qui su account 13 00:00:40,540 --> 00:00:43,303 ‫gratuito e quindi apri il tuo account gratuito. 14 00:00:44,510 --> 00:00:46,810 ‫E una volta effettuato l'accesso, 15 00:00:46,810 --> 00:00:49,990 ‫dovresti vedere una dashboard simile a questa. 16 00:00:49,990 --> 00:00:52,210 ‫Quindi, quando apri un account nuovo 17 00:00:52,210 --> 00:00:55,150 ‫di zecca, inizialmente sarai sempre in modalità test. 18 00:00:55,150 --> 00:00:59,250 ‫Questo è quello che puoi vedere qui sotto con questi dati di test. 19 00:00:59,250 --> 00:01:01,380 ‫Ora, non appena vorrai davvero 20 00:01:01,380 --> 00:01:04,250 ‫iniziare ad accettare pagamenti reali che coinvolgono 21 00:01:04,250 --> 00:01:07,530 ‫denaro reale da clienti reali, dovrai attivare il 22 00:01:07,530 --> 00:01:08,960 ‫tuo account Stripe. 23 00:01:08,960 --> 00:01:11,350 ‫E per questo, dovrai fornire a 24 00:01:11,350 --> 00:01:14,220 ‫Stripe una serie di dati sulla tua attività. 25 00:01:14,220 --> 00:01:15,580 ‫Ma ovviamente in 26 00:01:15,580 --> 00:01:18,360 ‫questo progetto non lo faremo, quindi lavoreremo sempre 27 00:01:18,360 --> 00:01:21,680 ‫in questo tipo di modalità di sviluppo test, ok? 28 00:01:21,680 --> 00:01:24,010 ‫Ma per il resto, fai semplicemente clic 29 00:01:24,010 --> 00:01:26,940 ‫qui su start o attiva il tuo account qui. 30 00:01:26,940 --> 00:01:29,980 ‫Ora questa dashboard è davvero facile e super 31 00:01:29,980 --> 00:01:31,890 ‫intuitiva da usare secondo me. 32 00:01:31,890 --> 00:01:35,660 ‫Quindi qui puoi vedere i tuoi pagamenti, che ancora una volta 33 00:01:35,660 --> 00:01:37,360 ‫è molto semplice, e 34 00:01:37,360 --> 00:01:40,280 ‫ricorda che questi sono tutti dati di prova. 35 00:01:40,280 --> 00:01:42,270 ‫Quindi tutti questi importi qui sono, 36 00:01:42,270 --> 00:01:44,110 ‫ovviamente, solo importi falsi. 37 00:01:44,110 --> 00:01:46,460 ‫Ma comunque, puoi vedere il tuo 38 00:01:46,460 --> 00:01:48,463 ‫cliente qui, puoi vedere l'importo. 39 00:01:49,490 --> 00:01:52,440 ‫E quando li apri, ottieni ancora più informazioni, come il 40 00:01:52,440 --> 00:01:55,670 ‫metodo di pagamento qui, quindi il numero della carta di credito. 41 00:01:55,670 --> 00:01:58,640 ‫E a proposito, in realtà non otteniamo mai l'accesso al 42 00:01:58,640 --> 00:02:01,420 ‫numero reale della carta di credito del cliente. 43 00:02:01,420 --> 00:02:04,230 ‫Quindi vedremo sempre solo queste ultime quattro cifre, 44 00:02:04,230 --> 00:02:07,630 ‫ma mai il vero numero della carta di credito, ok? 45 00:02:07,630 --> 00:02:09,620 ‫Quindi ottieni anche la panoramica 46 00:02:09,620 --> 00:02:12,110 ‫di ciò che è stato effettivamente acquistato. 47 00:02:12,110 --> 00:02:14,630 ‫Quindi, ad esempio, The Snow Adventurer Tour. 48 00:02:14,630 --> 00:02:16,360 ‫E tutto questo qui 49 00:02:16,360 --> 00:02:18,410 ‫è stato, ovviamente, da quando stavo 50 00:02:18,410 --> 00:02:21,133 ‫creando per la prima volta l'applicazione Natours, ok? 51 00:02:22,000 --> 00:02:24,570 ‫Quindi tutti questi sono solo acquisti di prova. 52 00:02:24,570 --> 00:02:27,420 ‫Quindi possiamo anche vedere il nostro intero saldo, quindi 53 00:02:27,420 --> 00:02:30,150 ‫praticamente tutti i soldi che abbiamo ricevuto. 54 00:02:30,150 --> 00:02:33,610 ‫E ancora, tutto questo sono solo dati di test. 55 00:02:33,610 --> 00:02:37,060 ‫Poi abbiamo i nostri clienti con una bella lista di tutti loro. 56 00:02:37,060 --> 00:02:39,653 ‫E, sì, tutto questo funziona davvero bene. 57 00:02:40,650 --> 00:02:42,500 ‫Ora, prima di poter iniziare, abbiamo 58 00:02:42,500 --> 00:02:44,830 ‫effettivamente bisogno di definire un paio di 59 00:02:44,830 --> 00:02:46,400 ‫impostazioni sul nostro account. 60 00:02:46,400 --> 00:02:48,867 ‫Quindi nel tuo nuovo account, dovresti vedere 61 00:02:48,867 --> 00:02:52,120 ‫qualcosa come "Account senza nome", o qualcosa del genere, qui. 62 00:02:52,120 --> 00:02:55,740 ‫E quindi, dovresti anche avere, come un'icona a forma di penna o 63 00:02:55,740 --> 00:02:59,010 ‫qualcosa in cui puoi quindi creare un nome per l'account. 64 00:02:59,010 --> 00:03:02,160 ‫E quindi, per favore, chiamalo "Natours" o qualcos'altro. 65 00:03:02,160 --> 00:03:04,700 ‫E se hai più attività, 66 00:03:04,700 --> 00:03:08,690 ‫puoi aggiungere un account per ciascuna di queste attività, ok? 67 00:03:08,690 --> 00:03:11,510 ‫Oppure, se non hai l'icona a forma di matita 68 00:03:11,510 --> 00:03:13,220 ‫qui, possiamo anche andare 69 00:03:13,220 --> 00:03:15,570 ‫alle impostazioni e quindi alle informazioni sull'account. 70 00:03:15,570 --> 00:03:18,030 ‫E quindi ecco dove dovresti mettere 71 00:03:18,030 --> 00:03:20,610 ‫il nome di questo tipo di attività. 72 00:03:20,610 --> 00:03:23,150 ‫Possiamo anche definire un paio di altre impostazioni, 73 00:03:23,150 --> 00:03:25,350 ‫quindi definiamo qui il marchio, che in 74 00:03:25,350 --> 00:03:27,390 ‫pratica farà corrispondere le pagine di Checkout 75 00:03:27,390 --> 00:03:29,233 ‫a strisce al nostro marchio. 76 00:03:30,470 --> 00:03:32,383 ‫Quindi aggiungiamo le nostre immagini. 77 00:03:35,880 --> 00:03:39,850 ‫Quindi pubblico, immagine, e poi per l'icona, 78 00:03:39,850 --> 00:03:41,163 ‫usiamo questa. 79 00:03:43,830 --> 00:03:46,140 ‫E possiamo anche caricare 80 00:03:46,140 --> 00:03:49,033 ‫un logo, e per questo usiamo questo. 81 00:03:51,310 --> 00:03:53,913 ‫Oh, e ora abbiamo bisogno della nostra password per continuare. 82 00:03:56,220 --> 00:03:59,033 ‫E ora cambiamo anche il nostro colore qui. 83 00:04:00,180 --> 00:04:03,640 ‫Quindi apri rapidamente il file CSS in pubblico e 84 00:04:04,510 --> 00:04:07,150 ‫poi trova il nostro tipico verde, che 85 00:04:07,150 --> 00:04:08,663 ‫è questo qui. 86 00:04:12,000 --> 00:04:13,623 ‫Quindi sembra un po' meglio. 87 00:04:15,570 --> 00:04:16,950 ‫Ora salviamolo qui 88 00:04:19,200 --> 00:04:22,150 ‫e quindi con quello, siamo a posto. 89 00:04:22,150 --> 00:04:25,130 ‫Successivamente, diamo un'occhiata alle nostre chiavi API. 90 00:04:25,130 --> 00:04:27,660 ‫Quindi, fai clic qui sulle chiavi API e 91 00:04:27,660 --> 00:04:29,550 ‫se il sito Web ha 92 00:04:29,550 --> 00:04:31,690 ‫un aspetto leggermente diverso quando guardi 93 00:04:31,690 --> 00:04:35,113 ‫questo video, allora forse le chiavi sono qui per gli sviluppatori. 94 00:04:36,180 --> 00:04:41,180 ‫Quindi qui hai anche qualcosa chiamato chiavi API, ok? 95 00:04:41,840 --> 00:04:45,860 ‫Ad ogni modo, esiste una chiave pubblicabile e una chiave segreta. 96 00:04:45,860 --> 00:04:48,270 ‫Quindi questa è fondamentalmente una 97 00:04:48,270 --> 00:04:50,820 ‫chiave pubblica che possiamo usare sul front-end 98 00:04:50,820 --> 00:04:54,430 ‫e una chiave segreta è quella necessaria sul back-end. 99 00:04:54,430 --> 00:04:56,020 ‫E così ne parleremo 100 00:04:56,020 --> 00:04:58,420 ‫una volta che avremo effettivamente iniziato a implementarlo. 101 00:04:58,420 --> 00:05:00,310 ‫E infine, volevo anche 102 00:05:00,310 --> 00:05:04,120 ‫dare una rapida occhiata insieme a voi alla documentazione. 103 00:05:04,120 --> 00:05:05,940 ‫E così è qui, e in 104 00:05:05,940 --> 00:05:07,390 ‫realtà Stripe è 105 00:05:07,390 --> 00:05:09,470 ‫noto per la sua eccellente documentazione. 106 00:05:09,470 --> 00:05:11,700 ‫È davvero facile trovare quello che stai 107 00:05:11,700 --> 00:05:13,170 ‫cercando in questa documentazione. 108 00:05:13,170 --> 00:05:15,470 ‫Ma ovviamente, quando sei solo all'inizio, 109 00:05:15,470 --> 00:05:17,740 ‫è molto difficile persino sapere 110 00:05:17,740 --> 00:05:19,830 ‫cosa stai cercando, giusto? 111 00:05:19,830 --> 00:05:21,550 ‫Ed è per questo 112 00:05:21,550 --> 00:05:25,270 ‫che stiamo implementando insieme questa funzione di pagamento qui, giusto? 113 00:05:25,270 --> 00:05:28,530 ‫Quindi useremo le funzionalità di pagamento di Stripe e 114 00:05:28,530 --> 00:05:31,000 ‫hanno un paio di opzioni diverse. 115 00:05:31,000 --> 00:05:33,630 ‫Ora sul web, possiamo usare Stripe 116 00:05:33,630 --> 00:05:36,820 ‫Checkout che fondamentalmente utilizza una pagina Checkout preformativa. 117 00:05:36,820 --> 00:05:39,170 ‫E quindi questo è quello che 118 00:05:39,170 --> 00:05:41,800 ‫useremo, oppure puoi anche usare gli elementi 119 00:05:41,800 --> 00:05:42,633 ‫Stripe 120 00:05:42,633 --> 00:05:46,400 ‫quando vuoi davvero costruire la tua esperienza di Checkout, ok? 121 00:05:46,400 --> 00:05:48,640 ‫Ma useremo solo questo Checkout che in realtà 122 00:05:48,640 --> 00:05:50,110 ‫è nuovo di zecca e 123 00:05:50,110 --> 00:05:52,633 ‫quindi è davvero a prova di futuro a questo punto. 124 00:05:53,990 --> 00:05:56,060 ‫Quindi queste sono le due opzioni 125 00:05:56,060 --> 00:05:59,850 ‫per il web, ma puoi anche eseguire Stripe su iOS, Android e 126 00:05:59,850 --> 00:06:01,563 ‫su qualsiasi altra piattaforma. 127 00:06:02,700 --> 00:06:05,840 ‫Quindi su Checkout, possiamo effettivamente 128 00:06:05,840 --> 00:06:10,223 ‫usarlo solo sul client o insieme al server, ok? 129 00:06:11,070 --> 00:06:13,593 ‫Quindi quaggiù c'è qualche confronto. 130 00:06:14,610 --> 00:06:17,600 ‫E così quando lo usiamo solo sul lato client, 131 00:06:17,600 --> 00:06:20,000 ‫non abbiamo nemmeno bisogno di un server. 132 00:06:20,000 --> 00:06:22,890 ‫Ma questo modo di usare Stripe è solo, davvero, 133 00:06:22,890 --> 00:06:25,060 ‫per negozi davvero, molto piccoli, quindi 134 00:06:25,060 --> 00:06:27,600 ‫dove hai solo una manciata di prodotti 135 00:06:27,600 --> 00:06:29,420 ‫che non cambiano mai il 136 00:06:29,420 --> 00:06:31,040 ‫loro prezzo e dove 137 00:06:31,040 --> 00:06:34,730 ‫devi effettivamente aggiungere tutti questi prodotti manualmente ai tuoi cruscotti Stripe. 138 00:06:34,730 --> 00:06:37,250 ‫E quindi vogliamo qualcosa di un 139 00:06:37,250 --> 00:06:41,460 ‫po' più complesso e per questo usiamo l'integrazione del server, ok? 140 00:06:41,460 --> 00:06:43,160 ‫E quindi, ovviamente, dobbiamo 141 00:06:43,160 --> 00:06:45,010 ‫ancora fare qualcosa sul lato client, 142 00:06:45,010 --> 00:06:48,720 ‫ma la maggior parte del codice sarà effettivamente sul lato server. 143 00:06:48,720 --> 00:06:52,220 ‫Ok, quindi vedi che c'è davvero un sacco 144 00:06:52,220 --> 00:06:56,930 ‫di cose da fare con Stripe, e possiamo anche fare molto di più. 145 00:06:56,930 --> 00:07:01,210 ‫Quindi potremmo avere fatturazione in cui abbiamo abbonamenti in cui abbiamo 146 00:07:01,210 --> 00:07:04,050 ‫fatture e tutte quelle cose buone. 147 00:07:04,050 --> 00:07:06,040 ‫Quindi, davvero, potresti costruire 148 00:07:06,040 --> 00:07:09,330 ‫un enorme business su Stripe e accettare abbonamenti, salvare 149 00:07:09,330 --> 00:07:11,350 ‫clienti in database e tutto 150 00:07:11,350 --> 00:07:13,543 ‫ciò che è integrato in Stripe. 151 00:07:14,940 --> 00:07:16,850 ‫Ma ancora una volta, ciò che 152 00:07:16,850 --> 00:07:19,040 ‫faremo qui è semplicemente utilizzare Checkout, ma 153 00:07:19,040 --> 00:07:21,090 ‫la versione più completa di esso 154 00:07:21,090 --> 00:07:22,963 ‫utilizzando il server Checkout. 155 00:07:24,640 --> 00:07:27,130 ‫Bene, ma ora, prima di iniziare 156 00:07:27,130 --> 00:07:29,690 ‫effettivamente a integrare il prodotto Stripe 157 00:07:29,690 --> 00:07:31,210 ‫Checkout nella nostra 158 00:07:31,210 --> 00:07:34,353 ‫applicazione, volevo solo impostare rapidamente il layout dell'intero 159 00:07:34,353 --> 00:07:37,920 ‫flusso di lavoro che implementeremo nei prossimi due video. 160 00:07:37,920 --> 00:07:40,200 ‫Quindi tutto inizia nel 161 00:07:40,200 --> 00:07:42,850 ‫back-end dove implementeremo un percorso per 162 00:07:42,850 --> 00:07:45,600 ‫creare una cosiddetta Stripe Checkout Session. 163 00:07:45,600 --> 00:07:48,170 ‫E questa sessione conterrà una serie 164 00:07:48,170 --> 00:07:50,970 ‫di dati sull'oggetto che può essere acquistato. 165 00:07:50,970 --> 00:07:53,070 ‫E nel nostro esempio, questo è il tour. 166 00:07:53,070 --> 00:07:55,480 ‫Quindi la sessione conterrà il prezzo del 167 00:07:55,480 --> 00:07:59,640 ‫tour, il nome del tour, un'immagine del prodotto e anche alcuni altri 168 00:07:59,640 --> 00:08:01,450 ‫dettagli come l'e-mail del cliente. 169 00:08:01,450 --> 00:08:04,530 ‫Quindi lo vedremo effettivamente nel prossimo video. 170 00:08:04,530 --> 00:08:07,370 ‫Quindi, sul front-end, creeremo una funzione per richiedere 171 00:08:07,370 --> 00:08:10,580 ‫la sessione di checkout dal server una volta che 172 00:08:10,580 --> 00:08:13,120 ‫l'utente fa clic sul pulsante di acquisto. 173 00:08:13,120 --> 00:08:14,550 ‫Quindi, una volta raggiunto 174 00:08:14,550 --> 00:08:16,350 ‫il punto finale che abbiamo 175 00:08:16,350 --> 00:08:19,360 ‫creato sul back-end, questo creerà una sessione e la 176 00:08:19,360 --> 00:08:20,720 ‫invierà al client. 177 00:08:20,720 --> 00:08:22,590 ‫Quindi, in base a quella 178 00:08:22,590 --> 00:08:26,010 ‫sessione, Stripe creerà automaticamente una pagina di pagamento per noi in 179 00:08:26,010 --> 00:08:28,640 ‫cui l'utente può inserire tutti i dettagli come il 180 00:08:28,640 --> 00:08:32,670 ‫numero della carta di credito, la data di scadenza e tutto il resto. 181 00:08:32,670 --> 00:08:34,760 ‫Quindi, ancora, utilizzando The 182 00:08:34,760 --> 00:08:37,360 ‫Session, addebiteremo finalmente la carta di credito. 183 00:08:37,360 --> 00:08:39,700 ‫E per questo, avremo bisogno della chiave pubblica, 184 00:08:39,700 --> 00:08:41,830 ‫quindi quella che abbiamo appena visto prima. 185 00:08:41,830 --> 00:08:44,270 ‫Quindi la chiave segreta di cui avremo bisogno 186 00:08:44,270 --> 00:08:46,330 ‫sul server come vedrai lassù 187 00:08:46,330 --> 00:08:49,820 ‫nel primo passaggio e la chiave pubblica verrà utilizzata sul front-end. 188 00:08:49,820 --> 00:08:51,730 ‫E ciò che è veramente importante 189 00:08:51,730 --> 00:08:53,180 ‫notare qui è 190 00:08:53,180 --> 00:08:54,930 ‫che è davvero Stripe, che 191 00:08:54,930 --> 00:08:57,480 ‫insieme a The Session, addebiterà la carta di 192 00:08:57,480 --> 00:09:00,720 ‫credito, e quindi, quindi, i dettagli della carta di credito non 193 00:09:00,720 --> 00:09:03,800 ‫raggiungono nemmeno il nostro server, il che rende la nostra 194 00:09:03,800 --> 00:09:05,870 ‫vita come sviluppatori molto più facile perché 195 00:09:05,870 --> 00:09:08,500 ‫poi non dobbiamo occuparci di tutte le questioni 196 00:09:08,500 --> 00:09:12,000 ‫di sicurezza relative alla gestione e all'archiviazione delle carte di credito, ok? 197 00:09:12,000 --> 00:09:14,450 ‫Quindi Stripe ci toglie tutto 198 00:09:14,450 --> 00:09:18,030 ‫questo, fondamentalmente usiamo la loro API in questo modo. 199 00:09:18,030 --> 00:09:21,840 ‫Ad ogni modo, una volta che la carta di credito è stata 200 00:09:21,840 --> 00:09:24,460 ‫addebitata con successo, possiamo utilizzare qualcosa chiamato 201 00:09:24,460 --> 00:09:28,210 ‫Stripe Webhooks sul nostro back-end, al fine di creare nuove prenotazioni. 202 00:09:28,210 --> 00:09:30,090 ‫Ora, questa parte del flusso di 203 00:09:30,090 --> 00:09:32,710 ‫lavoro funzionerà solo per i siti Web distribuiti, quindi 204 00:09:32,710 --> 00:09:35,900 ‫i siti Web che sono già in esecuzione su un server. 205 00:09:35,900 --> 00:09:37,770 ‫E quindi questa parte del 206 00:09:37,770 --> 00:09:39,690 ‫flusso di lavoro, saremo in grado 207 00:09:39,690 --> 00:09:42,830 ‫di implementarla solo entro la fine della prossima sezione, ok? 208 00:09:42,830 --> 00:09:44,310 ‫Ma per ora, 209 00:09:44,310 --> 00:09:46,270 ‫troveremo effettivamente una soluzione temporanea 210 00:09:46,270 --> 00:09:47,770 ‫a questo, che non 211 00:09:47,770 --> 00:09:50,870 ‫è molto sicura, ma funzionerà bene per ora, ok? 212 00:09:50,870 --> 00:09:54,060 ‫Quindi tieni a mente questo diagramma e anche questo 213 00:09:54,060 --> 00:09:57,410 ‫concetto che usiamo effettivamente The Session per addebitare una carta 214 00:09:57,410 --> 00:09:59,940 ‫di credito e non lo facciamo direttamente. 215 00:09:59,940 --> 00:10:01,803 ‫Allora, ci vediamo al prossimo video.