Stripe Payment Element

Accetta modalità di pagamento utilizzate in tutto il mondo con un componente di interfaccia sicuro e integrabile.

Payment Element è un componente dell’interfaccia utente per il Web che accetta oltre 40 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 all’interno dell’interfaccia utente front-end della tua app Web.

Questa demo mostra Google Pay o Apple Pay solo se disponi di una carta attiva con uno dei due wallet.

API compatibili

Stripe offre due API di pagamento principali compatibili con Elements che ti offrono la flessibilità di accettare vari tipi di pagamento dai tuoi clienti. Puoi integrare queste API nelle interfacce di pagamento preintegrate di Stripe. Sebbene consigliamo di utilizzare l’API Checkout Sessions per la maggior parte degli utenti, le API sono utilizzate in casi d’uso leggermente diversi a seconda di come si sceglie di strutturare il flusso di pagamento e di quanto controllo si richiede. Puoi creare una pagina di pagamento con l’API Checkout Sessions o creare un’integrazione avanzata con l’API Payment Intents.

L’API Checkout Sessions ti consente di modellare il flusso di pagamento del cliente. Sono incluse le voci riga incluse negli indirizzi di acquisto, fatturazione e spedizione, le aliquote fiscali applicabili e i coupon o gli sconti. La sessione di Checkout consente di creare abbonamenti, calcolare le aliquote fiscali con Stripe Tax e disporre pagamenti.
L’API Payment Intents consente di modellare la fase del pagamento. A differenza dell’API Checkout Sessions, che richiede i dettagli delle voci riga, devi specificare solo l’importo finale che vuoi addebitare. Questa opzione è adatta per i flussi di pagamento, ad esempio i pagamenti all’esterno della sessione. Se vuoi usare Stripe per calcolare le imposte applicabili o creare abbonamenti, devi eseguire l’integrazione rispettivamente con l’API Stripe Tax o con l’API Subscriptions.

Le sessioni di Checkout includono le informazioni sul cliente, le integrazioni per spedizioni, imposte, sconti, coupon e pagamenti, mentre Payment Intents gestisce solo l'integrazione dei pagamenti.

Creare una pagina di pagamento con Payment Element

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

Creare un'integrazione avanzata con Payment Element

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

Clonare un'app campione su GitHub

HTML · React · Vue

Visualizza la documentazione di riferimento di Stripe.js

Combinare elementi

Payment Element interagisce con altri elementi. Ad esempio, questo modulo utilizza un elemento aggiuntivo per compilare automaticamente i dettagli del pagamento e un altro per raccogliere l’indirizzo di spedizione.

Nota

Non puoi rimuovere il contratto legale di Link perché è necessario garantire la conformità con la corretta conoscenza da parte dell’utente dei termini di servizio e delle informative sulla privacy. L’oggetto terms non si applica al contratto legale di Link.

Un modulo con informazioni di contatto, indirizzo di spedizione e campi di pagamento. Le informazioni di contatto sono etichettate come Link Authentication Element, l'indirizzo di spedizione è etichettato come Address Element e i campi di pagamento sono etichettati come Payment Element.

Per il codice completo di questo esempio, consulta Aggiungi Link a un’integrazione di Elements.

Puoi anche combinare Payment Element con Express Checkout Element. 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 per abilitare o disabilitare le modalità di pagamento in qualsiasi momento. Con Payment Element puoi utilizzare modalità di pagamento dinamiche per:

Gestire i metodi di pagamento nella Dashboard 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.

Mostra le modalità di pagamento in ordine di rilevanza per il tuo cliente

Per personalizzare ulteriormente la visualizzazione dei metodi di pagamento, ad esempio filtrando i circuiti delle carte che non vuoi supportare, consulta Personalizzare i metodi di pagamento. Per aggiungere metodi di pagamento integrati al di fuori di Stripe, puoi utilizzare metodi di pagamento personalizzati.

Se l’integrazione ti richiede di elencare i metodi di pagamento manualmente, consulta Elencare manualmente i metodi di pagamento.

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 le modalità di pagamento mostrate come schede o le due opzioni fisarmonica, in cui le modalità di pagamento sono elencate verticalmente. Puoi scegliere se visualizzare i pulsanti di opzione o meno nella vista a fisarmonica.

Payment Element con diversi layout.

Il layout delle schede visualizza i metodi di pagamento orizzontalmente utilizzando le schede. Per utilizzare questo layout, imposta il valore di layout.type su tabs. Puoi inoltre specificare altre proprietà, ad esempio layout.defaultCollapsed.

index.js
Visualizza l'esempio completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

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.

Ad esempio, scegli il tema “piatto” e ignora il colore del testo principale.

index.js
Visualizza l'esempio completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

Per un elenco completo dei temi e delle variabili, consulta la documentazione dell’API Appearance.

Opzioni

Gli elementi Stripe supportano più opzioni di queste. Ad esempio, visualizza il nome della tua attività commerciale utilizzando l’opzione business.

index.js
Visualizza l'esempio completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */};
const options = {
  business: { name: "RocketRides" }
};

Payment Element supporta le seguenti opzioni. Per ulteriori informazioni, vedere la voce di riferimento di ciascuna opzione.

layout	Layout per Payment Element.
defaultValues	Le informazioni iniziali sul cliente da visualizzare in Payment Element.
business	Informazioni sull’azienda da visualizzare in Payment Element.
paymentMethodOrder	Ordine in cui elencare le modalità di pagamento.
campi	Indica se visualizzare determinati campi.
readOnly	Se i dati di pagamento possono essere cambiati.
terms	Se i mandati o altri accordi legali sono visualizzati in Payment Element. Il comportamento predefinito è quello di mostrarli solo quando necessario.
wallets	Indica se mostrare i wallet come Apple Pay o Google Pay. L’impostazione predefinita è di mostrarli quando possibile.

Errori

Durante la conferma Payment Element mostra automaticamente i messaggi di errore localizzati per il cliente per i seguenti codici di errore:

generic_decline
insufficient_funds
incorrect_zip
incorrect_cvc
invalid_cvc
invalid_expiry_month
invalid_expiry_year
expired_card
fraudulent
lost_card
stolen_card
card_velocity_exceeded

Per visualizzare i messaggi relativi ad altri tipi di errori, fai riferimento a codici di errore e gestione degli errori.