Je recherchais un moyen simple pour faire un formulaire de donation paypal sur une ligne.
N'ayant pas trouvé de solution souple, c'est naturellement que j'ai ajouté cette action à UP.
Selon vos besoins, elle trouvera sa place dans un module personnalisé ou dans un article pour une opération spécifique.
{up donation=compte_paypal}- donation: Votre adresse e-mail PayPal enregistrée ou votre identifiant PayPal
- template (item-template) = ##title## [span style="white-space:nowrap;padding:6px;display:inline-block"]##amount## ##currency##[/span] ##button##: modèle mise en page
définition du titre (##title##)
- title (titre): texte pour ##title##. bbcode accepté
- title-tag: balise pour le titre (##title##) span par défaut si title-style
- title-style: classes et styles pour le titre
définition du texte d'accompagnement (##text##)
- text: texte bbcode pour motclé ##text##
- text-tag: balise pour le titre (##text##) span par défaut si text-style
- text-style: classes et styles pour texte d'accompagnement
définition du bouton (##button##)
- button = lang[en=Donate;fr=Faire un don]: texte ou image Paypal pour ##button##
- button-style = b;t-grisFonce;background:#FFC439;border:#ECB300 1px outset;border-radius:50px;cursor:pointer: classes et styles pour bouton (##button##)
définition du montant et de la devise (##amount## & ##currency##)
- amount = 10: Montant du don. Inutile si ##amount##
- currency-code = EUR: Devise. Inutile si ##currency##
- currency-list = EUR,USD,GBP,CHF,AUD,HKD,CAD,JPY,NZD,SGD,SEK,DKK,PLN,NOK,HUF,CZK,ILS,MXN: liste des devises acceptées. 1ère par défaut
- amount-style: classes et styles pour montant (##amount##)
- currency-style: classes et styles pour choix devises (##currency##)
Données transmises et utilisées par le site de Paypal
- item-name = Donation: La raison de vos dons. Sera imprimé sur la confirmation PayPal
- image-url: URL du logo de de votre organisme affiché sur la confirmation d Paypal
- url-valid = http:: ', // Chemin complet vers la page de retour après un paiement correct
- url-cancel = http:: ', // Chemin complet vers la page de retour après un échec de paiement
- use-sandbox: pour tester la donation
style et options secondaires
- id: id pour bloc externe
- class = tc: classe(s) pour bloc externe
- style: style inline pour bloc externe
- css-head (base-css): style ajouté dans le HEAD de la page
La version simple
{up donation=Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. }Il suffit de ce shortcode pour avoir un formulaire de don opérationnel.
Vous devez me croire sur parole, l'installer sur votre site pour vérifier ou me faire un don pour tester 😀
Avec des options
Cette action, très souple, dispose de beaucoup d'options.
Ne paniquez pas devant ce gros shortcode, c'est juste une démonstration !
{up donation=moi[at]monsite.fr
| title=Merci pour votre soutien | title-tag=div | title-style=b fs120 t-bleuClair
| text=et vos [b]encouragements[/b][br][img src="/images/lomart.jpg" class=mv1] | text-tag=div
| button=lang[en=donation [img src="/images/paypal.png" style="max-height:24px"];fr=Faire un don avec [img src="/images/paypal.png" style="max-height:24px"]]
| button-style=b;t-grisFonce;background:#FFC439;border:#ECB300 1px outset;border-radius:50px;cursor:pointer;padding:2px 10px;mt1
| template=##title## ##text## [div class="p1 bg-jauneFonce"] ##amount## ##currency##[/div]##button##
| class=tc;display:inline-block;p2;bd-grisClair
| amount=5
| currency-list=EUR,USD,GBP,CAD
| item-name=Don pour UP (Universal Plugin)
| image-url=https://up.lomart.fr/images/template/up-logo-70x300.png
| url-valid=http://up-local-v2/index.php?option=com_content&view=article&id=211
}
| 1 | l'argument principal est l'adresse mail du compte bénéficiaire. L'adresse est inactivée dans le code affiché, mais vous devez mettre une adresse valide. Dans le shortcode actif, c'est mon adresse qui est indiquée pour pouvoir afficher l'écran Paypal. |
| les options pour définir le formulaire sur le site | |
| 2 | le titre (title) de mon formulaire que je place dans une balise DIV (title-tag). Je lui affecte un style gras, une font-size de 120% et une couleur bleue. Si vous précisez un style sans indiquer de tag, on utilisera une balise SPAN |
| 3 | le texte (text) au-dessous dans une balise DIV (text-tag) montre la possibilité d'utiliser du UP-BBCode. Si vous précisez un style sans indiquer de tag, on utilisera une balise SPAN |
| 4 | le texte du bouton (button). J'aurais pu faire simple, mais comme il s'agit d'une démo, j'en profite pour vous montrer un argument multi-langue. Il suffit de mettre le code langage (2 caractères), un signe égal et le contenu. Chaque langue est séparée par un point-virgule. Si la langue du visiteur ne figure pas dans les choix, c'est la première qui sera retournée. On peut débuter par lang[ et finir par ] mais ce n'est pas obligatoire. Notez qu'il a fallu répéter le bbcode de l'image dans les 2 langues. Il est possible d'indiquer uniquement le chemin complet vers une image sur le serveur ou chez paypal. (voir à la fin de la démo les images disponibles) |
| 5 | le style du bouton. N'ayez pas peur du mélange des classes et des styles, UP s'y retrouve très bien si les styles sont encadrés par des points-virgules. |
| 6 | le template va permettre de mettre en ordre toutes ces informations. Il est composé de mots clés (##title##, ##text##, ##amount##, ##currency##, ##button##) qui seront remplacés par les options de même nom/style et de UP-BBCode. Notez l'utilisation de classes pour la mise en forme. |
| 7 | class me permet de définir le style général du formulaire. Je pense que le mélange des classes et des styles ne vous effraie plus. |
| 8 | amount est le montant du don. Il est modifiable dans le formulaire sur le site. |
| 9 | currency-list est la liste des devises proposées dans la liste déroulante. Si la liste n'est pas affichée, il faut indiquer la devise par défaut avec l'option currency-code qui est EUR par défaut. |
| Les options utilisées par le formulaire sur le site de paypal | |
| 10 | item-name est le texte qui sera affiché comme raison du don sur la fenêtre du site Paypal et comme référence de paiement pour votre donateur. |
| 11 | image-url est le chemin complet vers le logo qui sera affiché en haut du formulaire de confirmation sur le site Paypal |
| 12 | url-valid est l'adresse complète vers la page de remerciement sur votre site. Il existe aussi une page en cas d'abandon : url-cancel |
C'est peut-être un peu long, mais remarquez que la mise en page se construit par tâtonnement, en contrôlant en frontend, sans jamais quitter l'édition de l'article
Sandbox
Il est possible de simuler un paiement. Il faut au préalable créer un compte receveur (Business) et un compte donateur (Personnal)
Plus d'informations sur cette page : https://developer.paypal.com/developer/accounts
Pour l'utiliser avec cette action, il suffit d'ajouter l'option use-sandbox dans votre shortcode et d'indiquer le compte Business de test. En version minimale, cela donnerait un shortcode comme ceci
{up donation=Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser. | use-sandbox}Cette possibilité est vraiment faite pour le développeur qui joue alternativement les 2 rôles. C'est pour cette raison que je n'ai pas pu l'utiliser dans cette démonstration.
Ressources
Paypal met à disposition des images pour le bouton dans différentes langues.
btn_donateCC_LG.gif
btn_donate_LG.gif
btn_donate_SM.gif
x-click-but11.gif
x-click-but21.gif
x-click-butcc-donate.gif
x-click-but04.gif
Pour les utiliser, il suffit de mettre le nom de l'image comme argument de l'option button
{up donation=moi[at]monsite.fr
| button=btn_donateCC_LG.gif
| template=##amount## ##currency##[br]##button##
| button-style=margin-top:10px
| class=tc bd-gris p1}L'action UP va automatiquement charger l'image dans la bonne langue sur le site Paypal
box (1) upactionslist (1) flexauto (2) donation (3) icon (1) flexbox (2) csv2table (1) tooltip (1) jcontent-info (1)