Come integrare il form di Elementor con un bottone PayPal

immagine articolo elementor paypal

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 (per esempio 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.

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

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.

Facciamo un test per verificare che tutto funzioni…

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

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?

[Voti: 1    Media Voto: 5/5]

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.

foto gabriele iacovone

Gabriele Iacovone

Web Designer WordPress

Ciao, mi chiamo Gabriele e sono un Web Designer freelance e autore del blog.
La mia passione per WordPress mi spinge ad aiutare persone, aziende e professionisti nello sviluppo di Siti Web potenti e flessibili.

Ricevi i miei consigli e le guide su WordPress e il Web Design

  • Non preoccuparti, niente spam.

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

  1. 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 *

 

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