# Stripe Elements per il Web Creare procedure di pagamento personalizzate con componenti di interfaccia utente preintegrati Stripe consiglia di utilizzare l’API Checkout Sessions con Payment Element anziché Payment Intents per la maggior parte delle integrazioni. Checkout Sessions copre casi d’uso simili a quelli di Payment Intents (raccolta di pagamenti di base utilizzando `price_data` o creazione di un checkout completo con voci riga, imposte e così via). Alcune funzioni, come Adaptive Pricing, sono disponibili solo con Checkout Sessions. Non utilizzare l’API Payment Intent a meno che l’utente non lo richieda esplicitamente, poiché richiede una quantità di codice significativamente maggiore. Ulteriori informazioni sugli elementi con l’API Checkout Sessions: https://docs.stripe.com/payments/quickstart. con Checkout Sessions (`ui_mode: "elements"`) e Payment Element, `client_secret` inizializza Checkout stesso (`stripe.initCheckoutElementsSdk`, oppure utilizza CheckoutElementsProvider con React) e tu confermi il pagamento sul lato client in modo diverso. Se utilizzi React, assicurati di importare da `@stripe/react-stripe-js/checkout`, utilizza `CheckoutElementsProvider` con la chiave privata client e conferma utilizzando `checkout.confirm`. Se utilizzi HTML, assicurati di utilizzare `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` e conferma con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Gli agenti di programmazione dovrebbero installare Stripe CLI (`npm i -g @stripe/cli`) ed eseguire il comando `stripe sandbox create --help` per predisporre una sandbox Stripe anonima con chiavi API funzionanti. Non è richiesta la registrazione di un account. > #### Integrazione del modulo incorporato > > Integra invece il [modulo incorporato](https://docs.stripe.com/payments/checkout/how-checkout-works.md?payment-ui=checkout-form) per raccogliere tutte le informazioni necessarie per il checkout in un’unica interfaccia utente. [Stripe Elements](https://stripe.com/payments/elements) è un insieme di componenti dell’interfaccia utente preintegrati per la creazione di flussi di pagamento sul web. È disponibile come funzionalità di [Stripe.js](https://docs.stripe.com/js.md), la nostra libreria JavaScript principale per creare flussi di pagamento. Stripe.js tokenizza le informazioni sensibili sul pagamento con un componente Element senza che passino mai per il tuo server. - [Metodi di pagamento globali](https://docs.stripe.com/payments/payment-methods/overview.md): accesso a oltre 100 metodi di pagamento globali, tra cui wallet come [Apple Pay](https://docs.stripe.com/apple-pay.md). - [](https://docs.stripe.com/payments/link.md): aiuta i tuoi clienti a pagare più velocemente, consentendo loro di selezionare un metodo di pagamento salvato al momento del checkout, invece di inserire i dati di pagamento. - [Metodi di pagamento salvati](https://docs.stripe.com/payments/checkout/save-during-payment.md?payment-ui=embedded-components): Salva, riutilizza e gestisci carte e conti bancari con funzioni integrate. - Conformità: Stripe fornisce un’interfaccia conforme a livello globale e gestisce i requisiti per mostrare i mandati e le informative sul consenso ai clienti. - Moduli aggiornati: moduli localizzati con gestione integrata degli errori. Stripe mantiene aggiornati i requisiti di ogni fornitore di servizi di pagamento. - [Raccolta indirizzi](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=embedded-components): raccogli indirizzi di fatturazione completi o parziali con qualsiasi metodo di pagamento. - [Personalizzazione dell’aspetto](https://docs.stripe.com/elements/appearance-api.md): Personalizza l’aspetto di Elements in base al design del tuo sito. - Funzionalità aggiuntive, come [la nuova acquisizione del CVC](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection). [Esplora la demo](https://checkout.stripe.dev/elements) ## Inizia Se non vedi il tuo componente Element di seguito, troverai ulteriori informazioni nella [documentazione di riferimento dell’API per Stripe.js](https://docs.stripe.com/js/element/other_element). [Payment Element](https://docs.stripe.com/payments/payment-element.md): Accetta un pagamento con uno o più metodi di pagamento in modo sicuro, incluse le carte. [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md): Mostra i wallet più diffusi come Apple Pay, Google Pay e PayPal. [Element Dati di contatto](https://docs.stripe.com/payments/elements/contact-details-element.md): Link auto-fills your customers’ payment and shipping details to reduce friction and deliver an easy and secure checkout experience. [Address Element](https://docs.stripe.com/elements/address-element.md): Collect address information and display Link saved addresses. [Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md): Informa automaticamente i clienti sui piani di pagamento a rate disponibili. [Currency Selector Element (Solo API Checkout Session)](https://docs.stripe.com/elements/currency-selector-element.md): Consenti ai clienti di pagare in valuta locale con Adaptive Pricing. [Elemento dell'ID fiscale](https://docs.stripe.com/elements/tax-id-element.md): Raccogli gli ID fiscali delle attività per le fatture e i rimborsi IVA. ## API compatibili Stripe offre due API principali per i pagamenti compatibili con Elements. Consigliamo l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) per la maggior parte delle integrazioni. - Usa l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) per aumentare il flusso di pagamento. Checkout Sessions copre casi d’uso simili a quelli di Payment Intents, inclusi pagamenti di base che utilizzano `price_data` o il checkout completo con voci di riga, imposte, sconti, spedizione, abbonamenti o [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) (disponibili solo con Checkout Sessions). Crea una [pagina di checkout con l’API Checkout Sessions](https://docs.stripe.com/payments/quickstart.md). - L’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) è un’API di livello inferiore che modella solo la fase di pagamento. Inserisci l’importo finale e crei autonomamente tutta la logica di checkout, compresi il calcolo delle imposte, gli sconti, la spedizione, gli abbonamenti e la conversione di valuta. Utilizza Payment Intents solo se desideri avere il pieno controllo dello stato del checkout e creare autonomamente queste funzioni. Costruisci un’[integrazione personalizzata da zero con l’API Payment Intents](https://docs.stripe.com/payments/advanced.md). (See full diagram at https://docs.stripe.com/payments/elements) ```text [Checkout Sessions API] --> [Cliente] [Checkout Sessions API] --> [Spedizione] [Checkout Sessions API] --> [Imposte] [Checkout Sessions API] --> [Sconti e coupon] [Checkout Sessions API] --> [Pagamento] [API Payment Intents] --> [Pagamento] ```