Boutons Paypal personnalisés

Changer le texte du bouton Paypal
Changer le texte du bouton Paypal

Les boutons Paypal permettent de rapidement offrir un produit à la vente sans la mise en place d’un système compliqué de boutique et de panier. Les ventes sont gérées sur le compte Paypal du commerçant, et les paiements sécurisés. Paypal offre à l’acheteur de payer soit sur son compte Paypal, ou si ce dernier n’a pas de compte, sur sa carte de crédit.

Les formulaires Paypal sont de la forme :

Le formulaire affiche l’image du bouton  . Pour un unique achat, on trouve ce bouton , ou bien sans le logo des cartes de crédits, pour un abonnement , pour un don .

Si l’on veut changer le texte du bouton, ou bien changer l’aspect du bouton, afin d’améliorer les détails grossiers du format GIF, en particulier le contour (surtout sur fond noir), on peut passer par une petite fonction PHP qui change l’image contenue dans le formulaire par un bouton HTML, que l’on aura tout loisir de styliser.

La fonction prend en argument le formulaire de paiement Paypal, et le texte du bouton, défini par défaut à "Ajouter au panier" . La fonction affiche directement le bouton. Elle s’appelle à l’endroit de l’insertion.

Il suffit de styliser le bouton. Ici, un exemple reprenant le design initial du bouton :

Les deux dernières instructions CSS permettent de changer l’aspect de la souris au survol du bouton et de masquer la bordure bleue lorsque le bouton est cliqué.

Le résultat sur un site utilisant de nombreux boutons Paypal :

Boutons Paypal personnalisé sans image
Boutons Paypal personnalisé avec le logo Paypal

Si l’on veut rajouter le logo Paypal d’une police d’icones devant le texte du bouton, on peut ajouter un pseudo élément CSS ::before :

J’ai créé une police d’icones sur le site Fontastic.me, le nom de la police est galaxies, \66 est le charCode du logo Paypal.

On ajoute un argument à la fonction PHP pour ajouter la classe logo au bouton si celui est vrai :

Et hop, grâce à cette fonction, on change rapidement l’image du formulaire de base par un bouton personnalisé sans image. On peut aussi, si l’on veut approfondir la personnalisation, entrer dans l’API de création de bouton Paypal.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *