{"id":76240,"date":"2024-01-31T18:36:27","date_gmt":"2024-01-31T17:36:27","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=76240&preview=true&preview_id=76240"},"modified":"2024-02-02T18:03:52","modified_gmt":"2024-02-02T17:03:52","slug":"integrazione-di-un-gateway-di-pagamento","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/integrazione-di-un-gateway-di-pagamento\/","title":{"rendered":"Come integrare un gateway di pagamento e checkout in un sito statico"},"content":{"rendered":"

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\u00f9 dinamica con solide funzionalit\u00e0 di ecommerce. Questo snellisce il processo di acquisto, incoraggiando gli utenti a completare le transazioni sul un sito anzich\u00e9 esplorare le opzioni della concorrenza.<\/p>\n

Aggiungere un gateway di pagamento e un checkout a un sito statico \u00e8 piuttosto semplice. Le interfacce di programmazione delle applicazioni (API) e le architetture serverless permettono di incorporare le funzionalit\u00e0 di ecommerce nei siti web statici<\/a>, consentendo a un’azienda di accettare direttamente le transazioni.<\/p>\n

Questo tutorial illustra come aggiungere i gateway di pagamento PayPal e Stripe<\/a> 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\u00e0 di vendita online.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Come iniziare<\/h2>\n

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.<\/p>\n

    \n
  1. Scarichiamo e distribuiamo il codice di questo sito statico di esempio<\/a> sull’hosting di Kinsta<\/a>.<\/li>\n
  2. Creiamo un account PayPal<\/a>, optando per un conto business, in quanto pi\u00f9 adatto a questo tutorial. Questo tipo di conto \u00e8 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<\/a> per poterle utilizzare in seguito.<\/li>\n
  3. Creiamo un account Stripe<\/a> inserendo sia i dati dell’attivit\u00e0 che quelli bancari. Stripe offre un’attivazione rapida dell’account, il che \u00e8 vantaggioso per questo progetto. Quando l’account sar\u00e0 attivo, potremo accedere immediatamente alla dashboard di Stripe<\/a>. Qui potremo recuperare la chiave API, un componente fondamentale necessario per le prossime fasi.<\/li>\n<\/ol>\n

    Uno sguardo al sito statico di esempio<\/h3>\n

    Questo tutorial utilizza un sito statico preesistente per mostrare l’integrazione delle funzionalit\u00e0 di pagamento di PayPal e Stripe. Nonostante il suo contenuto statico, il sito di esempio imita un negozio di fiori online.<\/p>\n

    L’infrastruttura di Hosting di Siti Statici di Kinsta<\/a> offre un ambiente efficiente per distribuire e testare le funzionalit\u00e0 di pagamento di PayPal e Stripe per creare un sito statico pi\u00f9 sofisticato e accattivante.<\/p>\n

    Dopo aver installato il sito su Kinsta, andiamo alla pagina iniziale. Clicchiamo sul pulsante ORDER INQUIRY<\/strong>.<\/p>\n

    \"Una
    Esempio di pagina iniziale del sito con il pulsante ORDER INQUIRY<\/strong>.<\/figcaption><\/figure>\n

    Selezioniamo un prodotto disponibile nella pagina del catalogo dei fiori<\/strong>: la rosa turca.<\/p>\n

    \"Il
    Pagina di esempio del catalogo del sito con varie opzioni di fiori.<\/figcaption><\/figure>\n

    Questa azione ci porta alla pagina dei dettagli del prodotto, dove sono implementati i pulsanti di pagamento per PayPal e Stripe.<\/p>\n

    \"Opzioni
    Pagina di prodotto del sito di esempio.<\/figcaption><\/figure>\n

    Come integrare il checkout PayPal nel sito statico<\/h2>\n

    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\u00f2 migliorare notevolmente la funzionalit\u00e0 del sito e la soddisfazione dei clienti.<\/p>\n

    Ecco come integrare il checkout PayPal nel nostro sito statico:<\/p>\n

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

      \"Il
      Il modulo Create App di PayPal.<\/figcaption><\/figure><\/li>\n
    4. Copiamo il Client ID<\/strong> dalla sezione API credentials<\/strong> per creare un pulsante di pagamento PayPal.\n

      \"Credenziali
      Credenziali dell’applicazione PayPal.<\/figcaption><\/figure><\/li>\n
    5. Scorriamo attraverso la pagina dell’applicazione per esaminare le altre impostazioni. Le impostazioni predefinite vanno bene per questo tutorial. Clicchiamo su Save Changes<\/strong>.\n

      \"Le
      Le funzionalit\u00e0 dell’app di PayPal.<\/figcaption><\/figure><\/li>\n
    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)<\/a> di PayPal. Ci permetter\u00e0 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<\/strong> subito prima della chiusura del tag <\/body><\/code>. Sostituiamo YOUR_CLIENT_ID<\/code> con l’ID cliente PayPal. Potrebbe anche essere necessario sostituire la valuta USD<\/code> con la valuta accettata dal conto PayPal.\n
      <!-- PAYPAL BUTTON SCRIPT-->\n<script   \nsrc=\"https:\/\/www.paypal.com\/sdk\/js?client-id=YOUR_CLIENT_ID¤cy=USD\"   \ndata-sdk-integration-source=\"button-factory\"><\/script>\n<script>\npaypal.Buttons({\n    createOrder: function(data, actions) {\n    \/\/ Set up the transaction\n    return actions.order.create({\n        purchase_units: [{\n        amount: {\n            value: '1.00'\n        }\n        }]\n    });\n    },\n    onApprove: function(data, actions) {\n    \/\/ Capture the funds from the transaction\n    return actions.order.capture().then(function(details) {\n        \/\/ Show a success message to the buyer\n        alert('Transaction completed by ' + details.payer.name.given_name);\n    });\n    }\n}).render('#paypal-button-container');\n<\/script>\n<!-- PAYPAL BUTTON SCRIPT-->\n<\/code><\/pre>\n
      La funzione paypal.Buttons<\/code> definisce due funzioni:<\/p>\n