Accettare un pagamento

Accettare pagamenti online in modo sicuro

Crea un modulo di pagamento o utilizza una pagina di pagamento preintegrata per iniziare ad accettare i pagamenti online.

Incorporare un modulo di pagamento predefinito sul tuo sito utilizzando Stripe Checkout. Confrontare questa integrazione con gli altri tipi di integrazione di Stripe.

powdur.me

Sforzo di integrazione

Low-code

Tipo di integrazione

Incorporare un modulo di pagamento preintegrato nel tuo sito

Personalizzazione dell'interfaccia utente

Personalizzazione limitata

Utilizza le impostazioni di branding nella Dashboard Stripe per abbinare Checkout al design del tuo sito.

Innanzitutto registrati per creare un account Stripe.

Utilizza le nostre librerie ufficiali per accedere all’API Stripe dalla tua applicazione:

Creare una sessione di Checkout
Lato server

Dal tuo server, crea una sessione di Checkout e imposta la ui_mode su embedded. Puoi configurare la sessione di Checkout con voci riga per includere opzioni come valuta.

Puoi anche creare una sessione di Checkout per un cliente esistente, che ti consente di precompilare i campi di Checkout con le informazioni di contatto note e di unificare la cronologia degli acquisti per quel cliente.

Per riportare i clienti a una pagina personalizzata che ospiti sul tuo sito, specifica l’URL della pagina nel parametro return_url. Includi la variabile del modello {CHECKOUT_SESSION_ID} nell’URL per recuperare lo stato della sessione nella pagina di ritorno. Checkout sostituisce automaticamente la variabile con l’ID della sessione di Checkout prima del reindirizzamento.

Scopri di più sulla configurazione della pagina di ritorno e su altre opzioni per personalizzare il comportamento di reindirizzamento.

Dopo aver creato la sessione di Checkout, utilizza il parametro client_secret restituito nella risposta a mount Checkout.

Monta Checkout
Lato client

Checkout è disponibile come parte di Stripe.js. Includi lo script Stripe.js nella tua pagina aggiungendolo all’inizio del file HTML. Poi crea un nodo DOM vuoto (contenitore) da utilizzare per il montaggio.

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

Inizializza Stripe.js con la tua chiave API pubblicabile.

Crea una funzione asincrona fetchClientSecret che invia una richiesta al server per creare la sessione di Checkout e recuperare la chiave privata client. Specifica questa funzione in options quando crei l’istanza di Checkout.

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Checkout viene visualizzato in un iframe che invia a Stripe le informazioni sul pagamento in modo sicuro tramite una connessione HTTPS.

Errore comune

Evita di inserire Checkout all’interno di un altro iframe, perché alcuni metodi di pagamento richiedono il reindirizzamento a un’altra pagina per la conferma del pagamento.

Personalizza l’aspetto

Personalizza Checkout in base al design del tuo sito impostando il colore di sfondo, il colore dei pulsanti, il raggio del bordo e i caratteri nelle impostazioni di branding del tuo account.

Per impostazione predefinita, Checkout viene visualizzato senza spaziatura aggiuntiva o margine. Per applicare il margine desiderato, ad esempio 16 px su tutti i lati, consigliano di utilizzare un elemento contenitore, ad esempio div.

Mostrare una pagina di ritorno

Dopo che il cliente ha tentato di effettuare il pagamento, Stripe lo reindirizza a una pagina di ritorno che ospiti sul tuo sito. Quando hai creato la sessione di Checkout, hai specificato l’URL della pagina di ritorno nel parametro return_url. Ulteriori informazioni sulle opzioni di personalizzazione del comportamento di reindirizzamento.

Durante la visualizzazione della pagina di ritorno, recupera lo stato della sessione di Checkout utilizzando l’ID della sessione di Checkout nell’URL. Gestisci il risultato in base allo stato della sessione come segue:

complete: il pagamento è andato a buon fine. Utilizza le informazioni della sessione di Checkout per visualizzare una pagina di conferma.
open: il pagamento non è riuscito o è stato annullato. Rimonta Checkout in modo che il cliente possa riprovare.

client.js
const session = await fetch(`/session_status?session_id=${session_id}`)
if (session.status == 'open') {
  // Remount embedded Checkout
} else if (session.status == 'complete') {
  // Show success page
  // Optionally use session.payment_status or session.customer_email
  // to customize the success page
}

Metodi di pagamento con reindirizzamento

Durante il pagamento, alcuni metodi di pagamento reindirizzano il cliente a una pagina intermedia, ad esempio una pagina di autorizzazione bancaria. Una volta completata la pagina, Stripe lo reindirizza alla pagina di ritorno.

Scopri ulteriori dettagli sui metodi di pagamento con reindirizzamento e sul comportamento di reindirizzamento.

Gestire gli eventi successivi al pagamento

Stripe invia un evento checkout.session.completed quando un cliente completa un pagamento in una sessione di Checkout. Utilizza lo strumento webhook della Dashboard o segui la guida ai webhook per ricevere e gestire questi eventi, che potrebbero indurti a:

Invia un’email di conferma dell’ordine al cliente.
Registra la vendita in un database.
Avvia un flusso di lavoro per la spedizione.

Ascolta questi eventi invece di aspettare che il cliente venga reindirizzato nuovamente al tuo sito web. Attivare l’evasione degli ordini solo dalla pagina di destinazione di Checkout non è affidabile. La configurazione dell’integrazione per l’ascolto di eventi asincroni ti consente di accettare diversi tipi di metodi di pagamento con una sola integrazione.

Scopri di più nella nostra guida all’evasione degli ordini di Checkout.

Gestisci i seguenti eventi durante la riscossione di pagamenti con Checkout:

Evento	Descrizione	Azione
checkout.session.completed	Inviato quando un cliente completa con esito positivo una sessione di Checkout.	Invia al cliente la conferma di un ordine ed evade l’ordine.
checkout.session.async_payment_succeeded	Inviato quando un pagamento effettuato con un metodo di pagamento posticipato, ad esempio un debito diretto ACH, va a buon fine.	Invia al cliente la conferma di un ordine ed evade l’ordine.
checkout.session.async_payment_failed	Inviato quando un pagamento effettuato con un metodo di pagamento ritardato, come un debito diretto ACH, non va a buon fine.	Informa il cliente dell’errore e riportalo all’interno della sessione per tentare di nuovo il pagamento.

Esegui il test della tua integrazione

Per testare l’integrazione del modulo di pagamento incorporato:

Crea una sessione Checkout incorporata e monta Checkout nella tua pagina.
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.
Fai clic su Paga. Verrai reindirizzato al tuo return_url.
Vai alla Dashboard e cerca il pagamento nella pagina Transazioni. Se il pagamento è andato a buon fine, lo vedrai nell’elenco.
Fai clic sul pagamento per visualizzare ulteriori dettagli, come il riepilogo di Checkout con 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.

Numero di carta	Scenario	Come eseguire il test
	Il pagamento con carta ha esito positivo e non richiede l’autenticazione.	Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale.
	Il pagamento con carta richiede l’autenticazione.	Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale.
	La carta viene rifiutata con un codice di rifiuto del tipo `insufficient_funds`.	Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale.
	La carta UnionPay ha una lunghezza variabile di 13-19 cifre.	Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale.

Per ulteriori informazioni su come testare la tua integrazione, consulta la sezione Test.

FacoltativoAggiungere altre modalità di pagamento

Per impostazione predefinita, Checkout supporta molti metodi di pagamento. Devi eseguire ulteriori passaggi per attivare e visualizzare alcuni metodi, come Apple Pay, Google Pay o i metodi di pagamento a rate.

Apple Pay e Google Pay

Per accettare pagamenti da Apple Pay e Google Pay, devi:

Abilitali nelle impostazioni dei metodi di pagamento. Apple Pay è abilitato per impostazione predefinita.
Offri la tua applicazione su HTTPS in fase di sviluppo e produzione.
Registra il tuo dominio.
Offri la tua applicazione su HTTPS in fase di sviluppo e produzione. Puoi utilizzare un servizio come ngrok per offrire la tua applicazione per il testing locale.

Inoltre, una sessione di Checkout mostra il pulsante di Apple Pay ai clienti solo quando si verificano tutte le seguenti condizioni:

Sul dispositivo del cliente è in esecuzione macOS versione 17 o successiva oppure iOS versione 17 o successiva.
Il cliente utilizza il browser Safari.
Il cliente ha una carta valida registrata su Apple Pay.

Una sessione di Checkout mostra il pulsante Google Pay ai clienti solo quando si verificano tutte le seguenti condizioni:

Sul dispositivo del cliente è installato Chrome 61 o versione successiva.
Il cliente ha una carta valida registrata su Google Pay.

Test locali
India

Stripe Checkout non supporta Apple Pay o Google Pay per gli account e i clienti Stripe in India. Se il tuo indirizzo IP è in india, non puoi testare l’integrazione con Apple Pay o Google Pay, anche se l’account Stripe si trova al di fuori dell’India.

FacoltativoCreare prodotti e prezzi

Prima di creare una sessione di Checkout, puoi creare prodotti e prezzi in anticipo. Utilizza i prodotti per rappresentare diversi beni fisici o livelli di servizio e prezzi per rappresentare il prezzo di ciascun prodotto.

Ad esempio, puoi creare una T-shirt come prodotto con un prezzo di 20 USD. In questo modo puoi aggiornare e aggiungere prezzi senza dover modificare le informazioni dei prodotti sottostanti. Puoi creare prodotti e prezzi con la Dashboard o l’API di Stripe. Ulteriori informazioni su come funzionano prodotti e prezzi.

L’API richiede solo un name per creare un prodotto. Checkout mostra name, description e images del prodotto che fornisci.

Poi crea un oggetto Price per definire quanto far pagare il prodotto, comprensivo sia del costo del prodotto sia della valuta da utilizzare.

Ogni prezzo che crei ha un ID. Quando crei una sessione di Checkout, fai riferimento all’ID prezzo e alla quantità. Se vendi in più valute, rendi il tuo prezzo multi-valuta. Checkout determina la valuta locale del cliente in modo automatico e mostra tale valuta, purché il prezzo la supporti.

FacoltativoPrecompilare i dati dei clienti
Lato server

Se hai già raccolto l’indirizzo email del cliente e vuoi che venga precompilato nella sessione di Checkout, specifica customer_email durante la creazione di una sessione di Checkout.

FacoltativoSalvare i dati del metodo di pagamento
Lato server

Per impostazione predefinita, i metodi di pagamento utilizzati per effettuare un pagamento una tantum con Checkout non sono disponibili per usi futuri.

Salvare i metodi di pagamento per effettuare gli addebiti all’esterno della sessione

Puoi impostare Checkout in modo tale che salvi i metodi di pagamento utilizzati per un pagamento una tantum specificando l’argomento payment_intent_data.setup_future_usage. Questa opzione è utile se devi acquisire un metodo di pagamento registrato per utilizzarlo per commissioni future, ad esempio in caso di annullamento o no-show.

Se utilizzi Checkout in modalità subscription, Stripe salva automaticamente i metodi di pagamento per effettuare gli addebiti dei pagamenti successivi. I metodi di pagamento con carta salvati utilizzando la modalità setup_future_usage o subscription non vengono visualizzati per gli acquisti successivi al primo in Checkout (ulteriori informazioni di seguito). Ti suggeriamo di utilizzare un testo personalizzato che includa link a tutte le condizioni relative all’utilizzo dei dati di pagamento salvati.

Attenzione

Le leggi sulla privacy globali sono complicate e dettagliate. Ti consigliamo di contattare il tuo team legale e di privacy prima di implementare setup_future_usage perché potrebbe avere effetti sul tuo attuale quadro normativo sulla privacy. Per ulteriori informazioni sul salvataggio dei dati di pagamento, consulta le linee guida emesse dal Comitato europeo per la protezione dei dati.

Salva i metodi di pagamento per precompilarle in Checkout

Per impostazione predefinita, Checkout utilizza Link per offrire ai clienti la possibilità di salvare e riutilizzare in modo sicuro i dati di pagamento. Se preferisci gestire in maniera autonoma i metodi di pagamento, utilizza saved_payment_method_options.payment_method_save quando crei una sessione di Checkout per consentire ai clienti di salvare i metodi di pagamento per gli acquisti futuri in Checkout.

Se specifichi questo parametro in modalità payment o subscription, viene visualizzata una casella di controllo facoltativa che consente ai clienti di salvare esplicitamente il metodo di pagamento per acquisti futuri. Quando i clienti selezionano questa casella di controllo, Checkout salva il metodo di pagamento con allow_redisplay: always. Checkout utilizza questo parametro per stabilire se un metodo di pagamento può essere precompilato per gli acquisti futuri. Quando utilizzi saved_payment_method_options.payment_method_save, non devi specificare setup_future_usage per salvare il metodo di pagamento.

Devi specificare un oggetto Customer se utilizzi saved_payment_method_options.payment_method_save. Per salvare un nuovo cliente, imposta la customer_creation della sessione di Checkout su always, altrimenti la sessione non salva il cliente o il metodo di pagamento.

Se payment_method_save non viene specificato o se il cliente non accetta di salvare il metodo di pagamento, Checkout salva comunque i metodi di pagamento creati in modalità subscription o utilizzando setup_future_usage. Questi metodi di pagamento hanno un valore allow_redisplay impostato su limited, che impedisce che vengano precompilati per gli acquisti successivi al primo e consentono di rispettare le regole del circuito della carta e le normative sulla protezione dei dati. Scopri come modificare il comportamento predefinito abilitato da questi metodi e come modificare o ignorare il comportamento allow_redisplay.

Nota

Puoi utilizzare Checkout per salvare le carte e altri metodi di pagamento per effettuare addebiti all’esterno della sessione, ma Checkout precompila solo le carte salvate. Scopri come precompilare le carte salvate. Per salvare un metodo di pagamento senza un pagamento iniziale, utilizza Checkout in modalità configurazione.

Consenti ai clienti di rimuovere i metodi di pagamento salvati

Per permettere ai clienti di eliminare un metodo di pagamento salvato ed evitare che riappaia per futuri acquisti, utilizza saved_payment_method_options.payment_method_remove durante la creazione di una sessione di Checkout.

Il cliente non può rimuovere un metodo di pagamento se è collegato a un abbonamento attivo e il cliente non ha un metodo di pagamento predefinito salvato per i pagamenti di fatture e abbonamenti.

FacoltativoGestione degli account dei clienti
Nessun codice

Consenti ai tuoi clienti di gestire il loro account condividendo un link sul tuo portale cliente. Il portale cliente consente ai clienti di accedere con la propria email per gestire gli abbonamenti, aggiornare le modalità di pagamento e così via.

FacoltativoSeparare l'autorizzazione dall'acquisizione
Lato server

Stripe supporta i pagamenti con carta in due passaggi in modo tale che tu possa prima autorizzare una carta e successivamente addebitare il pagamento. Quando Stripe autorizza un pagamento, la società emittente della carta garantisce l’importo e lo trattiene sulla carta del cliente. Hai quindi un certo periodo di tempo per acquisire i fondi, a seconda della carta). Se non acquisisci il pagamento prima della scadenza dell’autorizzazione, il pagamento viene annullato e la società emittente rilascia i fondi trattenuti.

La separazione dell’autorizzazione dall’acquisizione è utile se devi eseguire altre operazioni tra la conferma che il cliente è in grado di pagare e la riscossione del pagamento. Ad esempio, se vendi articoli con scorte limitate, potresti dover verificare che un articolo acquistato dal cliente utilizzando Checkout sia ancora disponibile prima di addebitare il pagamento ed evadere l’acquisto. A tal fine, utilizza il seguente flusso di lavoro:

Conferma che Stripe abbia autorizzato il metodo di pagamento del cliente.
Consulta il sistema di gestione delle scorte per verificare che l’articolo sia ancora disponibile.
Aggiorna il sistema di gestione dell’inventario in modo che indichi che un cliente ha acquistato l’articolo.
Acquisisci il pagamento del cliente.
Fai sapere al cliente se l’acquisto è andato a buon fine nella pagina di conferma.

Per indicare che vuoi separare l’autorizzazione dall’addebito, devi impostare il valore di payment_intent_data.capture_method su manual durante la creazione della sessione di Checkout. In questo modo Stripe autorizza solo l’importo sulla carta del cliente.

Per riscuotere un pagamento non addebitato, puoi utilizzare la Dashboard o l’endpoint capture. Per acquisire i pagamenti a livello di codice, devi accedere al PaymentIntent creato durante la sessione di Checkout, che puoi ottenere dall’oggetto Session.

FacoltativoEvasione dell'ordine

Scopri come ricevere una notifica a livello di codice ogni volta che un cliente effettua un pagamento.