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

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

Crea una pagina di pagamento sul tuo sito web utilizzando Stripe Elements e Checkout Sessions, un’integrazione front-end che gestisce imposte, sconti, costi di spedizione e molto altro ancora.

Paese del cliente
Formato
Tema
Layout
Questa demo mostra Google Pay o Apple Pay solo se disponi di una carta attiva con uno dei due wallet.

Configurare il server
Lato server

Prima di iniziare, devi registrarti per creare un account Stripe.

Utilizza le librerie ufficiali di Stripe per accedere all’API dalla tua applicazione.

Command Line
npm install stripe@18.0.0 --save

Imposta l’SDK in modo che utilizzi almeno la versione dell’API 2025-03-31.basil.

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
import Stripe from 'stripe';
const stripe = new Stripe(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
, {
  apiVersion: '2025-03-31.basil' as any,
});

Creare una sessione di Checkout
Lato server

Aggiungi sul server un endpoint che crei una sessione di Checkout e restituisca la sua chiave privata client al tuo front-end. Una sessione di Checkout rappresenta la sessione in cui il cliente completa acquisti una tantum o sottoscrive abbonamenti. Le sessioni di Checkout scadono 24 ore dopo la creazione.

server.ts
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Configurare il front-end
Lato client

Includi lo script Stripe.js nella tua pagina di pagamento aggiungendolo all’oggetto head del tuo file HTML. Carica sempre Stripe.js direttamente da js.stripe.com per mantenere la conformità alle norme PCI. Non includere lo script in un pacchetto e non ospitarne una copia personale.

Dovrai aggiornare Stripe.js a basil dalla versione 3 includendo il seguente tag di script: <script src="https://js.stripe.com/basil/stripe.js"></script>. Ulteriori informazioni sul controllo delle versioni di Stripe.js.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Nota

Stripe fornisce un pacchetto npm che puoi utilizzare per caricare Stripe.js come modulo. Consulta il progetto su GitHub. È necessaria la versione 7.0.0 o successiva.

Inizializza stripe.js.

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Inizializzare Checkout
Lato client

Crea una funzione fetchClientSecret. Questa funzione recupera la chiave privata client dal server e restituisce una promessa che si risolve con la chiave privata client. Chiama initCheckout, specificando fetchClientSecret. initCheckout restituisce una promessa di risoluzione in un’istanza checkout.

L’oggetto checkout funge da base per la tua pagina di pagamento, contenente i dati della sessione di Checkout e i metodi per aggiornarla.

L’oggetto restituito da checkout.session() contiene le informazioni sulle tue tariffe. Consigliamo di leggere e visualizzare i parametri total e lineItems della sessione nell’interfaccia utente.

In questo modo puoi attivare nuove funzioni con modifiche minime al codice. Ad esempio, aggiungere i prezzi manualmente non richiede modifiche all’interfaccia utente se si visualizza il parametro total.

checkout.js
const fetchClientSecret = () => {
  return fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret);
};
stripe.initCheckout({fetchClientSecret})
  .then((checkout) => {
    const checkoutContainer = document.getElementById('checkout-container');
    checkoutContainer.append(JSON.stringify(checkout.lineItems, null, 2));
    checkoutContainer.append(document.createElement('br'));
    checkoutContainer.append(`Total: ${checkout.session().total.total.amount}`);
  });
index.html
<div id="checkout-container"></div>

Raccogliere l'indirizzo email del cliente
Lato client

Crea un campo di inserimento per raccogliere l’indirizzo email del cliente. Chiama updateEmail quando il cliente termina l’inserimento per convalidare e salvare l’indirizzo email.

A seconda del design del tuo modulo di pagamento, puoi chiamare updateEmail nei seguenti modi:

  • Immediatamente prima di inviare il pagamento. Puoi anche chiamare updateEmail per eseguire la convalida prima, ad esempio quando l’utente fa clic al di fuori del campo di inserimento.
  • Prima di passare alla fase successiva, ad esempio facendo clic sul pulsante Salva, se il tuo modulo prevede più passaggi.
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    checkout.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
});

Raccogliere i dati di pagamento
Lato client

Raccogli i dati di pagamento sul client con Payment Element. Payment Element è un componente di interfaccia utente preintegrato che semplifica la raccolta dei dati di pagamento per vari metodi di pagamento.

Innanzitutto, crea un elemento DOM del contenitore per montare Payment Element. Poi crea un’istanza di Payment Element utilizzando checkout.createPaymentElement e montala chiamando element.mount, fornendo un selettore CSS o l’elemento DOM del contenitore.

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Consulta la documentazione di Stripe.js per scoprire quali opzioni sono supportate.

Puoi personalizzare l’aspetto di tutti gli elementi specificando elementsOptions.appearance durante l’inizializzazione di Checkout nel front-end.

Inviare il pagamento
Lato client

Visualizza un pulsante “paga” che chiama confirm dall’istanza di checkout per inviare il pagamento.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    checkout.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
});

Testare l'integrazione

  1. Vai alla pagina di pagamento.
  2. Compila i dati di pagamento con un dei metodi di pagamento indicati nella tabella di seguito. Per i pagamenti con carta:
    • Inserisci una data di scadenza futura per la carta.
    • Inserisci un numero di 3 cifre per il CVC.
    • Inserisci un qualsiasi codice postale.
  3. Invia il pagamento a Stripe.
  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 i dati di addebito e l’elenco degli articoli acquistati. Puoi utilizzare queste informazioni per evadere l’ordine.
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