Notez que cet article a été écrit il y a plus de 3 ans, mais il n'est pas forcément obsolète.
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 :
|
1 2 3 4 5 6 |
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="FVAK8G8F2DHUQ"> <input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal, le réflexe sécurité pour payer en ligne"> <img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1"> </form> |
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.
|
1 2 3 4 5 6 |
// Replace paypal button function the_paypal_button( $form_paypal, $text = 'Ajouter au panier' ) { $pattern = '/<input type="image".+?submit.+?>/'; $replace = "<button type=\"submit\" class=\"paypal_button\">$text</button>"; echo preg_replace( $pattern, $replace, $form_paypal ); } |
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.
|
1 |
<?php the_paypal_button( $form_paypal, 'Un joli bouton Paypal' ); ?> |
Il suffit de styliser le bouton. Ici, un exemple reprenant le design initial du bouton :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.paypal_button { color: #204360; text-decoration: none; display: inline-block; font: italic bold 15px/22px helvetica,arial; padding: 0 7px 0 4px; background: #FEE1A5; background: -webkit-linear-gradient(top,#FFF 5%,#FEE1A5 50%,#FFB829 51%,#FEE1A5 95%,#FEE1A5 100%); background: linear-gradient(to bottom,#FFF 5%,#FEE1A5 50%,#FFB829 51%,#FEE1A5 95%,#FEE1A5 100%); border-radius: 12px; border-bottom: 1px solid #FFF; border-top: 1px solid #FFB829; border-left: 1px solid #FEE1A5; border-right: 1px solid #FEE1A5; text-shadow: 0px 1px 1px white; box-shadow: 0 1px 3px #777; } .paypal_button:hover { cursor: pointer; } .paypal_button:focus { outline: none; } |
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 :
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 :
|
1 2 3 4 5 6 |
.paypal_button.logo::before { font-family: galaxies; content: "\66"; margin-right: 3px; vertical-align: middle } |
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 :
|
1 2 3 4 5 6 7 |
// Replace paypal button function the_paypal_button( $form_paypal, $text = 'Ajouter au panier', $logo = false ) { $logo_class = $logo ? ' logo' : ''; $pattern = '/<input type="image".+?submit.+?>/'; $replace = "<button type=\"submit\" class=\"paypal_button{$logo_class}\">$text</button>"; echo preg_replace( $pattern, $replace, $form_paypal ); } |
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.
