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.

Compatible APIs

Stripe offers two core payments APIs compatible with Elements that give you the flexibility to accept various types of payments from your customers. You can integrate these APIs into Stripe’s prebuilt payment interfaces. While we recommend using Checkout Sessions for most users, the APIs serve slightly different use cases depending on how you choose to structure your checkout flow and how much control you require. You can build a checkout page with the Checkout Session API or build an advanced integration with the Payment Intents API.

The Checkout Sessions API allows you to model your customer’s checkout flow. This includes the line items included in their purchase, billing and shipping addresses, applicable tax rates, and coupons or discounts. The Checkout Session allows you to create subscriptions, calculate tax rates with Stripe Tax, and initiate payments.
The Payment Intents API allows you to model the payments step. Unlike the Checkout Sessions API, which requires line item details, you only pass in the final amount you want to charge. This is suitable for payment flows, such as off-session payments. If you want to use Stripe to calculate applicable taxes or create subscriptions, you must integrate with the Stripe Tax API or Subscriptions API, respectively.

Checkout Sessions include customer information, shipping, tax, discounts, coupons, and payments integrations, while Payment Intents only handle payments integration.

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 le modalità 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 le modalità di pagamento manualmente, consulta Elencare manualmente le modalità 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 le modalità 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.