BreezingForms, don PayPal via formulaire

Comment utiliser le bouton PayPal pour proposer aux visiteurs de votre site de vous faire un don ?

Niveau: Moyen
Version BF minimale requise: BreezingForms Lite

Créez un petit formulaire tout simple, nommez-le Don PayPal ou comme vous le souhaitez. Désactivez le bouton de validation du formulaire (et éventuellement les autres) et ajoutez-lui les champs suivants :

Toute propriété de champ non renseignée ci-dessous peut rester vide. Après chaque création de champ, enregistrez les propriétés avant de passer au suivant.

  1. Un champs de type texte :
    1. Titre : Montant
    2. Nom : donationAmount (Note : Ce nom est important pour la suite, ne pas le modifier)
    3. Validation : Cochez la case Obligatoire
    4. Validation : Bibliothèque
    5. Message d'erreur : Veuillez saisir le montant de votre don. (ou ce que vous désirez)
    6. Script : ff_valuenotempty
  2. Un champ de type entrée cachée :
    1. Titre : PayPal Select (ou ce que vous désirez, il ne sera pas affiché)
    2. Nom : bfPaymentSelect (Note : Ce nom est important pour la suite, ne pas le modifier)
    3. Valeur : 0.00 (avec un point comme séparateur de décimale et non une virgule).
    4. Validation : Non
  3.  Un champ de type Bouton PayPal :
    1. Titre : Validez votre don
    2. Nom : PayPalButton
    3. Affaire : L'adresse de connexion à votre compte PayPal
    4. Jeton : Votre jeton d'indentification (si vous n'en avez pas encore, il faut le générer depuis votre compte PayPal)
      Connecté à votre compte PayPal, Roue crantée (paramètres)
      Menu gauche - vendeur - marchand (votre compte doit être de type PayPal Intégral*)
      Paramètres site web - Transfert des données de paiement - activer
      Réception d'un "Jeton d'identité"
      * Mon PayPal étant en allemand, je ne suis pas 100% certain des termes utilisé sur PayPal France
    5. Nom de l'élément : Donation
    6. Numéro de l'article : Ce que vous désirez
    7. Montant : 0
    8. Taxe : 0
    9. Page de remerciement : URL de la page de remerciement (je n'ai pas testé si une url relative permet la redirection).
      Si vous désirez renvoyer vers la page de remerciement du formulaire, entrez :
      https://www.votreSite.com/index.php?option=com_breezingforms&ff_name=NomDuFormulaire&ff_page=2
    10. Cancel URL : Url de la page de redirection en cas d'abandon de la transaction.
    11. Lieu : Entrez le code du pays où vous vous trouvez. fr pour France
    12. Code de la devise : EUR pour Euros
    13. Notification par email sur le succès du paiement : Cochez pour recevoir une notification uniquement si la transaction a abouti.
    14. Rendez-vous ensuite dans les propriétés avancées du bouton PayPal
    15. Utiliser IPN : Si l'option est activée sur votre compte PayPal, vous pouvez cocher cette case.
    16. Cacher l'étiquette : Cochez si vous souhaitez masquer le label du bouton.
    17. Image :BreezingForms charge une image automatiquement, si vous désirez une autre image, rendez-vous sur votre compte PayPal et voyez ce dont vous disposez ou utilisez une image personnelle… PS : Si vous gardez l'image d'origine, veillez à changer le http en https afin d'éviter le "Mixed content" et perdre votre cadenas vert.
    18. Compte de test : Cocher si vous utilisez un compte de test (bac à sable).
    19. Test Affaire : Adresse associée au compte de test.
    20. Jeton de test : Saisissez le jeton fourni dans le compte de test.
    21. Fichier téléchargeable : Cochez si vous proposez un fichier au téléchargement suite à un don.
    22. Chemin du fichier : Indiquez le chemin absolu serveur vers le fichier (pas son url http)
      Dans la configuration de votre site Joomla, onglet Système, l'option "Dossier 'logs'" indique ce chemin, copier tout ce qui précède "administrator/logs", ajoutez-y alors le chemin relatif de votre fichier ex. : /home/serveur/repertoireSite/images/mon-fichier.pdf
    23. Essais de téléchargements : Le nombre de fois que le fichier pourra être téléchargé.
  4. Il reste à ajouter le code de validation à votre bouton PayPal.
    1. Activez l'option Personnalisé dans la zone Script Action
    2. Cochez la case Clic et cliquez le bouton Créer le code Framework afin d'obtenir un code comme celui-ci :
      function ff_PayPalButton_action(element, action)
      {
          switch (action) {
              case 'click':
                  break;
              default:;
          } // switch
      } // ff_PayPalButton_action
    3. Après la ligne case 'click':, tapez un retour chariot et entrez le code suivant :
      ff_getElementByName('bfPaymentSelect').value = 'Donation|0|' + ff_getElementByName('donationAmount').value + '|0';
           ff_validate_submit();
    4. pour obtenir un code comme celui-ci :
      function ff_PayPalButton_action(element, action) 
      { 
           switch (action)
           { 
                case 'click': 
                ff_getElementByName('bfPaymentSelect').value = 'Donation|0|' + ff_getElementByName('donationAmount').value + '|0'; 
                ff_validate_submit(); 
                break; 
                default:; 
           } // switch 
      } // ff_PayPalButton_action
    5. Il reste à enregistrer les propriétés de votre bouton et ne pas oublier d'enregistrer le formulaire lui-même.

Vous pouvez tester le don via PayPal ici-même et si ce tutoriel ou d'autres vous ont été utiles et vous ont apporté une aide précieuse, pourquoi pas aller jusqu'au bout et valider ce fameux formulaire (qui utilise une liste à choix ou un champ texte plutôt qu'un champ de texte seul) !

Tester le don PayPal par formulaire BreezingForms

Si vous craignez que vos visiteurs effectuant un don entrent un montant avec décimale en utilisant une virgule comme séparateur parce que PayPal retournerait une erreur, il faut ajouter une petite fonction de remplacement dans le code ci-dessus.
Englobez la partie 'Donation|0|' + ff_getElementByName('donationAmount').value + '|0' de parenthèses et ajoutez .replace(',' , '.') et veillez à bien laisser le point-virgule en bout de cette ligne de code.

Inspiré de: https://crosstec.org/en/support/online-documentation/breezingforms/12-examples-scripts/215-paypal-donation-form.html

Les commentaires sont réservés aux membres enregistrés. Si vous êtes membre, veuillez vous connecter sinon, n'hésitez pas à vous enregistrer !