Come integrare il form di Elementor con un bottone PayPal

immagine articolo elementor paypal

Indice dei Contenuti

In questo tutorial vediamo come integrare un bottone paga ora di Paypal con il form di Elementor senza l’utilizzo di plugin.

Faremo in modo che cliccando sul pulsante di invio del form creato con Elementor Pro, verremo reindirizzati automaticamente al pagamento su PayPal.

Ecco i passaggi necessari per integrare il form di Elementor con un bottone PayPal:

1) Preparazione del bottone 

2) Creazione Form Elementor Pro

2) La regola jquery 

1) Preparazione del bottone

Apriamo un editor di testo (personalmente uso Atom), creiamo un nuovo file e inseriamo il seguente codice:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

<!-- Identify your business so that you can collect the payments. -->
  <input type="hidden" name="business" value="herschelgomez@xyzzyu.com">

  <!-- Specify a Buy Now button. -->
  <input type="hidden" name="cmd" value="_xclick">

  <!-- Specify details about the item that buyers will purchase. -->
  <input type="hidden" name="item_name" value="Hot Sauce-12oz. Bottle">
  <input type="hidden" name="amount" value="5.95">
  <input type="hidden" name="currency_code" value="USD">

  <!-- Display the payment button. -->
  <input type="image" name="submit" border="0"
  src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif"
  alt="Buy Now">
  <img alt="" border="0" width="1" height="1"
  src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >

</form>

Link alla documentazione ufficiale di PayPal Developers:
https://developer.paypal.com/

• Per prima cosa dobbiamo assegnare un ID al bottone, quindi modifichiamo la prima riga di codice per assegnare l’ID:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id=“id_bottone”>

• Adesso  è importante nascondere il bottone nel frontend, quindi inseriamo la seguente regola Css:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post"
id="id_bottone" style="display:none">

• Adesso scendiamo alla riga 4 e inseriamo la mail del nostro account PayPal all’interno della variabile business:

<!-- Il tuo profilo PayPal -->
  <input type="hidden" name="business" value="lamiamailpaypal@xyz.com">

Adesso possiamo specificare i dettagli del prodotto/servizio che vendiamo inserendo i valori all’interno delle altre variabili (riga 10,11,12).

Con la variabile “item_name” inseriamo il nome del prodotto/servizio che vogliamo vendere:

<input type="hidden" name="item_name" value="nomedelprodotto">

Nella variabile “amount” inseriamo il prezzo del del prodotto/servizio:

<input type="hidden" name="amount" value="29">

(In questo esempio il prezzo è 29).

Infine nella variabile “currency_code” indichiamo la moneta corrente, per esempio l’euro:

<input type="hidden" name="currency_code" value="EUR">

A questo punto possiamo personalizzare ulteriormente il nostro bottone, inserendo altre variabili che PayPal ci mette a disposizione.

Per esempio se volessimo impostare una url di ritorno a cui l’utente sarà reindirizzato ad acquisto completato, è sufficiente inserire la seguente variabile e inserire la url all’interno della value=“”

 <!-- URL DI RITORNO -->
<INPUT TYPE="hidden" NAME="return" value="URLdiritorno">

Per personalizzare il logo nella pagina di acquisto usiamo la seguente variabile:

<!-- Logo nella pagina PayPal -->
  <input type="hidden" name="image_url" value="https://gabrieleiacovone/wp-content/uploads/logo.png">

È sufficiente sostituire la url nella value inserendo il link alla nostra immagine.

Puoi trovare tutte le variabili nella documentazione PayPal a questa pagina.

Per personalizzare ulteriormente la pagina di Checkout vai a questa pagina.

Per impostare la pre-compilazione dei campi vai a questa pagina.

2) Creazione Form Elementor Pro

A questo punto creiamo un form con Elementor Pro, e assegniamo un ID per poterlo richiamare successivamente.

Come integrare il form di Elementor con un bottone PayPal 1

Inseriamo tutto il codice del bottone all’interno di un widget html di Elementor e posizioniamolo subito prima del form.

Come integrare il form di Elementor con un bottone PayPal 2

Se hai seguito il tutorial passo passo il codice del bottone che hai dovrebbe essere questo:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="id_bottone" 
      style="display:none">

<!-- Il tuo profilo PayPal -->
  <input type="hidden" name="business" value="lamiamailpaypal@xyz.com">

 <!-- Specifica il tipo di bottone -->
  <input type="hidden" name="cmd" value="_xclick">

 <!-- Specifica i dettagli del prodotto/servizio che vendi -->
 <input type="hidden" name="item_name" value="nomedelprodotto">
  <input type="hidden" name="amount" value="29">
  <input type="hidden" name="currency_code" value="EUR">

<!-- URL DI RITORNO -->
<INPUT TYPE="hidden" NAME="return" value="URLdiritorno">

<!-- Logo nella pagina PayPal -->
  <input type="hidden" name="image_url" value="https://gabrieleiacovone/wp-content/uploads/logo.png">

  <!-- Visualizza il bottone -->
  <input type="image" name="submit" border="0"
  src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif"
  alt="Buy Now">
  <img alt="" border="0" width="1" height="1"
  src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >

 </form>

Ricorda di sostituire i valori con quelli corretti.

3) Preparazione del codice Jquery

A questo punto abbiamo bisogno di una semplice regola Jquery che andrà a collegare l’invio del form di Elementor al bottone PayPal.

Quindi torniamo nell’editor di testo e inseriamo questo snippet:

<script type="text/javascript">
jQuery( document ).ready( function( $ ) {
$( '#id_form' ).on('submit_success', function() {
$( '#id_bottone' ).submit();
} )
} );
</script>

Andiamo a sostituire su $(‘#id_form‘) con l’ID che precedentemente abbiamo assegnato al form di Elementor.

Mentre su $( ‘#id_bottone‘ ) inseriamo l’ID che precedentemente abbiamo assegnato al bottone PayPal.

Inseriamo questa regola Jquery in fondo al widget html che abbiamo creato in precedenza e salviamo la pagina.

Come integrare il form di Elementor con un bottone PayPal 3

Facciamo un test per verificare che tutto funzioni…

Come integrare il form di Elementor con un bottone PayPal 4

…et voilà, abbiamo creato un metodo di pagamento senza installare plugin.

Come integrare il form di Elementor con un bottone PayPal 5

Ho realizzato anche un video tutorial per questo articolo, ti invito a iscriverti al mio canale YouTube per altri tutorial come questo.

Conclusioni finali

Come abbiamo visto in questo tutorial, personalizzando un bottone PayPal e scrivendo un piccolo snippet Jquery, possiamo crearci un sistema di pagamento nel nostro sito WordPress senza dover installare un plugin.

Se questo tutorial ti è stato utile fammelo sapere con un commento qua sotto, rispondo sempre 😉

Per ora è tutto, ci vediamo al prossimo articolo!

Ti è stato utile questo articolo?

All’interno degli articoli potrebbero essere presenti dei link affiliati.
Ci tengo a precisare che tutti i link di affiliazione sono di prodotti e servizi che ho testato, che utilizzo e in cui credo veramente.
Nel momento in cui un prodotto risultasse non più il top, rimuoverei immediatamente tutti i relativi link.

Gabriele Iacovone

Web Designer

La mia passione per il Web Design mi spinge ad aiutare persone, aziende e professionisti nello sviluppo di Siti Web efficaci.

Iscriviti alla newsletter per ricevere i prossimi tutorials e le novità su WordPress e il Web Design

13 commenti su “Come integrare il form di Elementor con un bottone PayPal”

  1. Sandro Paparozzi

    Ciao,
    tutto chiaro ed elegante (come del resto tutto il tuo sito) ma non ho trovato un elemento che mi aspettavo: come si definisce il conto di accredito ? quello di addebito è individuato o dal conto Paypal o dalla carta di credito, ma quello di addebito ?
    Ho cercato un po’ sul Web, ma ovunque si parla del conto di addebito (anche nel bottone di Elementor Pro) mai di quello di accredito; mi sfugge qualcosa …
    Grazie

    1. Ciao Sandro,
      grazie mille!

      Il conto sulla quale ricevi il pagamento è definito in questa stringa:

      — Il tuo profilo PayPal —
      input type=”hidden” name=”business” value=”lamiamailpaypal@xyz.com”
      (Trovi il codice completo al punto 2 dell’articolo)

      Ti basta sostituire lamiamailpaypal@xyz.com con la mail che deve ricevere il pagamento.

      Mentre il conto che esegue il pagamento viene preso proprio al momento del pagamento. Se paghi con PayPal devi eseguire l’accesso al tuo account quindi chi riceve il pagamento vede da chi arriva naturalmente.

      Spero di averti chiarito, nel caso chiedi pure.

      1. Sandro Paparozzi

        Penso le idee inizino a schiarirsi …
        se usi il bottone di pagamento con paypal di Elementor Pro ( 3.3.0 ) quando lo clicchi non compare una schermata come quella tua (che è proprio quella che mi sarei aspettato) ma una schermata che contiene un account paypal e relativa pw ; chi clicca il bottone è l’acquirente mentre l’account è quello del venditore, ma come fa l’acquirente a conoscere la pw del venditore ??? Dai una occhiata qui https://stranamente.net/pre-registrati-Pagamento/, per piacere, e prova a fare un acquisto … se poi nella schermata che ti viene proposta inserisci la pw del venditore compare una schermata che proponi tu; mi sembra che Elementor non funzioni a dovere. Sempre che non sia io che non ho capito un piffero. Ho provato a prendere contatto con Elementor e non mi hanno risposto, mentre Paypal mi ha messo in contatto con una moldava, poi con un tunisino, poi con un irlandese, ed infine con una certa Jessica dislocata nel Cloud.
        Puoi fare tutte le prove che voi, ho il backup.
        Grazie

      2. Sandro Paparozzi

        Questa mattina sono passato per verificare la situazione e mi sono accorto che dopo giorni di calma piatta qualcosa si è mosso “automaticamente” : nella mia schermata non compare più l’account del venditore, per il resto niente di nuovo.

        1. Ciao Sandro,
          da quello che scrivi mi pare di capire che forse c’è qualcosa che non funziona, queste prove le hai fatte da navigazione in incognito?

          1. Sandro Paparozzi

            No, sto realizzando il sito http://www.stranamente.net per mio figlio; è il mio primo sito con WordPress; personalmente preferisco l’ambiente ASP.Net MVC (C#), DevExpress, Angular ecc, le applicazioni che sviluppavo, ho 75 anni, avevano carattere industriale. Se il problema ti interessa ho preparato, per dialogare con Elementor e Paypal, alcuni diagrammi di attività ( pseudo UML un po’ birichini ); se mi mandi una email te li invio.

  2. Ciao Gabriele,
    ho trovato molto utile il tuo articolo. E’ possibile collegare il campo ammount a una casella di elementor in modo che il cliente possa decidere il prezzo? Mi servirebbe per offrire ai clienti la possibilità di acquistare dei buoni regalo con importo personalizzato.

    1. Ciao Luca,
      se è il cliente a dover inserire il prezzo potresti usare il link paypal.me per ricevere il pagamento.

      Il campo amount che trovi sul codice è riferito al pulsante paypal quindi è collegato alla mail del tuo account PayPal.

  3. Ciao.
    Ho provato a seguire tutto il tutorial. Come mai quando mi reindirizza sulla Paypal mi dice “Servizio non disponibile”?
    Grazie mille ancora..

  4. Ciao Gabriele io l’ho provato ma mi funziona(perfettamente) solo se sono loggato dentro Wordpres. Diversamente mi inoltra il form ma non mi fa il redirect sulla pagina. Ho utilizzato lil wizard di creazione bottone con gli strumenti di paypal(paypal.com/buttons) Mi sai aiutare?

    Grazie ciao

    1. Ciao Marco,
      hai svuotato la cache?

      Prova anche a ricontrollare lo script, se non è settato correttamente non ti fa il redirect.

      Trovi lo script funzionante più in alto in questa pagina (punto 3), ricordati di mettere l’ID del form, altrimenti non può essere richiamato dallo script.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

 

Ciao! Come posso aiutarti?
Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Condividi su telegram
Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su pinterest