Paypal : Ajout d’un lien au lieu d’un bouton

• Tweet

• Tweet

C’est en ajoutant récemment un bouton de paiement Paypal sur mon site magic que j’ai remarqué que l’assistant de création de boutons proposé par Paypal ne permettait finalement uniquement d’intégrer un bouton image sur son site et non pas un simple lien.

Pour ma part j’ai regretté cette alternative, j’ai donc dû la trouver moi-même, vous préférez un bouton image ? copiez-collez le code généré par Paypal, vous souhaitez un simple lien discret ? utilisez l’alternative javascript proposé ci-dessous.

Bouton image

Je vais prendre l’exemple du bouton de paiement « Dons » mais le code généré par l’assistant Paypal est très ressemblant pour l’ensemble de ses boutons, à savoir « Panier », « Acheter », « Dons », « Chèques-cadeaux » et « Abonnements ».

Voici le genre de code qu’il vous faudra copier-coller pour avoir un bouton image « Dons » sur votre site :

<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="AABBCCDDEEFFGG">
    <input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">
    <img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
</form>

Lien texte

Pour obtenir un lien « Dons », il existe deux façons, j’utilise personnellement la seconde car elle permet de masquer intégralement l’identifiant unique du bouton enregistré au niveau du compte.

• Sans Javascript

Cette façon est très simple et correspond finalement à ce que propose déjà Paypal au niveau de l’onglet « Email » une fois le bouton généré, je lui reproche simplement le fait que nous voyons l’identifiant privé du bouton qui apparaît en bas du navigateur lors du survol du lien avec la souris :

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=AABBCCDDEEFFGG" title="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">Dons</a>

• Avec Javascript

Cette façon est invisible et inodore, nous obtenons un lien qui ne fait apparaître nul part l’identifiant du bouton et renvoi exactement au même point qu’un bouton image dont le code a été présenté ci-dessus. En effet nous générons en javascript le formulaire de l’image bouton et le soumettons dans le même temps pour se rendre sur la page Paypal, de façon transparente pour l’utilisateur.

Voici un exemple en utilisant la bibliothèque jQuery :

<a id="donate">Dons</a>

$('#donate').bind('click', function() {
	var paypal_dons_form =
		"<form 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=\"AABBCCDDEEFFGG\">" +
			"<input type=\"image\" src=\"https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_donate_SM.gif\" border=\"0\" name=\"submit\" alt=\"PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !\">" +
			"<img alt=\"\" border=\"0\" src=\"https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif\" width=\"1\" height=\"1\">" +
		"</form>";
	// génère un formulaire virtuel à la volée pour soumettre puis le supprime
	$(paypal_dons_form).appendTo('body').submit().remove();
});

Voici ce que cela donne pour de vrai, visible au niveau du bas de page : lien de dons sur magicsupremacy

D'autres articles vous intéresseront :

2 façons d'insérer les boutons de partage des réseaux sociaux twitter, facebook et google+Implanter les boutons de suivi des réseaux sociauxjRSS : Création de flux RSS en JavaMagic the Gathering : Mon éditeur de texte enrichi personnalisé

Cet article a été écrit par :

Mimie – qui a déjà rédigé 130 posts sur Des Geeks et des lettres.

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

Contacter l'auteur