{"id":73384,"date":"2023-10-02T09:32:08","date_gmt":"2023-10-02T08:32:08","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=73384&preview=true&preview_id=73384"},"modified":"2023-10-16T10:33:59","modified_gmt":"2023-10-16T09:33:59","slug":"stripe-java-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/stripe-java-api\/","title":{"rendered":"Guida all’integrazione di Stripe in Spring Boot"},"content":{"rendered":"

Con l’aumento delle transazioni digitali, la capacit\u00e0 di integrare perfettamente i gateway di pagamento \u00e8 diventata un’abilit\u00e0 fondamentale per chi sviluppa. Che si tratti di marketplace o di prodotti SaaS<\/a>, un processore di pagamenti \u00e8 fondamentale per raccogliere ed elaborare i pagamenti degli utenti.<\/p>\n

Questo articolo spiega come integrare Stripe<\/a> in un ambiente Spring Boot<\/a>, come impostare abbonamenti, offrire prove gratuite e creare pagine self-service per i vostri clienti per scaricare le fatture di pagamento.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Cos’\u00e8 Stripe?<\/h2>\n

Stripe<\/a> \u00e8 una piattaforma di elaborazione dei pagamenti famosa in tutto il mondo e disponibile in 46 paesi<\/a>. \u00c8 un’ottima scelta se volete creare un’integrazione per pagamenti nella vostra applicazione web grazie alla sua ampia portata, alla sua fama e alla sua documentazione dettagliata.<\/p>\n

Capire i concetti comuni di Stripe<\/h3>\n

\u00c8 utile comprendere alcuni concetti comuni che Stripe usa per coordinare ed eseguire le operazioni di pagamento tra pi\u00f9 parti. Stripe offre due approcci per implementare l’integrazione dei pagamenti nella vostra app.<\/p>\n

Potete incorporare i moduli di Stripe all’interno della vostra app per un’esperienza in-app del cliente (Payment Intent<\/a>) o reindirizzare i clienti a una pagina di pagamento ospitata da Stripe, dove Stripe gestisce il processo e fa sapere alla vostra app quando il pagamento va a buon fine o fallisce (Payment Link<\/a>).<\/p>\n

Payment Intent<\/h4>\n

Quando si gestiscono i pagamenti, \u00e8 importante raccogliere i dettagli del cliente e del prodotto prima di richiedere i dati della carta e del pagamento. Questi dettagli comprendono la descrizione, l’importo totale, la modalit\u00e0 di pagamento e altro ancora.<\/p>\n

Stripe vi chiede di raccogliere questi dati all’interno della vostra applicazione e di generare un oggetto PaymentIntent<\/code> nel suo backend. Questo approccio consente a Stripe di formulare una richiesta di pagamento per quell’intento. Una volta concluso il pagamento, potete recuperare i dettagli del pagamento, compreso il suo scopo, attraverso l’oggetto PaymentIntent<\/code>.<\/p>\n

Payment Link<\/h4>\n

Per evitare le complessit\u00e0 dell’integrazione di Stripe direttamente nella vostra base di codice, considerate l’utilizzo di Stripe Checkouts<\/a> come soluzione di pagamento in hosting. Come per la creazione di PaymentIntent<\/code>, creerete un oggetto CheckoutSession<\/code> con i dettagli del pagamento e del cliente. Invece di avviare un PaymentIntent<\/code> in-app, il CheckoutSession<\/code> genera un link di pagamento dove reindirizzare i clienti. Ecco come appare una pagina di pagamento ospitata:<\/p>\n

\"Schermata
La pagina di pagamento ospitata da Stripe.<\/figcaption><\/figure>\n

Dopo il pagamento, Stripe reindirizza alla vostra app, consentendo di svolgere attivit\u00e0 successive al pagamento come conferme e richieste di consegna. Per garantire l’affidabilit\u00e0, configura un webhook di backend per aggiornare Stripe, assicurando la conservazione dei dati di pagamento anche se i clienti chiudono accidentalmente la pagina dopo il pagamento.<\/p>\n

Pur essendo efficace, questo metodo manca di flessibilit\u00e0 nella personalizzazione e nel design. Inoltre, pu\u00f2 essere difficile da configurare correttamente per le applicazioni mobili, dove un’integrazione nativa sarebbe molto pi\u00f9 semplice.<\/p>\n

Chiavi API<\/h4>\n

Quando lavorate con l’API di Stripe, dovete avere accesso alle chiavi API per le vostre app client e server per interagire con il backend di Stripe. Potete accedere alle chiavi API di Stripe nella vostra bacheca per sviluppatori di Stripe<\/a>. Ecco come si presenta:<\/p>\n

\"Schermata
La bacheca di Stripe che mostra le chiavi API<\/figcaption><\/figure>\n

Come funzionano i pagamenti con Stripe?<\/h3>\n

Per capire come funzionano i pagamenti in Stripe, dovete comprendere tutti gli attori coinvolti. In ogni transazione di pagamento sono coinvolti quattro soggetti:<\/p>\n

    \n
  1. Customer<\/strong>: cliente, la persona che intende pagare un servizio\/prodotto.<\/li>\n
  2. Merchant<\/strong>: il titolare dell’attivit\u00e0, responsabile della ricezione dei pagamenti e della vendita di servizi\/prodotti.<\/li>\n
  3. Acquirer<\/strong>: una banca che elabora i pagamenti per conto vostro (merchant) e inoltra la richiesta di pagamento alle banche dei vostri clienti. Gli acquirer possono collaborare con una terza parte per elaborare i pagamenti.<\/li>\n
  4. Issuing bank<\/strong>: la banca emittente che estende il credito ed emette carte e altri metodi di pagamento per i consumatori.<\/li>\n<\/ol>\n

    Ecco un tipico flusso di pagamenti tra questi soggetti a un livello molto alto.<\/p>\n

    \"Illustrazione
    Come funzionano i pagamenti online<\/figcaption><\/figure>\n

    Il cliente comunica all’esercente la sua intenzione di pagare. L’esercente inoltra i dettagli del pagamento alla propria banca acquirente, che raccoglie il pagamento dalla banca emittente del cliente e comunica all’esercente che il pagamento \u00e8 andato a buon fine.<\/p>\n

    Questa \u00e8 una panoramica di alto livello del processo di pagamento. In qualit\u00e0 di commercianti, dovete solo preoccuparvi di raccogliere l’intenzione di pagamento, trasmetterla al processore di pagamento e gestire il risultato del pagamento. Tuttavia, come gi\u00e0 detto, potete procedere in due modi.<\/p>\n

    Quando create una sessione di checkout gestita da Stripe in cui Stripe si occupa della raccolta dei dati di pagamento, ecco come si presenta il flusso tipico:<\/p>\n

    \"Diagramma
    Il flusso di pagamento del checkout gestito da Stripe. (Fonte:<\/strong> Documenti di Stripe<\/a>)<\/figcaption><\/figure>\n

    Con i flussi di pagamento personalizzati, dipende tutto da voi. Potete progettare l’interazione tra il vostro client, il server, il cliente e l’API di Stripe in base alle esigenze della vostra applicazione. Potete aggiungere a questo flusso di lavoro la raccolta di indirizzi, la generazione di fatture, la cancellazione, le prove gratuite e cos\u00ec via, a seconda delle vostre esigenze.<\/p>\n

    Ora che avete capito come funzionano i pagamenti con Stripe, tutto \u00e8 pronto per iniziare a integrarlo nella vostra applicazione Java.<\/p>\n

    Integrazione di Stripe nell’applicazione Spring Boot<\/h2>\n

    Per iniziare l’integrazione di Stripe, create un’applicazione frontend per interagire con il backend Java e avviare i pagamenti. In questo tutorial, costruiremo un’applicazione React per attivare vari tipi di pagamento e abbonamenti in modo da acquisire una chiara comprensione dei loro meccanismi.<\/p>\n

    Nota<\/strong>: questo tutorial non si occuper\u00e0 della costruzione di un sito di ecommerce completo, ma ha lo scopo principale di guidarvi attraverso il semplice processo di integrazione di Stripe in Spring Boot.<\/p>\n

    Impostazione dei progetti Frontend e Backend<\/h3>\n

    Create una nuova cartella e un progetto React con Vite eseguendo il seguente comando:<\/p>\n

    npm create vite@latest<\/code><\/pre>\n
    Impostate il nome del progetto come frontend<\/strong> (o qualsiasi altro nome preferiate), il framework come React<\/strong> e la variante come TypeScript<\/strong>. Navigate nella directory del progetto e installate Chakra UI per creare rapidamente l’impalcatura degli elementi dell’interfaccia utente eseguendo il seguente comando:<\/p>\n
    npm i @chakra-ui\/react @emotion\/react @emotion\/styled framer-motion @chakra-ui\/icons<\/code><\/pre>\n
    Installate anche react-router-dom<\/code> nel vostro progetto per il routing lato client eseguendo il comando qui sotto:<\/p>\n
    npm i react-router-dom<\/code><\/pre>\n
    Ora siamo pronti per iniziare a costruire l’applicazione frontend. Ecco la homepage che andremo a costruire.<\/p>\n
    \"La
    La pagina iniziale completata per l’applicazione frontend.<\/figcaption><\/figure>\n
    Facendo clic su un pulsante qualsiasi di questa pagina, si accede a pagine di pagamento separate con moduli di pagamento. Per iniziare, create una nuova cartella denominata routes<\/strong> nella cartella frontend\/src<\/strong>. All’interno di questa cartella, create un file Home.tsx<\/strong>. Questo file conterr\u00e0 il codice del percorso home della vostra applicazione (\/<\/code>). Incollate il seguente codice nel file:<\/p>\n
    import {Button, Center, Heading, VStack} from \"@chakra-ui\/react\";\n\nimport { useNavigate } from \"react-router-dom\";\n\nfunction Home() {\n\tconst navigate = useNavigate()\n\tconst navigateToIntegratedCheckout = () => {\n    \tnavigate(\"\/integrated-checkout\")\n\t}\n\n\tconst navigateToHostedCheckout = () => {\n    \tnavigate(\"\/hosted-checkout\")\n\t}\n\n\tconst navigateToNewSubscription = () => {\n    \tnavigate(\"\/new-subscription\")\n\t}\n\n\tconst navigateToCancelSubscription = () => {\n    \tnavigate(\"\/cancel-subscription\")\n\t}\n\n\tconst navigateToSubscriptionWithTrial = () => {\n    \tnavigate(\"\/subscription-with-trial\")\n\t}\n\n\tconst navigateToViewInvoices = () => {\n    \tnavigate(\"\/view-invoices\")\n\t}\n\n\treturn (\n    \t<>\n        \t<Center h={'100vh'} color='black'>\n            \t<VStack spacing='24px'>\n                \t<Heading>Stripe Payments With React & Java<\/Heading>\n                \t<Button\n                    \tcolorScheme={'teal'}\n                    \tonClick={navigateToIntegratedCheckout}>\n                    \tIntegrated Checkout\n                \t<\/Button>\n                \t<Button\n                    \tcolorScheme={'blue'}\n                    \tonClick={navigateToHostedCheckout}>\n                    \tHosted Checkout\n                \t<\/Button>\n                \t<Button\n                    \tcolorScheme={'yellow'}\n                    \tonClick={navigateToNewSubscription}>\n                    \tNew Subscription\n                \t<\/Button>\n                \t<Button\n                    \tcolorScheme={'purple'}\n                    \tonClick={navigateToCancelSubscription}>\n                    \tCancel Subscription\n                \t<\/Button>\n                \t<Button\n                    \tcolorScheme={'facebook'}\n                    \tonClick={navigateToSubscriptionWithTrial}>\n                    \tSubscription With Trial\n                \t<\/Button>\n                \t<Button\n                    \tcolorScheme={'pink'}\n                    \tonClick={navigateToViewInvoices}>\n                    \tView Invoices\n                \t<\/Button>\n            \t<\/VStack>\n        \t<\/Center>\n    \t<\/>\n\t)\n}\n\nexport default Home<\/code><\/pre>\n
    Per abilitare la navigazione nella vostra applicazione, aggiornate il file App.tsx<\/strong> per configurare la classe RouteProvider<\/code> di react-router-dom<\/code>.<\/p>\n
    import Home from \".\/routes\/Home.tsx\";\nimport {\n\tcreateBrowserRouter,\n\tRouterProvider,\n} from \"react-router-dom\";\n\nfunction App() {\n\n\tconst router = createBrowserRouter([\n    \t{\n        \tpath: \"\/\",\n        \telement: (\n            \t<Home\/>\n        \t),\n    \t},\n\t]);\n\n  return (\n\t<RouterProvider router={router}\/>\n  )\n}\n\nexport default App<\/code><\/pre>\n
    Eseguite il comando npm run dev<\/code> per visualizzare l’anteprima della vostra applicazione su https:\/\/localhost:5173.<\/a><\/p>\n
    Questo completa la configurazione iniziale necessaria per l’applicazione frontend. Successivamente, create un’applicazione backend con Spring Boot. Per inizializzare l’applicazione, potete utilizzare il sito web di spring initializr<\/a> (se il vostro IDE supporta la creazione di applicazioni Spring, non \u00e8 necessario usare il sito web).<\/p>\n
    IntelliJ IDEA supporta la creazione di app Spring Boot. Iniziate scegliendo l’opzione New project<\/strong> su IntelliJ IDEA. Poi, scegliete Spring Initializr<\/strong> dal pannello di sinistra. Inserite i dettagli del progetto backend: nome (backend<\/strong>), posizione (directory stripe-payments-java<\/strong>), linguaggio (Java<\/strong>) e tipo (Maven<\/strong>). Per i nomi dei gruppi e degli artefatti, usate rispettivamente com.kinsta.stripe-java<\/strong> e backend<\/strong>.<\/p>\n
    \"La
    La finestra di dialogo del nuovo progetto IDEA.<\/figcaption><\/figure>\n
    Fate clic sul pulsante Next<\/strong>. Quindi, aggiungete le dipendenze al vostro progetto scegliendo Spring Web<\/strong> dal menu a tendina Web<\/strong> nel riquadro delle dipendenze e fate clic sul pulsante Create<\/strong>.<\/p>\n
    \"La
    La scelta delle dipendenze.<\/figcaption><\/figure>\n
    Questo creer\u00e0 il progetto Java e lo aprir\u00e0 nel vostro IDE. Ora potete procedere con la creazione dei vari flussi di pagamento utilizzando Stripe.<\/p>\n
    Accettare pagamenti online per l’acquisto di prodotti<\/h2>\n
    La funzionalit\u00e0 pi\u00f9 importante e pi\u00f9 utilizzata di Stripe \u00e8 l’accettazione di pagamenti una tantum da parte dei clienti. In questa sezione scoprirete due modi per integrare l’elaborazione dei pagamenti nella vostra app con Stripe.<\/p>\n
    Checkout ospitato<\/h3>\n
    Costruite una pagina di checkout che attiva un flusso di lavoro di checkout ospitato in cui il pagamento viene attivato solo dalla vostra applicazione frontend. Stripe si occupa di raccogliere i dati della carta del cliente e di incassare il pagamento, condividendo solo alla fine il risultato dell’operazione di pagamento.<\/p>\n
    Ecco come appare la pagina di pagamento:<\/p>\n
    \"La
    La pagina di checkout in hosting completata.<\/figcaption><\/figure>\n
    Questa pagina ha tre componenti principali: CartItem<\/code>, che rappresenta ogni articolo del carrello; TotalFooter<\/code>, che visualizza l’importo totale; CustomerDetails<\/code>, che raccoglie i dati del cliente. Potete riutilizzare questi componenti per creare moduli di pagamento per altri scenari illustrati in questo articolo, come il pagamento integrato e gli abbonamenti.<\/p>\n
    Costruire il frontend<\/h4>\n
    Create una cartella components<\/strong> nella cartella frontend\/src<\/strong>. Nella cartella components<\/strong>, create un nuovo file CartItem.tsx<\/strong> e incollate il seguente codice:<\/p>\n
    import {Button, Card, CardBody, CardFooter, Heading, Image, Stack, Text, VStack} from \"@chakra-ui\/react\";\n\nfunction CartItem(props: CartItemProps) {\n\treturn <Card direction={{base: 'column', sm: 'row'}}\n             \toverflow='hidden'\n             \twidth={'xl'}\n             \tvariant='outline'>\n    \t<Image\n        \tobjectFit='cover'\n        \tmaxW={{base: '100%', sm: '200px'}}\n        \tsrc={props.data.image}\n    \t\/>\n    \t<Stack mt='6' spacing='3'>\n        \t<CardBody>\n            \t<VStack spacing={'3'} alignItems={\"flex-start\"}>\n                \t<Heading size='md'>{props.data.name}<\/Heading>\n                \t<VStack spacing={'1'} alignItems={\"flex-start\"}>\n                    \t<Text>\n                        \t{props.data.description}\n                    \t<\/Text>\n                    \t{(props.mode === \"checkout\" ? <Text>\n                        \t{\"Quantity: \" + props.data.quantity}\n                    \t<\/Text> : <><\/>)}\n                \t<\/VStack>\n            \t<\/VStack>\n        \t<\/CardBody>\n\n        \t<CardFooter>\n            \t<VStack alignItems={'flex-start'}>\n                \t<Text color='blue.600' fontSize='2xl'>\n                    \t{\"$\" + props.data.price}\n                \t<\/Text>\n            \t<\/VStack>\n        \t<\/CardFooter>\n    \t<\/Stack>\n\t<\/Card>\n}\n\nexport interface ItemData {\n\tname: string\n\tprice: number\n\tquantity: number\n\timage: string\n\tdescription: string\n\tid: string\n}\n\ninterface CartItemProps {\n\tdata: ItemData\n\tmode: \"subscription\" | \"checkout\"\n\tonCancelled?: () => void\n}\n\nexport default CartItem<\/code><\/pre>\n
    Il codice precedente definisce due interfacce da usare come tipi per le propriet\u00e0 passate al componente. Il tipo ItemData<\/code> viene esportato per essere riutilizzato in altri componenti.<\/p>\n
    Il codice restituisce il layout di un componente articolo del carrello. Utilizza i props forniti per rendere l’articolo sullo schermo.<\/p>\n
    Quindi, create un file TotalFooter.tsx<\/strong> nella cartella components<\/strong> e incollate il seguente codice:<\/p>\n
    import {Divider, HStack, Text} from \"@chakra-ui\/react\";\n\nfunction TotalFooter(props: TotalFooterProps) {\n\treturn <>\n    \t<Divider \/>\n    \t<HStack>\n        \t<Text>Total<\/Text>\n        \t<Text color='blue.600' fontSize='2xl'>\n            \t{\"$\" + props.total}\n        \t<\/Text>\n    \t<\/HStack>\n    \t{props.mode === \"subscription\" &&\n        \t<Text fontSize={\"xs\"}>(Monthly, starting today)<\/Text>\n    \t}\n    \t{props.mode === \"trial\" &&\n        \t<Text fontSize={\"xs\"}>(Monthly, starting next month)<\/Text>\n    \t}\n\t<\/>\n}\n\ninterface TotalFooterProps {\n\ttotal: number\n\tmode: \"checkout\" | \"subscription\" | \"trial\"\n}\n\nexport default TotalFooter\n<\/code><\/pre>\n
    Il componente TotalFooter<\/code> visualizza il valore totale del carrello e utilizza il valore mode<\/code> per rendere condizionatamente<\/a> un testo specifico.<\/p>\n
    Infine, create il componente CustomerDetails.tsx<\/code> e incollate il seguente codice:<\/p>\n
    import {ItemData} from \".\/CartItem.tsx\";\nimport {Button, Input, VStack} from \"@chakra-ui\/react\";\nimport {useState} from \"react\";\n\nfunction CustomerDetails(props: CustomerDetailsProp) {\n\tconst [name, setName] = useState(\"\")\n\tconst [email, setEmail] = useState(\"\")\n\tconst onCustomerNameChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    \tsetName(ev.target.value)\n\t}\n\n\n\n\tconst onCustomerEmailChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    \tsetEmail(ev.target.value)\n\t}\n\n\tconst initiatePayment = () => {\n    \tfetch(process.env.VITE_SERVER_BASE_URL + props.endpoint, {\n        \tmethod: \"POST\",\n        \theaders: {'Content-Type': 'application\/json'},\n        \tbody: JSON.stringify({\n            \titems: props.data.map(elem => ({name: elem.name, id: elem.id})),\n            \tcustomerName: name,\n            \tcustomerEmail: email,\n        \t})\n    \t})\n        \t.then(r => r.text())\n        \t.then(r => {\n            \twindow.location.href = r\n        \t})\n\n\t}\n\n\treturn <>\n    \t<VStack spacing={3} width={'xl'}>\n        \t<Input variant='filled' placeholder='Customer Name' onChange={onCustomerNameChange} value={name}\/>\n        \t<Input variant='filled' placeholder='Customer Email' onChange={onCustomerEmailChange} value={email}\/>\n        \t<Button onClick={initiatePayment} colorScheme={'green'}>Checkout<\/Button>\n    \t<\/VStack>\n\t<\/>\n}\n\ninterface CustomerDetailsProp {\n\tdata: ItemData[]\n\tendpoint: string\n}\n\nexport default CustomerDetails\n<\/code><\/pre>\n
    Il codice precedente visualizza un modulo con due campi di input per raccogliere il nome e l’email dell’utente. Quando si fa clic sul pulsante Checkout<\/strong>, viene invocato il metodo initiatePayment<\/code> per inviare la richiesta di checkout al backend.<\/p>\n
    Richiede l’endpoint che avete passato al componente e invia le informazioni del cliente e gli articoli del carrello come parte della richiesta, quindi reindirizza l’utente all’URL ricevuto dal server. Questo URL condurr\u00e0 l’utente a una pagina di pagamento ospitata sul server di Stripe. La creazione di questo URL avverr\u00e0 nel giro di poco.<\/p>\n
    Nota:<\/strong> questo componente usa la variabile d’ambiente VITE_SERVER_BASE_URL<\/code> per l’URL del server backend. Impostatela creando un file .env<\/strong> nella root del vostro progetto:<\/p>\n
    VITE_SERVER_BASE_URL=http:\/\/localhost:8080<\/a><\/code><\/pre>\n
    Tutti i componenti sono stati creati. Ora procediamo a costruire il percorso di checkout hosted utilizzando i componenti. Per farlo, create un nuovo file HostedCheckout.tsx<\/strong> nella cartella routes<\/strong> con il seguente codice:<\/p>\n
    import {Center, Heading, VStack} from \"@chakra-ui\/react\";\nimport {useState} from \"react\";\nimport CartItem, {ItemData} from \"..\/components\/CartItem.tsx\";\nimport TotalFooter from \"..\/components\/TotalFooter.tsx\";\nimport CustomerDetails from \"..\/components\/CustomerDetails.tsx\";\nimport {Products} from '..\/data.ts'\n\nfunction HostedCheckout() {\n\tconst [items] = useState<ItemData[]>(Products)\n\treturn <>\n    \t<Center h={'100vh'} color='black'>\n        \t<VStack spacing='24px'>\n            \t<Heading>Hosted Checkout Example<\/Heading>\n            \t{items.map(elem => {\n                \treturn <CartItem data={elem} mode={'checkout'}\/>\n            \t})}\n            \t<TotalFooter total={30} mode={\"checkout\"}\/>\n            \t<CustomerDetails data={items} endpoint={\"\/checkout\/hosted\"} mode={\"checkout\"}\/>\n        \t<\/VStack>\n    \t<\/Center>\n\t<\/>\n}\n\nexport default HostedCheckout\n<\/code><\/pre>\n
    Questo percorso usa i tre componenti che avete appena costruito per assemblare una schermata di checkout. Tutte le modalit\u00e0 dei componenti sono configurate come checkout<\/strong> e l’endpoint \/checkout\/hosted<\/code> \u00e8 fornito al componente del modulo per avviare con precisione la richiesta di checkout.<\/p>\n
    Il componente usa un oggetto Products<\/code> per riempire l’array degli articoli. Negli scenari reali, questi dati provengono dall’API del carrello e contengono gli articoli selezionati dall’utente. Tuttavia, per questo tutorial, un elenco statico proveniente da uno script popola l’array. Definite l’array creando un file data.ts<\/strong> nella root del vostro progetto frontend e inserendovi il seguente codice:<\/p>\n
    import {ItemData} from \".\/components\/CartItem.tsx\";\n\nexport const Products: ItemData[] = [\n\t{\n    \tdescription: \"Premium Shoes\",\n    \timage: \"https:\/\/source.unsplash.com\/NUoPWImmjCU\",\n    \tname: \"Puma Shoes\",\n    \tprice: 20,\n    \tquantity: 1,\n    \tid: \"shoe\"\n\t},\n\t{\n    \tdescription: \"Comfortable everyday slippers\",\n    \timage: \"https:\/\/source.unsplash.com\/K_gIPI791Jo\",\n    \tname: \"Nike Sliders\",\n    \tprice: 10,\n    \tquantity: 1,\n    \tid: \"slippers\"\n\t},\n]\n<\/code><\/pre>\n
    Questo file definisce due elementi dell’array di prodotti che vengono visualizzati nel carrello. Potete modificare liberamente i valori dei prodotti.<\/p>\n
    Come ultimo passo della creazione del frontend, create due nuovi percorsi per gestire il successo e il fallimento. La pagina di pagamento ospitata da Stripe reindirizzer\u00e0 gli utenti verso la vostra applicazione attraverso questi due percorsi in base al risultato della transazione. Stripe fornir\u00e0 alle vostre rotte anche il payload relativo alla transazione, come l’ID della sessione di checkout, che potrete usare per recuperare l’oggetto della sessione di checkout corrispondente<\/a> e accedere ai dati relativi al checkout come il metodo di pagamento, i dettagli della fattura, ecc.<\/p>\n
    Per farlo, create un file Success.tsx<\/strong> nella cartella src\/routes<\/strong> e inserite il seguente codice:<\/p>\n
    import {Button, Center, Heading, Text, VStack} from \"@chakra-ui\/react\";\nimport {useNavigate} from \"react-router-dom\";\n\nfunction Success() {\n\tconst queryParams = new URLSearchParams(window.location.search)\n\tconst navigate = useNavigate()\n\tconst onButtonClick = () => {\n    \tnavigate(\"\/\")\n\t}\n\treturn <Center h={'100vh'} color='green'>\n    \t<VStack spacing={3}>\n        \t<Heading fontSize={'4xl'}>Success!<\/Heading>\n        \t<Text color={'black'}>{queryParams.toString().split(\"&\").join(\"n\")}<\/Text>\n        \t<Button onClick={onButtonClick} colorScheme={'green'}>Go Home<\/Button>\n    \t<\/VStack>\n\t<\/Center>\n}\n\nexport default Success\n<\/code><\/pre>\n
    Al momento del rendering, questo componente mostra il messaggio “Success!” e stampa sullo schermo i parametri della query URL. Include anche un pulsante per reindirizzare gli utenti alla homepage dell’applicazione.<\/p>\n
    Quando si realizzano applicazioni reali, questa pagina \u00e8 il luogo in cui si gestiscono le transazioni non critiche sul lato dell’applicazione che dipendono dal successo della transazione in questione. Per esempio, se state creando una pagina di checkout per un negozio online, potreste usare questa pagina per mostrare una conferma all’utente e un’ora di consegna dei prodotti acquistati.<\/p>\n
    Quindi, create un file Failure.tsx<\/strong> con il seguente codice:<\/p>\n
    import {Button, Center, Heading, Text, VStack} from \"@chakra-ui\/react\";\nimport {useNavigate} from \"react-router-dom\";\n\nfunction Failure() {\n\tconst queryParams = new URLSearchParams(window.location.search)\n\tconst navigate = useNavigate()\n\tconst onButtonClick = () => {\n    \tnavigate(\"\/\")\n\t}\n\n\treturn <Center h={'100vh'} color='red'>\n    \t<VStack spacing={3}>\n        \t<Heading fontSize={'4xl'}>Failure!<\/Heading>\n        \t<Text color={'black'}>{queryParams.toString().split(\"&\").join(\"n\")}<\/Text>\n        \t<Button onClick={onButtonClick} colorScheme={'red'}>Try Again<\/Button>\n    \t<\/VStack>\n\t<\/Center>\n}\n\nexport default Failure\n<\/code><\/pre>\n
    Questo componente \u00e8 simile a quello di Success.tsx<\/strong> e visualizza il messaggio “Failure!” quando viene reso.<\/p>\n