# Express Checkout Element Mostra più pulsanti di pagamento in un solo clic con un unico componente Istruzioni per gli LLM: Stripe consiglia di utilizzare l’API Checkout Sessions con Pay,emt 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: "custom"`) e Payment Element, `client_secret` inizializza Checkout stesso (`stripe.initCheckout`, oppure utilizza CheckoutProvider 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 `CheckoutProvider` con la chiave privata client e conferma utilizzando `checkout.confirm`. Se utilizzi HTML, assicurati di utilizzare `checkout = stripe.initCheckout({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();`. Express Checkout Element è un integrazione che accetta pagamenti con un clic sui pulsanti dei metodi di pagamento. I metodi di pagamento supportati includono [Link](https://docs.stripe.com/payments/link.md),[Apple Pay](https://docs.stripe.com/apple-pay.md), [Google Pay](https://docs.stripe.com/google-pay.md), [PayPal](https://docs.stripe.com/payments/paypal.md), [Klarna](https://docs.stripe.com/payments/klarna.md) e [Amazon Pay](https://docs.stripe.com/payments/amazon-pay.md). Con questa integrazione puoi: - Ordinare in modo dinamico i pulsanti di pagamento in base alla posizione del cliente. - Aggiungere pulsanti di pagamento senza modifiche del front-end. - Integrare Elements senza problemi riutilizzando un’istanza di Elements esistente per risparmiare tempo. ## Prova la demo Nella seguente demo puoi attivare alcune delle opzioni predefinite per modificare il colore di sfondo, il layout, le dimensioni e la raccolta degli indirizzi di spedizione dell’interfaccia di pagamento. La demo mostra solo Google Pay e Apple Pay sulle loro piattaforme disponibili. I pulsanti dei metodi di pagamento vengono visualizzati solo nei Paesi supportati. Se non visualizzi la demo, prova a visualizzare questa pagina in un [browser supportato](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). | Opzioni | Descrizione | | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Paese dell’esercente** | Impostalo utilizzando la [chiave pubblicabile](https://docs.stripe.com/keys.md#obtain-api-keys) che utilizzi per [inizializzare Stripe.js](https://docs.stripe.com/js/initializing). Per modificare il Paese, devi smontare Express Checkout Element, aggiornare la chiave pubblicabile e quindi rimontare Express Checkout Element. | | **Colore di sfondo** | Imposta i colori utilizzando l’[API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md). I temi dei pulsanti vengono ereditati dalla API Appearance, ma puoi anche [definirli direttamente quando crei l’Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme). | | **Dimensioni per desktop e dispositivi mobili** | Utilizza il menu a discesa per impostare la larghezza massima in pixel dell’elemento principale su cui è montato Express Checkout Element. Puoi impostarlo su 750 px (desktop) o 320 px (dispositivo mobile). | | **Numero massimo di colonne e numero massimo di righe** | Imposta questi valori utilizzando il parametro [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) quando [crei Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element). | | **Menu extra** | Impostalo utilizzando il parametro [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) quando [crei Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element). | | **Raccogli l’indirizzo di spedizione** | Per raccogliere le informazioni sulla spedizione, devi specificare le opzioni durante la [creazione](https://docs.stripe.com/js/elements_object/create_express_checkout_element) di Express Checkout Element. Scopri di più su come [raccogliere i dati del cliente e visualizzare le voci riga](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event). | ## Inizia con una guida [Aggiungere i wallet con un clic alla pagina di pagamento](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md): Crea un’integrazione con Express Checkout Element utilizzando l’API Checkout Sessions. [Usare i wallet con un solo clic nelle integrazioni avanzate](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=elements): Crea un’integrazione con Express Checkout Element utilizzando l’API Payment Intents. [Effettuare la migrazione a Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/migration.md): Eseguire la migrazione da Payment Request Button Element a Express Checkout Element ## Modalità di pagamento Express Checkout Element presenta le modalità di pagamento con un clic attive, supportate e configurate. - Alcuni metodi di pagamento [richiedono l’attivazione nella Dashboard](https://dashboard.stripe.com/settings/payment_methods). - Le modalità di pagamento sono disponibili solo quando il cliente utilizza un browser supportato e paga in una valuta supportata. - Alcune modalità di pagamento richiedono azioni di configurazione da parte del cliente. Ad esempio, un cliente non vedrà un pulsante per Google Pay se non ha configurato Google Pay. - [Registra il tuo dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) sia nel tuo ambiente di test che in modalità live. L’elemento ordina le modalità di pagamento in base alla pertinenza per il cliente. Per controllare questi comportamenti, puoi [personalizzare le modalità di pagamento](https://docs.stripe.com/elements/express-checkout-element.md#customize-payment-methods). ## Browser supportati Alcune modalità di pagamento funzionano con browser specifici. | | Apple Pay | Google Pay | Link | PayPal | Amazon Pay | Klarna | | ------------------ | ---------------- | ------------- | ---------------- | ---------------- | ---------------- | ---------------- | | Chrome1 | ✓ Supportato3 | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | | Edge | ✓ Supportato3 | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | | Firefox | ❌ Non supportato | ✓ Supported5 | ❌ Non supportato | ✓ Supportato | ✓ Supportato | ❌ Non supportato | | Opera | ✓ Supportato3 | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | | Safari | ✓ Supported2 | ✓ Supportato4 | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | | Chrome su iOS 16+ | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | ✓ Supportato | | Firefox su iOS 16+ | ✓ Supportato | ✓ Supportato | ✓ Supportato | ❌ Non supportato | ❌ Non supportato | ❌ Non supportato | | Edge su iOS 16+ | ✓ Supportato | ✓ Supportato | ❌ Non supportato | ❌ Non supportato | ❌ Non supportato | ❌ Non supportato | 1Altri browser Chromium potrebbero essere supportati. Per ulteriori informazioni, consulta [Browser supportati](https://docs.stripe.com/js/appendix/supported_browsers). 2Quando utilizzi un iframe, la sua origine deve corrispondere all’origine di primo livello (ad eccezione di Safari 17+ quando specifichi l’attributo `allow="payment"`). Due pagine hanno la stessa origine se il protocollo, l’host (nome di dominio completo) e la porta (se specificata) sono le stesse per entrambe le pagine. 3Apple Pay su browser Chromium desktop è supportato solo su MacOS se [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) è impostato su `always`. 4Google Pay sui browser basato su Safari è supportato solo se [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) è impostato su `always`. 5Google Pay sui browser Firefox è supportato solo se [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) è impostato su `always`. > L’elemento Express Checkout ha un supporto limitato nelle visualizzazioni web in-app. Molti metodi di pagamento richiedono finestre popup e potrebbero non funzionare correttamente. Per le integrazioni con app mobili, valuta l’utilizzo dell’[SDK iOS](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) o dell’[SDK Android](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android). ## Layout Per impostazione predefinita, quando Express Checkout Element visualizza più pulsanti, dispone i pulsanti in una griglia in base allo spazio disponibile e mostra un menu extra, se necessario. Puoi ignorare questa impostazione predefinita e personalizzare il layout a griglia con l’opzione [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout). ## Testo Puoi controllare il testo di un pulsante selezionando un [buttonType](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonType). Ogni wallet offre le sue tipologie. #### Link Link offre un solo tipo di pulsante, che presenta l’invito all’azione “Paga con Link” e il logo di Link. Cerchiamo di rilevare le impostazioni locali del cliente e di utilizzarle per localizzare il testo del pulsante. Puoi anche specificare un’[impostazione locale](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). #### Apple Pay I tipi di pulsanti per Apple Pay presentano inviti all’azione diversi accanto al logo Apple Pay. Cerchiamo di rilevare le impostazioni locali del cliente e di inviarle ad Apple in modo che possa localizzare il testo del pulsante. Puoi anche specificare un’[impostazione locale](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Supportiamo i seguenti tipi di pulsanti per Apple Pay. | Tipo di pulsante | Invito all’azione | | ---------------- | --------------------- | | `plain` | Nessuno, solo il logo | | `add-money` | “Aggiungi denaro con” | | `book` | “Prenota con” | | `buy` | “Acquista con” | | `check-out` | “Paga con” | | `contribute` | “Contribuisci con” | | `donate` | “Dona con” | | `order` | “Ordina con” | | `reload` | “Ricarica con” | | `rent` | “Noleggia con” | | `subscribe` | “Abbonati con” | | `support` | “Supporta con” | | `tip` | “Dai la mancia con” | | `top-up` | “Ricarica con” | #### Google Pay I tipi di pulsanti per Google Pay presentano inviti all’azione diversi accanto al logo Google Pay. Cerchiamo di rilevare le impostazioni locali del cliente e di inviarle a Google Pay in modo che possa localizzare il testo del pulsante. Puoi anche specificare un’[impostazione locale](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Supportiamo i seguenti tipi di pulsanti per Google Pay. | Tipo di pulsante | Invito all’azione | | ---------------- | --------------------- | | `plain` | Nessuno, solo il logo | | `book` | “Prenota con” | | `buy` | “Acquista con” | | `checkout` | “Paga con” | | `donate` | “Dona con” | | `order` | “Ordina con” | | `pay` | “Paga con” | | `subscribe` | “Abbonati con” | #### PayPal I tipi di pulsanti per PayPal presentano inviti all’azione diversi accanto al logo PayPal. Cerchiamo di rilevare le impostazioni locali del cliente e di inviarle a PayPal in modo che possa localizzare il testo del pulsante. Puoi anche specificare un’[impostazione locale](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Supportiamo i seguenti tipi di pulsanti per PayPal. | Tipo di pulsante | Invito all’azione | | ---------------- | --------------------- | | `paypal` | Nessuno, solo il logo | | `checkout` | “Paga” | | `buynow` | “Acquista ora” | | `pay` | “Paga con” | #### Amazon Pay Amazon Pay offre un solo tipo di pulsante, che presenta il logo Amazon Pay senza un invito all’azione. #### Klarna I tipi di pulsanti Klarna presentano diversi inviti all’azione accanto al logo Klarna. Cerchiamo di rilevare le impostazioni locali del cliente e di inviarle a Klarna in modo che possa localizzare il testo del pulsante. Puoi anche specificare un’[impostazione locale](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Supportiamo i seguenti tipi di pulsanti per Klarna. | | | | | `continue` | “Continua con” | | `pay` | “Paga con” | Questo codice di esempio include l’invito all’azione “Acquista” o “Acquista ora” per i pulsanti che lo supportano. Poi specifica l’impostazionelocale `de` per visualizzare gli equivalenti in tedesco. ```js const expressCheckoutOptions = { buttonType: { applePay: 'buy', googlePay: 'buy', paypal: 'buynow', klarna: 'pay', } } const elements = stripe.elements({ locale: 'de', mode: 'payment', amount: 1099, currency: 'usd', }) const expressCheckoutElement = elements.create( 'expressCheckout', expressCheckoutOptions ) expressCheckoutElement.mount('#express-checkout-element') ``` ## Aspetto Non puoi personalizzare completamente l’aspetto dei pulsanti di Express Checkout Element perché ogni modalità di pagamento imposta il proprio logo e i colori del brand. Puoi personalizzare le seguenti opzioni: - [Altezza dei pulsanti](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonHeight) - Raggio del bordo utilizzando le variabili con l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md) - [Temi dei pulsanti](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme) > Il pulsante Apple Pay si ridimensiona automaticamente quando il raggio del bordo aumenta oltre una certa soglia. Se modifichi il raggio del bordo predefinito, assicurati di testarlo con tutti i metodi di pagamento attivi. Questo codice di esempio imposta un gruppo di elementi con un tema chiaro, un raggio del bordo di 36 px e un’altezza di 50 px e sovrascrive il tema per utilizzare la versione con contorno bianco del pulsante per Apple Pay. ```js const appearance = { theme: 'stripe', variables: { borderRadius: '36px', } } const expressCheckoutOptions = { buttonHeight: 50, buttonTheme: { applePay: 'white-outline' } } const elements = stripe.elements({ mode: 'payment', amount: 1099, currency: 'usd', appearance, }) const expressCheckoutElement = elements.create( 'expressCheckout', expressCheckoutOptions ) expressCheckoutElement.mount('#express-checkout-element') ``` Supportiamo i seguenti temi: #### Link Link ha un solo tema del pulsante, leggibile su uno sfondo chiaro o scuro. #### PayPal PayPal ha numerosi temi di pulsanti. Se imposti un tema con l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md), Express Checkout Element sceglie un tema compatibile per il pulsante per PayPal. Ad esempio, se specifichi uno sfondo scuro, scegliamo un tema di pulsante chiaro per la visibilità. Puoi anche scegliere un tema da con l’opzione [buttonTheme.paypal](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-paypal). Consulta la [guida di stile dei pulsanti](https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/) per PayPal per immagini aggiornate e consigli sul loro utilizzo. Supportiamo i seguenti valori: | | | | | `gold` | Colori oro e blu del brand di PayPal | | `blue` | Colore blu a tinta unita del brand di PayPal | | `silver` | Logo PayPal su sfondo argento | | `white` | Logo PayPal su sfondo bianco | | `black` | Logo PayPal su sfondo nero | #### Apple Pay Apple Pay ha numerosi temi di pulsanti. Se imposti un tema con l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md), Express Checkout Element sceglie un tema compatibile per il pulsante Apple Pay. Ad esempio, se specifichi uno sfondo scuro, scegliamo un tema di pulsante chiaro per la visibilità. Puoi anche scegliere un tema con l’opzione [buttonTheme.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-applePay). Consulta la [guida di stile dei pulsanti](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons) per Apple Pay per immagini aggiornate e indicazioni sul loro utilizzo. Supportiamo i seguenti valori: | | | | | `black` | Sfondo nero con testo bianco | | `white` | Sfondo bianco con testo nero | | `white-outline` | Sfondo bianco con testo nero e bordo nero | #### Google Pay Google Pay ha numerosi temi di pulsanti. Se imposti un tema con l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md), Express Checkout Element sceglie un tema compatibile per il pulsante per Google Pay. Ad esempio, se specifichi uno sfondo scuro, scegliamo un tema di pulsante chiaro per la visibilità. Puoi anche scegliere un tema con l’opzione [buttonTheme.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-googlePay). Consulta le [linee guida per il brand](https://developers.google.com/pay/api/web/guides/brand-guidelines) di Google Pay per immagini aggiornate e indicazioni sul loro utilizzo. Supportiamo i seguenti valori: | | | | | `black` | Sfondo nero con testo bianco | | `white` | Sfondo bianco con testo nero | #### Amazon Pay Amazon Pay ha un tema con solo pulsante. #### Klarna Klarna ha numerosi temi di pulsanti. Se imposti un tema con l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md), Express Checkout Element sceglie un tema compatibile per il pulsante per Klarna. Ad esempio, se specifichi uno sfondo scuro, scegliamo un tema di pulsante chiaro per la visibilità. Puoi anche scegliere un tema con l’opzione [buttonTheme.klarna](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-klarna). ## Personalizzare le modalità di pagamento Non puoi specificare quali modalità di pagamento visualizzare. Ad esempio, non puoi forzare la visualizzazione di un pulsante per Google Pay se il dispositivo del tuo cliente non supporta Google Pay. Tuttavia puoi personalizzare il comportamento della modalità di pagamento in vari modi, ad esempio: - Puoi attivare o disattivare le modalità di pagamento dalla [Dashboard](https://dashboard.stripe.com/settings/payment_methods). - Puoi ignorare la logica predefinita di Stripe per l’ordinamento dei metodi di pagamento in base alla pertinenza. Usa l’opzione [paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethodOrder) per impostare il tuo ordine preferito. - Se c’è troppo poco spazio nel layout, i metodi di pagamento a bassa rilevanza potrebbero apparire in un menu extra. Per personalizzare il momento in cui il menu viene visualizzato, utilizza l’opzione [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout). - Per impedire la visualizzazione di Apple Pay o Google Pay, imposta [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) o [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) su `never`. - Per consentire la visualizzazione di Apple Pay o Google Pay quando non sono configurati, imposta [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) o [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) su `always`. Non verranno comunque visualizzati su piattaforme non supportate o quando il pagamento è in una valuta non supportata. > Quando si effettuano pagamenti in [Finlandia](https://support.stripe.com/questions/payment-method-legislation-in-finland) e [Svezia](https://support.stripe.com/questions/payment-method-legislation-in-sweden), le normative di questi paesi richiedono di presentare le modalità di pagamento con addebito prima di mostrare le modalità di pagamento con accredito. ## Verifica i metodi di pagamento disponibili Ascolta l’evento pronto per verificare quali wallet sono disponibili per la visualizzazione di Express Checkout Element. Se non sono disponibili wallet, offri un’altra opzione per il pagamento al cliente. ```js () => { const [eceActive, setEceActive] = useState(false); return (
{ if (availablePaymentMethods) { setEceActive(true); } }} /> {eceActive ? : }
); } ``` In alternativa, nascondi l’intero Express Checkout Element finché non sai che l’elemento ha dei metodi per visualizzarlo. ```js () => { const [eceActive, setEceActive] = useState(false); return (
); } ``` Lo stesso evento è disponibile sull’oggetto elemento quando viene creato senza React. ```js const expressCheckoutElement = elements.create("expressCheckout", { ... }); expressCheckoutElement.on("ready", ({ availablePaymentMethods }) => { console.log(availablePaymentMethods); }); expressCheckoutElement.mount("#express-checkout-element"); ```