Stripe Payment Element

Payment Element è un componente dell’interfaccia utente per il Web che accetta oltre 40 modalità di pagamento, convalida l’input e gestisce gli errori. Usalo da solo o con altri elementi nel frontend della tua app web.

Per provare personalmente Payment Element, inizia con uno dei seguenti esempi:

Creare un Payment Element

Questo codice crea un Payment Element e viene montato nel DOM:

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { layout: 'accordion', /* options */ };
const elements = stripe.elements({ 
clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

L’accettazione di pagamenti con Payment Element richiede un codice backend aggiuntivo. Consulta la guida rapida di avvio o l’app di esempio per scoprire come funziona.

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.

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 delle modalità di pagamento, ad esempio filtrando i circuiti delle carte che non vuoi supportare, consulta Personalizzare le modalità di pagamento. Per aggiungere modalità di pagamento integrate al di fuori di Stripe, consulta Modalità di pagamento esterne.

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.

Payment Element con diversi layout.

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.

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

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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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