Come integrare un gateway di pagamento e checkout in un sito statico

In passato, i siti web statici presentavano immagini e descrizioni dei prodotti, invitando i clienti a ordinare via e-mail o telefono. Oggi, invece, i clienti si aspettano un’esperienza più dinamica con solide funzionalità di ecommerce. Questo snellisce il processo di acquisto, incoraggiando gli utenti a completare le transazioni sul un sito anziché esplorare le opzioni della concorrenza.

Aggiungere un gateway di pagamento e un checkout a un sito statico è piuttosto semplice. Le interfacce di programmazione delle applicazioni (API) e le architetture serverless permettono di incorporare le funzionalità di ecommerce nei siti web statici, consentendo a un’azienda di accettare direttamente le transazioni.

Questo tutorial illustra come aggiungere i gateway di pagamento PayPal e Stripe al sito statico di un negozio di fiori. Seguite i passaggi per scoprire come aggiungere queste funzioni al vostro sito web e aprire nuove opportunità di vendita online.

Come iniziare

Prima di addentrarci nei passaggi per integrare un gateway di pagamento e il checkout in un sito statico, poniamo le basi per un’implementazione fluida e funzionante.

1. Scarichiamo e distribuiamo il codice di questo sito statico di esempio sull’hosting di Kinsta.
2. Creiamo un account PayPal, optando per un conto business, in quanto più adatto a questo tutorial. Questo tipo di conto è necessario per testare i pulsanti che integreremo. Dopo l’iscrizione, aggiungiamo i dati dell’azienda e colleghiamo un conto bancario. Dopo la verifica dell’account, otterremo le credenziali API dal portale per sviluppatori di PayPal per poterle utilizzare in seguito.
3. Creiamo un account Stripe inserendo sia i dati dell’attività che quelli bancari. Stripe offre un’attivazione rapida dell’account, il che è vantaggioso per questo progetto. Quando l’account sarà attivo, potremo accedere immediatamente alla dashboard di Stripe. Qui potremo recuperare la chiave API, un componente fondamentale necessario per le prossime fasi.

Uno sguardo al sito statico di esempio

Questo tutorial utilizza un sito statico preesistente per mostrare l’integrazione delle funzionalità di pagamento di PayPal e Stripe. Nonostante il suo contenuto statico, il sito di esempio imita un negozio di fiori online.

L’infrastruttura di Hosting di Siti Statici di Kinsta offre un ambiente efficiente per distribuire e testare le funzionalità di pagamento di PayPal e Stripe per creare un sito statico più sofisticato e accattivante.

Dopo aver installato il sito su Kinsta, andiamo alla pagina iniziale. Clicchiamo sul pulsante ORDER INQUIRY.

Selezioniamo un prodotto disponibile nella pagina del catalogo dei fiori: la rosa turca.

Questa azione ci porta alla pagina dei dettagli del prodotto, dove sono implementati i pulsanti di pagamento per PayPal e Stripe.

Come integrare il checkout PayPal nel sito statico

L’aggiunta di un checkout PayPal offre ai clienti un metodo di pagamento sicuro e affidabile e semplifica il processo di transazione, migliorando l’esperienza dell’utente. Questa integrazione può migliorare notevolmente la funzionalità del sito e la soddisfazione dei clienti.

Ecco come integrare il checkout PayPal nel nostro sito statico:

1. Accediamo alla Centrale per sviluppatori di PayPal.
2. Nella dashboard, andiamo alla sezione Apps & Credentials. Attiviamo la modalità Sandbox e clicchiamo su Create app.
3. Nel modulo, diamo un nome all’applicazione (ad esempio Kinsta Gateway Demo). Selezioniamo Merchant come tipo e clicchiamo su Create App.

   

4. Copiamo il Client ID dalla sezione API credentials per creare un pulsante di pagamento PayPal.

   

5. Scorriamo attraverso la pagina dell’applicazione per esaminare le altre impostazioni. Le impostazioni predefinite vanno bene per questo tutorial. Clicchiamo su Save Changes.

   

6. In seguito, integriamo il checkout di PayPal nel sito statico. Creiamo un pulsante di pagamento utilizzando l’SDK JavaScript per i metodi di pagamento alternativi (APM) di PayPal. Ci permetterà di integrare vari metodi di pagamento in un sito statico senza dover creare un’applicazione back-end. Aggiungiamo il seguente codice JavaScript al file product.html subito prima della chiusura del tag </body>. Sostituiamo YOUR_CLIENT_ID con l’ID cliente PayPal. Potrebbe anche essere necessario sostituire la valuta USD con la valuta accettata dal conto PayPal.

   <!-- PAYPAL BUTTON SCRIPT-->
   <script   
   src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD"   
   data-sdk-integration-source="button-factory"></script>
   <script>
   paypal.Buttons({
       createOrder: function(data, actions) {
       // Set up the transaction
       return actions.order.create({
           purchase_units: [{
           amount: {
               value: '1.00'
           }
           }]
       });
       },
       onApprove: function(data, actions) {
       // Capture the funds from the transaction
       return actions.order.capture().then(function(details) {
           // Show a success message to the buyer
           alert('Transaction completed by ' + details.payer.name.given_name);
       });
       }
   }).render('#paypal-button-container');
   </script>
   <!-- PAYPAL BUTTON SCRIPT-->
   

   La funzione paypal.Buttons definisce due funzioni:

   • createOrder: configura i dettagli della transazione, come l’importo dell’acquisto (1,00 USD in questo caso).
   • onApprove: gestisce l’approvazione della transazione, acquisendo i fondi e mostrando un messaggio di successo all’acquirente. Nel codice qui sopra, utilizziamo la funzione alert().

   Infine, la funzione render specifica che il pulsante PayPal deve essere reso all’interno del sito <div> esistente con l’ID paypal-button-container.

   Ora abbiamo integrato PayPal nel nostro sito statico.

Come integrare Stripe Checkout in un sito statico

Stripe è una piattaforma tecnologica molto diffusa che offre soluzioni di elaborazione dei pagamenti per aziende di tutte le dimensioni. Ecco come aggiungere i pagamenti di Stripe a un sito statico:

1. Prima di implementare il pulsante di pagamento di Stripe, è possibile gestire i prodotti e i prezzi tramite un’API o la dashboard di Stripe. Per utilizzare la dashboard, apriamola, selezioniamo Test mode e clicchiamo su Product Catalog.

   

2. Clicchiamo sul pulsante + Add Product per aprire il modulo Add Product.

   

3. Inseriamo i dettagli del prodotto nei campi seguenti:
   • Name: Turkish Rose
   • Description: This is a beautiful Turkish Rose
   • Image: (Carichiamo il file imagesturkishrose.png)
   • Modello di pagamento: One-off
   • Amount: $1.00
   • Valuta: USD (o la valuta che preferiamo)
4. Clicchiamo su Add product.
5. Nell’elenco della pagina del catalogo prodotti, selezioniamo il prodotto Turkish Rose.

   

6. Nella sezione Pricing dei prodotti, clicchiamo su Create payment link. Controlliamo le opzioni del prodotto e assicuriamoci che la quantità sia 1.

   

7. Clicchiamo su Create link.

   

8. Nella pagina PAYMENT LINK, clicchiamo su Buy button.

   

9. Quando appare il pannello del Buy button, potremo visualizzare il codice generato per il pulsante di pagamento. Scegliamo il layout del pulsante, attiviamo la funzione di modifica del testo del pulsante e scrivamo “Buy with Stripe” nel campo Change button text. Quindi, clicchiamo su Save changes and copy code per copiare il codice generato negli appunti del sistema operativo.

   

10. Incolliamo il codice copiato nel file product.html del codice di esempio prima del tag di chiusura </body> (tra i commenti STRIPE BUTTON BEGIN e STRIPE BUTTON END ), come per PayPal.

    <!-- STRIPE BUTTON BEGIN -->
    <script> async
      src="https://js.stripe.com/v3/buy-button.js">
    </script>
    
    <stripe-buy-button>
      buy-button-id="BUY_BUTTON_ID"
      publishable-key="PUBLISHABLE_KEY"
    >
    </stripe-buy-button>
    <!-- STRIPE BUTTON END -->
    

Una volta implementati i pulsanti di pagamento di PayPal e Stripe, distribuiamo il codice del sito statico nell’ambiente di Hosting di Siti Statici di Kinsta.

Testare il processo di pagamento

Apriamo la pagina dei dettagli del prodotto della demo del sito statico. Assicuriamoci che i pulsanti PayPal e Stripe vengano visualizzati correttamente.

Clicchiamo sul pulsante di pagamento di PayPal. Si aprirà una finestra di dialogo di accesso in cui il cliente si autenticherà con PayPal per effettuare l’acquisto.

Se riscontriamo problemi di login in questa fase, potrebbe essere dovuto al fatto che il test è stato effettuato con un account personale piuttosto che con uno aziendale.

In alternativa, i clienti possono scegliere il pulsante Debit or Credit Card PayPal. Clicchiamo su questa opzione per visualizzare la finestra di dialogo. Inseriamo i dati dell’account.

PayPal dovrebbe presentare i dettagli dell’ordine e dell’account. Clicchiamo su Complete Purchase.

Quando PayPal approva la transazione, il codice JavaScript del client mostra un avviso per informare che la transazione è stata completata. Questo avviso è a scopo di sviluppo e di debug: non va usato nel codice di produzione.

Per verificare la transazione, apriamo la dashboard di PayPal for Business. Clicchiamo su Activity > All Transactions per visualizzare un elenco dettagliato di tutte le transazioni recenti.

Nella pagina product.html del sito del negozio di fiori, possiamo anche testare il flusso di pagamento di Stripe cliccando sul pulsante Buy with Stripe. Questa azione attiva la finestra di dialogo di Stripe contenente i dettagli del prodotto e le opzioni di pagamento, tra cui Google Pay, Link e pagamenti con carta di credito.

A scopo dimostrativo, scegliamo Google Pay. Una finestra di dialogo ci chiede di confermare l’acquisto utilizzando Google Pay con una carta del nostro elenco, ad esempio una Mastercard salvata.

Facciamo clic su PAY. In caso di successo, Stripe presenta al cliente la conferma dell’acquisto.

Nella dashboard di Stripe, apriamo la scheda Payments. Questa mostra i dettagli della transazione completata, tra cui l’importo, la valuta, la descrizione, il cliente e la data.

Come risolvere i problemi del processo di checkout

Ecco alcuni passaggi per la risoluzione dei problemi per diagnosticare e risolvere gli errori riscontrati durante il test del checkout:

• Correggere la configurazione del gateway di pagamento.
• Convalidare il certificato SSL.
• Verificare la compatibilità del browser del cliente.
• Applicare una corretta gestione degli errori.
• Testare il processo di pagamento in più ambienti.
• Utilizzare tecniche di log e monitoraggio.

Riepilogo

Abbiamo integrato i pulsanti di pagamento per PayPal e Stripe in un esempio di negozio di fiori online ospitato da Kinsta. Le stesse tecniche possono essere utilizzate per aggiungere opzioni di pagamento ad altri siti web statici, incoraggiando così i clienti ad acquistare i vostri prodotti e incrementando di conseguenza le vendite.

Il servizio di Hosting di Siti Statici di Kinsta offre uno spazio perfetto per gli sviluppatori che si immergono nel regno dinamico dell’ecommerce e dell’integrazione dei pagamenti. La sua solida infrastruttura garantisce un caricamento rapido delle pagine, favorendo un’esperienza di acquisto online senza problemi.

Oltre al servizio di Hosting di Siti Statici, Kinsta offre anche un servizio di Hosting di Applicazioni progettato per applicazioni più dinamiche, come le applicazioni web che necessitano di elaborazione lato server, interazioni con database e altre funzionalità complesse.

Trasformate il vostro sito statico in un’esperienza dinamica con gateway di pagamento come PayPal e Stripe. Quale altro servizio preferite o avete già provato? Condividetelo nei commenti qui sotto.

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).

• LinkedIn