Express Checkout Element

Express Checkout Element ti offre una singola integrazione per accettare pagamenti tramite i pulsanti di pagamento con un clic. I metodi di pagamento supportati includono Link, Apple Pay, Google Pay, PayPal, e 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 delle modalità di pagamento vengono visualizzati solo nei Paesi supportati.

Se non visualizzi la demo, prova a visualizzare questa pagina in un browser supportato.

Inizia con una guida

Creare un Express Checkout Element

This code creates an elements group with an Express Checkout Element and mounts it to the DOM.

const appearance = { /* appearance */ }
const options = { /* options */ }
const elements = stripe.elements({
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  appearance,
})
const expressCheckoutElement = elements.create('expressCheckout', options)
expressCheckoutElement.mount('#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.
• 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.

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.

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

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:

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 delle modalità di pagamento in base alla pertinenza. Usa l’opzione paymentMethodOrder per impostare il tuo ordine preferito.
• Se c’è troppo poco spazio nel layout, le modalità 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.