Passa al contenuto
Crea account
 o
Accedi
Il logo della documentazione Stripe
/
Crea un account
Accedi

Accettare un pagamento

Accettare pagamenti online in modo sicuro

Copia pagina

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.

Anteprima Checkout incorporataAnteprima Checkout incorporata
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:

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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.

# This example sets up an endpoint using the Sinatra framework.
# To learn more about Sinatra, watch this video: https://youtu.be/8aA9Enb8NVc.
require 'json'
require 'sinatra'
require 'stripe'

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


post '/create-checkout-session' do
  session = Stripe::Checkout::Session.create({
    line_items: [{
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    }],
    mode: 'payment',
    ui_mode: 'embedded',
    return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}'
  })

  {clientSecret: session.client_secret}.to_json
end

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/v3/"></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.
get '/session-status' do
  session = Stripe::Checkout::Session.retrieve(params[:session_id])

  {status: session.status, customer_email:  session.customer_details.email}.to_json
end
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
}

Modalità di pagamento con reindirizzamento

Durante il pagamento, alcune modalità 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:

EventoDescrizioneAzione
checkout.session.completedInviato 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_succeededInviato 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_failedInviato 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:

  1. Crea una sessione Checkout incorporata e monta Checkout nella tua pagina.
  2. 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.
  3. Fai clic su Paga. Verrai reindirizzato al tuo return_url.
  4. Vai alla Dashboard e cerca il pagamento nella pagina Transazioni. Se il pagamento è andato a buon fine, lo vedrai nell’elenco.
  5. 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 cartaScenarioCome 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.

Vedi anche

Questa pagina è stata utile?
SìNo
Hai bisogno di aiuto? Contatta l'assistenza clienti.
Partecipa al nostro programma di accesso anticipato.
Dai un'occhiata al nostro registro delle modifiche.
Domande? Contattaci.
LLM? Leggi llms.txt.
Realizzato da Markdoc
Code quickstart
Guide correlate
API Elements Appearance
Altri scenari di pagamento
Come funzionano le carte
Prodotti utilizzati
Payments
Elements
Checkout