Creare un pulsante per le donazioni di PayPal con JavaScript

In questo articolo vedremo come creare e gestire un pulsante per le donazioni di PayPal con JavaScript. Questa soluzione ci consente di non dover modificare la struttura HTML di una pagina.

La struttura che andremo a creare รจ quella standard usata da PayPal, ossia:

<div id="donate-button-container">
    <div id="donate-button"></div>
    <!-- Codice JavaScript -->
</div>

Con JavaScript dobbiamo inserire lo script di PayPal e attendere che venga caricato per poter usare le API messe a disposizione da PayPal:

'use strict';

(function () {
  document.addEventListener('DOMContentLoaded', () => {
    const container = document.createElement('div');
    container.id = 'donate-button-container';
    const button = document.createElement('div');
    button.id = 'donate-button';
    container.appendChild(button);
    const script = document.createElement('script');
    script.src = 'https://www.paypalobjects.com/donate/sdk/donate-sdk.js';
    container.appendChild(script);
    script.onload = () => {
      PayPal.Donation.Button({
        env: 'production',
        hosted_button_id: 'ID-pulsante',
        image: {
          src: 'https://www.paypalobjects.com/it_IT/IT/i/btn/btn_donate_LG.gif',
          alt: 'Fai una donazione con il pulsante PayPal',
          title: 'PayPal - The safer, easier way to pay online!',
        },
      }).render('#donate-button');
    };
    document.body.appendChild(container);
  });
})();

Notate come lo script venga inserito all'interno del contenitore principale e solo dopo che l'evento load ha avuto luogo si possa utilizzare il codice delle API di PayPal.

Demo

PayPal Donate Button

Conclusione

Con un codice JavaScript molto semplice siamo riusciti ad automatizzare l'inserimento del pulsante per le donazioni di PayPal senza aver dovuto inserire codice HTML aggiuntivo.

Torna su