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

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 principali per i pagamenti compatibili con Elements. Consigliamo l’API Checkout Sessions per la maggior parte delle integrazioni.

Usa l’API Checkout Sessions 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 (disponibili solo con Checkout Sessions).
Costruisci una pagina di completamento della transazione con l’API Checkout Sessions.
L’API Payment Intents è 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.

Crea un'integrazione avanzata con Payment Element e Checkout Sessions

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

Crea un'integrazione con Payment Element e Checkout Sessions

Usa l’API Payment Intents per creare il tuo flusso di pagamento.

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.

Modulo con informazioni di contatto, indirizzo di spedizione e campi di pagamento. Le informazioni di contatto sono etichettate Link Authentication Element, l'indirizzo di spedizione Address Element e i campi di pagamento Payment Element.

Modulo di pagamento che combina più elementi

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, consulta Personalizzare 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

Payment Element mostra automaticamente messaggi di errore localizzati rivolti al cliente durante la conferma del cliente per i seguenti codici di rifiuto:

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.