Accettare un pagamento
Build a payment form or use a prebuilt checkout page to start accepting online payments.
Crea un’integrazione per i pagamenti personalizzata incorporando componenti dell’interfaccia utente sul tuo sito utilizzando Stripe Elements. Confronta questa integrazione con gli altri tipi di integrazione di Stripe.
Il codice lato client e lato server crea un modulo di pagamento che accetta vari metodi di pagamento.
Sforzo di integrazione
Tipo di integrazione
Combina i componenti dell’interfaccia utente in un flusso di pagamento personalizzato
Personalizzazione dell'interfaccia utente
Personalizzazione a livello CSS con l’ API Appearance
Vuoi utilizzare Stripe Tax, sconti, spedizioni o la conversione di valuta?
We’re developing a Payment Element integration that manages tax, discounts, shipping, and currency conversion. Read the Build a checkout page guide to learn more.
Configurare StripeLato server
Innanzitutto crea un account Stripe o accedi.
Utilizza le nostre librerie ufficiali per accedere all’API Stripe dalla tua applicazione:
Creare un PaymentIntentLato server
Nota
Se vuoi presentare Payment Element senza prima creare un PaymentIntent, consulta la sezione Raccogliere i dati di pagamento prima di creare un intento.
L’oggetto PaymentIntent rappresenta la tua intenzione di riscuotere un pagamento da un cliente e tiene traccia dei tentativi di addebito e delle modifiche di stato durante l’intera procedura di pagamento.
Creare il PaymentIntent
Crea un PaymentIntent sul tuo server con un importo e una valuta. Nell’ultima versione dell’API, specificare il parametro automatic_payment_methods
è facoltativo perché Stripe ne abilita la funzionalità per impostazione predefinita. Puoi gestire le modalità di pagamento dalla Dashboard. Stripe determina la restituzione delle modalità di pagamento idonee in base a fattori quali l’importo della transazione, la valuta e il flusso di pagamento.
Stripe utilizza le impostazioni delle modalità di pagamento per visualizzare quelle abilitate. Per vedere come i clienti visualizzano le tue modalità di pagamento, inserisci un ID transazione o imposta l’importo e la valuta dell’ordine nella Dashboard. Per sostituire le modalità di pagamento, elenca manualmente quelle che vuoi abilitare utilizzando l’attributo payment_method_types.
Nell’ultima versione dell’API, specificare il parametro automatic_payment_methods
è facoltativo perché Stripe ne abilita la funzionalità per impostazione predefinita.
Nota
Decidi sempre quanto addebitare sul lato server, che è un ambiente sicuro, anziché sul client. In questo modo impedisci ai client malintenzionati di scegliere un proprio prezzo.
Recuperare la chiave privata client
L’oggetto PaymentIntent contiene una chiave privata client, che il lato client usa per completare la procedura di pagamento in modo sicuro. Per specificare la chiave privata sul lato client, puoi utilizzare approcci diversi.
Acquisire i dati di pagamentoLato client
Acquisisci i dati di pagamento sul client con Payment Element. Payment Element è un componente di interfaccia utente preintegrato che semplifica l’acquisizione dei dati di pagamento per varie modalità di pagamento.
Payment Element contiene un iframe che invia a Stripe le informazioni sul pagamento in modo sicuro tramite una connessione HTTPS. Evita di inserire Payment Element all’interno di un altro iframe, perché alcune modalità di pagamento richiedono il reindirizzamento a un’altra pagina per la conferma del pagamento.
If you do choose to use an iframe and want to accept Apple Pay or Google Pay, the iframe must have the allow attribute set to equal "payment *"
.
Affinché l’integrazione funzioni, l’indirizzo della pagina di pagamento deve iniziare con https://
anziché con http://
. Puoi testare l’integrazione senza usare HTTPS, ma ricorda di abilitarlo quando sarà tutto pronto per accettare i pagamenti in modalità live.
Il Payment Element visualizza un modulo dinamico che consente al cliente di scegliere una modalità di pagamento. Per ogni modalità di pagamento, il modulo richiede automaticamente al cliente di inserire tutti i dati di pagamento necessari.
Personalizza l’aspetto
Personalizza Payment Element in base al design del tuo sito specificando l’oggetto appearance in options
al momento della creazione del provider Elements
.
Raccogli indirizzi
Per impostazione predefinita, Payment Element raccoglie solo i dettagli relativi all’indirizzo di fatturazione necessari. Per acquisire l’indirizzo di fatturazione completo di un cliente (ad esempio, per calcolare l’imposta su beni e servizi digitali) o l’indirizzo di spedizione, utilizza Address Element.
Richiedi il token esercente di Apple Pay
Se hai configurato la tua integrazione per accettare pagamenti Apple Pay, ti consigliamo di configurare l’interfaccia di Apple Pay in modo che restituisca un token esercente che consente di abilitare le transazioni avviate dall’esercente (MIT). Richiedi il tipo di token esercente pertinente nel componente Payment Element.
Inviare il pagamento a StripeLato client
Usa stripe.confirmPayment per completare il pagamento con i dati di Payment Element. Fornisci a questa funzione un return_url per indicare dove Stripe deve reindirizzare l’utente dopo il completamento del pagamento. L’utente può essere dapprima reindirizzato su un sito intermedio, come una pagina di autorizzazione bancaria, prima di essere reindirizzato al return_url
. In caso di esito positivo, i pagamenti con carta vengono immediatamente reindirizzati al return_url
.
Se vuoi impedire il reindirizzamento per i pagamenti con carta una volta completato il pagamento, puoi impostare il reindirizzamento su if_required
. In questo modo vengono reindirizzati solo i clienti che utilizzano modalità di pagamento basate sul reindirizzamento.
Assicurati che return_url
corrisponda a una pagina del tuo sito web che fornisce lo stato del pagamento. Quando Stripe reindirizza il cliente a return_url
, fornisce i seguenti parametri di ricerca dell’URL:
Parametro | Descrizione |
---|---|
payment_intent | Identificativo univoco per il PaymentIntent |
payment_intent_client_secret | La chiave privata client dell’oggetto PaymentIntent . |
Attenzione
Se disponi di strumenti che tracciano la sessione del browser del cliente, potresti aver bisogno di aggiungere il dominio stripe.com
all’elenco di esclusione dei referrer. I reindirizzamenti fanno sì che alcuni strumenti creino nuove sessioni, il che ti impedisce di tracciare la sessione completa.
Utilizza uno dei parametri di ricerca per recuperare il PaymentIntent. Ispeziona lo stato del PaymentIntent per decidere cosa mostrare ai tuoi clienti. Quando specifichi il return_url
, puoi anche aggiungere i tuoi parametri di ricerca che saranno mantenuti durante la procedura di reindirizzamento.
Gestire gli eventi successivi al pagamentoLato server
Stripe invia un evento payment_intent.succeeded quando il pagamento viene completato. Utilizza lo strumento webhook della Dashboard o segui la guida ai webhook per ricevere questi eventi ed eseguire azioni come l’invio di una email per la conferma di un ordine al cliente, la registrazione della vendita in un database o l’avvio del flusso di lavoro per una spedizione.
Ascolta questi eventi invece di attendere una chiamata di ritorno dal client. Sul client, il cliente potrebbe chiudere la finestra del browser o uscire dall’app prima dell’esecuzione della chiamata di ritorno e i client malintenzionati potrebbero manipolare la risposta. La configurazione dell’integrazione per l’ascolto di eventi asincroni ti consente di accettare diversi tipi di modalità di pagamento con una sola integrazione.
Oltre alla gestione dell’evento payment_intent.succeeded
, è consigliabile gestire altri eventi durante la riscossione di pagamenti tramite Payment Element:
Evento | Descrizione | Azione |
---|---|---|
payment_intent.succeeded | Inviato quando un cliente ha disposto un pagamento con esito positivo. | Invia al cliente la conferma di un ordine ed evade l’ordine. |
payment_intent.processing | Inviato quando un cliente ha correttamente disposto un pagamento che non è stato ancora completato. Questo evento viene di solito inviato quando il cliente dispone un addebito bancario. Sarà poi seguito da un evento payment_intent.succeeded o da un evento payment_intent.payment_failed . | Invia al cliente la conferma di un ordine che indica il pagamento in sospeso. Per i beni digitali, potresti voler evadere l’ordine senza attendere il completamento del pagamento. |
payment_intent.payment_failed | Inviato quando il cliente ha tentato un pagamento che non è andato a buon fine. | Se un pagamento passa da processing a payment_failed , offri al cliente un altro tentativo di pagamento. |
Esegui il test della tua integrazione
Per testare l’integrazione dei pagamenti personalizzati:
- Crea un Payment Intent e recupera la chiave privata client.
- Compila i dettagli di pagamento con una delle modalità indicate nella tabella di seguito.
- Inserisci una data di scadenza futura per la carta.
- Inserisci un numero di 3 cifre per il CVC.
- Inserisci un qualsiasi codice postale.
- Invia il pagamento a Stripe. Verrai reindirizzato al tuo
return_url
. - Vai alla Dashboard e cerca il pagamento nella Pagina dei pagamenti. Se il pagamento è andato a buon fine, lo vedrai nell’elenco.
- Fai clic sul pagamento per visualizzare ulteriori dettagli, come i dati di addebito e l’elenco degli articoli acquistati. Puoi utilizzare queste informazioni per evadere l’ordine.
Scopri di più su come testare la tua integrazione.
Per ulteriori informazioni su come testare la tua integrazione, consulta la sezione Test.
Comunicare ai clienti l'utilizzo di Stripe
Stripe raccoglie informazioni sulle interazioni dei clienti con Elements per fornirti servizi, prevenire le frodi e migliorare i propri servizi. Ad esempio, utilizza cookie e indirizzi IP per identificare quali Elements sono stati visualizzati da un cliente durante una singola sessione di pagamento. Sei responsabile della comunicazione e della raccolta di tutti i diritti e i consensi necessari affinché Stripe utilizzi i dati in questi modi. Per ulteriori informazioni, visita il nostro Centro privacy.