# Stripe Payment Element Accetta modalità di pagamento utilizzate in tutto il mondo con un componente di interfaccia sicuro e integrabile. 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-checkout-sessions. 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. Payment Element è un componente dell’interfaccia utente per il Web che ti consente di accettare oltre 100 metodi di pagamento, convalida i dati inseriti e gestisce gli errori. Integra questo elemento a tuo piacimento, sia da solo che in combinazione con altri elementi nel front-end della tua app Web. ## 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). Costruisci una [pagina di completamento della transazione con l’API Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.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/payment-element) [Crea un'integrazione avanzata con Payment Element e Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md): Crea un’integrazione con Payment Element utilizzando l’API Checkout Sessions. [Crea un'integrazione con Payment Element e Checkout Sessions](https://docs.stripe.com/payments/quickstart.md): Usa l’API Payment Intents per creare il tuo flusso di pagamento. [Clonare un'app campione su GitHub](https://github.com/stripe-samples/accept-a-payment/tree/main/payment-element) ## Combinare elementi Payment Element interagisce con altri elementi. Ad esempio, questo modulo utilizza un elemento aggiuntivo per [compilare automaticamente i dettagli del pagamento](https://docs.stripe.com/payments/link.md) e un altro per [raccogliere l’indirizzo di spedizione](https://docs.stripe.com/elements/address-element.md). > Non è possibile rimuovere l’accordo legale di Link poiché è necessario per garantire che gli utenti siano adeguatamente informati sui termini di servizio e sulle informative sulla privacy. L’oggetto [termini](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-terms) non si applica all’accordo legale di Link. ![Modulo con informazioni di contatto, indirizzo di spedizione e campi di pagamento. Le informazioni di contatto sono etichettate come Contact Details Element, l'indirizzo di spedizione come Address Element e i campi di pagamento come Payment Element.](images/link/link-with-Elements.png) Modulo di pagamento che combina più elementi Per il codice completo di questo esempio, consulta [Aggiungere a un’integrazione Elements](https://docs.stripe.com/payments/link/add-link-elements-integration.md). Puoi anche combinare Payment Element con [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md). In questo caso, i metodi di pagamento del wallet come Apple Pay e Google Pay vengono visualizzati solo in Express Checkout Element per evitare duplicazioni. ## Modalità di pagamento Stripe abilita alcune modalità di pagamento per impostazione predefinita. Può anche abilitare ulteriori modalità di pagamento dopo averti avvisato. Utilizza la [Dashboard](https://dashboard.stripe.com/settings/payment_methods) per abilitare o disabilitare le modalità di pagamento in qualsiasi momento. Con Payment Element puoi utilizzare [modalità di pagamento dinamiche](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) per: - Gestire i metodi di pagamento nella [Dashboard](https://dashboard.stripe.com/settings/payment_methods) senza codifica - Mostrare in modo dinamico le opzioni di pagamento più pertinenti in base a fattori quali posizione, valuta e importo della transazione Ad esempio, se un cliente in Germania paga in EUR, vede tutte le modalità di pagamento attive che accettano EUR, a partire da quelle più utilizzate in Germania. ![Ampia gamma di modalità di pagamento.](https://b.stripecdn.com/docs-statics-srv/assets/payment-element-methods.26cae03aff199d6f02b0d92bd324c219.png) Mostra le modalità di pagamento in ordine di rilevanza per il tuo cliente Per personalizzare ulteriormente la visualizzazione dei metodi di pagamento, consulta [Personalizzare metodi di pagamento](https://docs.stripe.com/payments/customize-payment-methods.md). Per aggiungere metodi di pagamento integrati al di fuori di Stripe, puoi utilizzare [metodi di pagamento personalizzati](https://docs.stripe.com/payments/payment-element/custom-payment-methods.md). Se l’integrazione ti richiede di elencare i metodi di pagamento manualmente, consulta [Elencare manualmente i metodi di pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually). ## Layout Puoi personalizzare il layout di Payment Element per adattarlo al flusso di pagamento. L’immagine seguente è lo stesso Payment Element reso utilizzando configurazioni di layout diverse. ![Esempi dei tre moduli di pagamento. L'immagine mostra l'opzione scheda, in cui i clienti scelgono tra i metodi di pagamento mostrati come schede o le due opzioni fisarmonica, in cui i metodi di pagamento sono elencati verticalmente. Puoi scegliere se visualizzare i pulsanti di opzione o meno nella vista a fisarmonica.](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png) Payment Element con diversi layout. #### Schede Il layout delle schede visualizza i metodi di pagamento orizzontalmente utilizzando le schede. Per utilizzare questo layout, imposta il valore di [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) su `tabs`. Puoi inoltre specificare altre proprietà, ad esempio [layout.defaultCollapsed](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-defaultCollapsed). ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { layout: { type: 'tabs', defaultCollapsed: false, } }; const elements = stripe.elements({ clientSecret, appearance }); // In un'integrazione di lavoro, questo è un valore che il tuo backend passa con dettagli come l'importo di un pagamento. Visualizza il campione completo per i dettagli. const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` #### Fisarmonica con pulsanti di opzione Il layout a fisarmonica visualizza i metodi di pagamento verticalmente utilizzando una fisarmonica. Per utilizzare questo layout, imposta il valore di [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) su `accordion`. È inoltre possibile specificare altre proprietà, ad esempio [layout.radios](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-radios) per visualizzare i pulsanti di selezione. ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { layout: { type: 'accordion', defaultCollapsed: false, radios: 'always', spacedAccordionItems: false } }; const clientSecret = {{CLIENT_SECRET}}; // In un'integrazione di lavoro, questo è un valore che il tuo backend passa con dettagli come l'importo di un pagamento. Visualizza il campione completo per i dettagli. const elements = stripe.elements({ clientSecret, appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` #### Fisarmonica senza pulsanti di opzione Il layout a fisarmonica visualizza i metodi di pagamento verticalmente utilizzando una fisarmonica. Per utilizzare questo layout, imposta il valore di [layout.type](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-type) su `accordion`. È inoltre possibile specificare altre proprietà, ad esempio [layout.spacedAccordionItems](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout-spacedAccordionItems) per creare altro spazio verticale. ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { layout: { type: 'accordion', defaultCollapsed: false, radios: 'never', spacedAccordionItems: true } }; const clientSecret = {{CLIENT_SECRET}}; // In un'integrazione di lavoro, questo è un valore che il tuo backend passa con dettagli come l'importo di un pagamento. Visualizza il campione completo per i dettagli. const elements = stripe.elements({ clientSecret, appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` ## Aspetto Utilizza l’API Appereance per controllare lo stile di tutti gli elementi. Scegli un tema o aggiorna dettagli specifici. ![Esempi di modalità chiare e scure per il modulo di pagamento di Payment Element.](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png) Ad esempio, scegli il tema “piatto” e ignora il colore del testo principale. ```javascript const stripe = Stripe('<>'); const appearance = { theme: 'flat', variables: { colorPrimaryText: '#262626' } }; const options = { /* options */ }; const elements = stripe.elements({ clientSecret, appearance }); // In un'integrazione di lavoro, questo è un valore che il tuo backend passa con dettagli come l'importo di un pagamento. Visualizza il campione completo per i dettagli. const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` Per un elenco completo dei temi e delle variabili, consulta la documentazione dell’[API Appearance](https://docs.stripe.com/elements/appearance-api.md). ## Opzioni Gli elementi Stripe supportano più opzioni di queste. Ad esempio, visualizza il nome della tua attività commerciale utilizzando l’opzione [business](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business). ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */}; const options = { business: { name: "RocketRides" } }; const clientSecret = {{CLIENT_SECRET}}; // In un'integrazione di lavoro, questo è un valore che il tuo backend passa con dettagli come l'importo di un pagamento. Visualizza il campione completo per i dettagli. const elements = stripe.elements(appearance, clientSecret); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element'); ``` Payment Element supporta le seguenti opzioni. Per ulteriori informazioni, vedere la voce di riferimento di ciascuna opzione. | | | [layout](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout) | Layout per Payment Element. | | [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) | Le informazioni iniziali sul cliente da visualizzare in Payment Element. | | [business](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business) | Informazioni sull’azienda da visualizzare in Payment Element. | | [paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business) | Ordine in cui elencare le modalità di pagamento. | | [campi](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-fields) | Indica se visualizzare determinati campi. | | [readOnly](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-readOnly) | Se i dati di pagamento possono essere cambiati. | | [terms](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-terms) | Se i mandati o altri accordi legali sono visualizzati in Payment Element. Il comportamento predefinito è quello di mostrarli solo quando necessario. | | [wallets](https://docs.stripe.com/js/elements_object/create_payment_element) | Indica se mostrare i wallet come Apple Pay o Google Pay. L’impostazione predefinita è di mostrarli quando possibile. | ## Errori Payment Element mostra automaticamente messaggi di errore localizzati rivolti al cliente durante la conferma del cliente per i seguenti codici di rifiuto: - `card_declined` - `card_velocity_exceeded` - `expired_card` - `fraudulent` - `generic_decline` - `incorrect_cvc` - `incorrect_number` - `incorrect_zip` - `insufficient_funds` - `invalid_cvc` - `invalid_expiry_month` - `invalid_expiry_year` - `live_mode_test_card` - `lost_card` - `processing_error` - `stolen_card` - `test_mode_live_card` Per visualizzare i messaggi relativi ad altri tipi di errori, fai riferimento a [codici di errore](https://docs.stripe.com/error-codes.md) e [gestione degli errori](https://docs.stripe.com/error-handling.md).