Come aggiungere Stripe Checkout a un’applicazione Next.js

Stripe è una piattaforma di elaborazione dei pagamenti che ti consente di aggiungere una pagina di pagamento predefinita a un sito web e di accettare e gestire i pagamenti online. È molto popolare grazie alla sua facilità d’uso, all’ampia documentazione, al supporto per i pagamenti locali, alle opzioni di personalizzazione e branding, agli abbonamenti, alla fatturazione e alla prevenzione delle frodi.

Utilizzando Stripe, puoi accettare pagamenti da una varietà di fonti, tra cui carte di credito e di debito, Apple Pay e Google Pay.

Aggiunta di Stripe Checkout a un’applicazione Next.js

Puoi integrare Stripe checkout con applicazioni create con diverse tecnologie tra cui Next.js.

Questo tutorial presuppone che tu abbia configurato un sito di e-commerce Next.js e fornisce solo una guida su come aggiungere Stripe checkout al sito.

Configurazione di un account Stripe e recupero delle chiavi API

Per utilizzare Stripe checkout, devi creare un account Stripe e ottenere le chiavi API. Le chiavi API sono costituite da una chiave pubblicabile e una chiave segreta, che utilizzerai per autenticare le richieste dalla tua applicazione all’API Stripe.

Segui questi passaggi per configurare un account Stripe:

1. Vai al sito Web di Stripe e fai clic sul pulsante “Iscriviti”.
2. Inserisci la tua e-mail, nome completo, paese e password e fai clic sul pulsante “Crea account”.
3. Verifica la tua email seguendo le istruzioni nell’email che Stripe ti invierà.
4. Nella dashboard di Stripe, fai clic su “Attiva pagamenti” e rispondi alle domande per completare la procedura di configurazione dell’account. Queste domande possono riguardare il nome dell’azienda, l’indirizzo e le informazioni bancarie. Per scopi di sviluppo, utilizzare la modalità test.
5. Copia le chiavi API dalla scheda “Sviluppatori” al file. env nella cartella dell’app.

Ora sarai in grado di accedere all’account Stripe utilizzando le chiavi API.

Installazione del pacchetto Stripe npm

Esegui questo comando per installare il pacchetto Stripe npm.

npm install stripe


Importa la libreria Stripe nella pagina del componente di pagamento.

import Stripe from 'stripe';


Nella cartella API, crea un nuovo file denominato file checkout-session.js. Inizializza l’oggetto Stripe con le chiavi API che hai recuperato dalla tua dashboard Stripe.

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);


Nella funzione gestore, ottieni gli elementi da estrarre dai parametri del corpo.

export default async function handler(req, res) {
  const { item } = req.body;
};


Crea un oggetto sessione di checkout alla funzione gestore e passa gli elementi.

const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  line_items: [
    item,
  ],
  mode: 'payment',
  success_url: `${req.headers.origin}/?success=true`,
  cancel_url: `${req.headers.origin}/?canceled=true`,
});


Ecco cosa significano i nodi che stai passando all’oggetto sessione:

• payment_method_types : i tipi di metodo di pagamento accettati dalla sessione di pagamento. Sfoglia l’elenco dei metodi di pagamento disponibili nella documentazione di Stripe .
• line_items : un elenco di articoli che l’utente sta acquistando.
• mode : la modalità della sessione di checkout. Se gli articoli in checkout includono almeno un articolo ricorrente passa “Abbonamento”.
• success_url : L’URL Stripe reindirizzerà gli utenti se il pagamento va a buon fine
• cancel_url : L’URL Stripe reindirizzerà gli utenti se annullano il pagamento.

Complessivamente, il file checkout-session.js dovrebbe assomigliare a questo:

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { cart } = req.body;


    try {
      const session = await stripe.checkout.sessions.create({
        line_items: [
          cart
        ],
        mode: 'payment',
        success_url: `${req.headers.origin}/success`,
        cancel_url: `${req.headers.origin}/cancele`,
      });

      res.redirect(303, session.url);
    } catch (err) {
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}


Questa funzione ora utilizza try/catch per reindirizzare gli utenti quando si verifica un errore durante il checkout. Ora che hai creato il percorso API che elaborerà il pagamento, il passaggio successivo consiste nel creare un componente di checkout per gestire il processo di checkout.

Dai un’occhiata a questo post sulla creazione di percorsi API in Next.js per una spiegazione più approfondita dei percorsi API di Next.js.

Creazione di un componente di pagamento

Per elaborare il checkout, è necessario installare la libreria @stripe/stripe-js utilizzando NPM.

npm install @stripe/stripe-js


La libreria @stripe/stripe-js è un’utilità di caricamento che ti aiuterà a caricare l’istanza Stripe.js.

Al termine dell’installazione, crea un nuovo file nella directory /components denominato /components/checkout.js. Quindi chiama la funzione loadstripe dalla libreria @stripe/stripe-js, passando la chiave pubblicabile come argomento.

import { loadStripe } from '@stripe/stripe-js';


const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);


loadstripe() restituisce una promessa che si risolve con un oggetto Stripe appena creato una volta caricato Stripe.js.

Successivamente, aggiungi una funzione per creare una sessione di pagamento nel componente.

export default function Checkout({cart}) {
  const handleCheckout = async () => {
    try {
      const stripe = await stripePromise;


      const checkoutSession = await axios.post("/api/checkout-session", {
        cart,
      });

      if (result.error) {
        alert(result.error.message);
      }
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div>
    </div>
  );
}


Questa funzione utilizza Axios per chiamare l’API creata nella cartella /api per recuperare la sessione di pagamento.

Aggiungi un pulsante di checkout nell’istruzione return che attiverà la funzione handleCheckout quando viene fatto clic.

<button onClick={handleCheckout}>
    Checkout
</button>


Puoi chiamare il componente di pagamento nella pagina del carrello.

Gestione dei reindirizzamenti da Stripe

Nel percorso API di checkout, hai definito un URL di successo e un URL di annullamento che lo stripe dovrebbe reindirizzare un utente quando il processo ha esito positivo o negativo. L’URL di annullamento è mappato sulla rotta /cancel, mentre l’URL di successo è mappato sulla rotta /success. Aggiungi due componenti nella cartella /pages denominata success e cancel per gestire questi URL.

In pages/success.js, aggiungi il componente success.

export default function Success() {
  return <div>Checkout out successfully</div>;
}


In pages/cancel.js, aggiungi il componente cancel.

export default function Cancel() {
  return <div>An error occurred during checkout</div>;
}

Ora, Stripe reindirizzerà a una di queste pagine a seconda dello stato del pagamento.

Se utilizzi Next.js 13, guarda questo tutorial su come funziona la cartella dell’app in Next.js 13 per passare dalla cartella /pages.

Ulteriori opzioni di personalizzazione per la pagina di pagamento

Dalla dashboard di Stripe, puoi personalizzare la pagina di pagamento in modo che corrisponda all’aspetto del tuo marchio. Puoi aggiungere un logo, un’icona, il colore del marchio, il colore dell’accento e persino utilizzare il tuo dominio personalizzato. Inoltre, durante la creazione della sessione di checkout, puoi aggiungere i metodi di pagamento che preferisci e anche specificare la lingua che Stripe deve visualizzare nella pagina di checkout. Tutte queste opzioni ti consentono di personalizzare il processo di checkout in base alla tua applicazione.

Perché utilizzare Stripe per la pagina di pagamento?

Sebbene tu possa creare il tuo servizio di elaborazione dei pagamenti, l’utilizzo di una piattaforma di pagamento come Stripe è solitamente un’opzione migliore. Stripe checkout ti aiuta a ridurre i tempi di sviluppo, permettendoti di iniziare ad accettare pagamenti in breve tempo.

Inoltre, ottieni funzionalità aggiuntive come conformità PCI, recupero del carrello, funzionalità di sconto e la possibilità di raccogliere informazioni sulla spedizione e inviare fatture post-pagamento.