Express Checkout Element

Mostrare più pulsanti di pagamento con un solo clic con un unico componente

Esperienza d'uso di Checkout che mostra i pulsanti Apple Pay, Link e PayPal

The Express Checkout Element is an integration for accepting payments through click-to-pay payment methods buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, Klarna, and Amazon Pay.

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.

Opzioni	Descrizione
Paese dell’esercente	Impostalo utilizzando la chiave pubblicabile che utilizzi per inizializzare Stripe.js. 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. I temi dei pulsanti vengono ereditati dalla API Appearance, ma puoi anche definirli direttamente quando crei l’Element.
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 quando crei Express Checkout Element.
Menu extra	Impostalo utilizzando il parametro layout quando crei Express Checkout Element.
Raccogli l’indirizzo di spedizione	Per raccogliere le informazioni sulla spedizione, devi specificare le opzioni durante la creazione di Express Checkout Element. Scopri di più su come raccogliere i dati del cliente e visualizzare le voci riga.

Inizia con una guida

Add click-to-pay wallets to your checkout page

Crea un’integrazione con Express Checkout Element utilizzando l’API Checkout Sessions.

Use click-to-pay wallets in advanced integrations

Crea un’integrazione con Express Checkout Element utilizzando l’API Payment Intents.

Effettuare la migrazione a Express Checkout Element

Eseguire la migrazione da Payment Request Button Element a Express Checkout Element

Visualizza la documentazione di riferimento di Stripe.js

Modalità di pagamento

The Express Checkout Element presents click-to-pay payment methods that are active, supported, and set up.

Alcuni metodi di pagamento richiedono l’attivazione nella Dashboard.
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 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.

Browser supportati

Alcune modalità di pagamento funzionano con browser specifici.

	Apple Pay	Google Pay	Link	PayPal	Amazon Pay	Klarna
Chrome¹
Edge
Firefox
Opera
Safari	²
Chrome su iOS 16+
Firefox su iOS 16+
Edge su iOS 16+

¹Altri browser Chromium potrebbero essere supportati. Per ulteriori informazioni, consulta Browser supportati.

²Quando 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.

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.

Testo

Puoi controllare il testo di un pulsante selezionando un buttonType. Ogni wallet offre le sue tipologie.

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.

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.

const expressCheckoutOptions = {
  buttonType: {
    applePay: 'buy',
    googlePay: 'buy',
    paypal: 'buynow',
    klarna: 'pay',
  }
}
const elements = stripe.elements({
  locale: 'de',

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
Raggio del bordo utilizzando le variabili con l’API Appearance
Temi dei pulsanti

Nota

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.

const appearance = {
  theme: 'stripe',
  variables: {
    borderRadius: '36px',
  }
}
const expressCheckoutOptions = {
  buttonHeight: 50,
  buttonTheme: {

Supportiamo i seguenti temi:

Link ha un solo tema del pulsante, leggibile su uno sfondo chiaro o scuro.

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.
Puoi ignorare la logica predefinita di Stripe per l’ordinamento dei metodi di pagamento in base alla pertinenza. Usa l’opzione 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.
Per impedire la visualizzazione di Apple Pay o Google Pay, imposta paymentMethods.applePay o paymentMethods.googlePay su never.
Per consentire la visualizzazione di Apple Pay o Google Pay quando non sono configurati, imposta paymentMethods.applePay o paymentMethods.googlePay su always. Non verranno comunque visualizzati su piattaforme non supportate o quando il pagamento è in una valuta non supportata.

Considerazioni locali
Finlandia
Svezia

Quando si effettuano pagamenti in Finlandia e Svezia, le normative di questi paesi richiedono di presentare le modalità di pagamento con addebito prima di mostrare le modalità di pagamento con accredito.