Développement rapide du commerce électronique avec Dreamweaver UltraDev et PayPal


Par Joel Martinez et Ray West (www.basic-ultradev.com)

Cet article explique comment intégrer UltraDev à PayPal avec un jeu de comportements serveur gratuits afin de répondre à trois scénarios classiques de vente en ligne. Ces comportements serveur, appelés PayPal Extension Suite, sont disponibles auprès de Mike Ahern sur Shore Computers (http://www.shorecomp.com/ultradev/paypal/default.asp). Cette suite est gratuite mais nous vous encourageons à verser une petite contribution financière via PayPal si vous l'utilisez.

L'utilisation du Panier PayPal même sans l'aide de cette suite de comportements serveur ne requiert qu'une connaissance du langage HTML. En utilisant la fonction copier-coller, vous pourrez aisément tirer profit de cette fonctionnalité sans l'aide de cette extension. Cette suite, qui s'intègre très facilement à UltraDev, facilite toutefois la compréhension de l'interface utilisateur. Les trois exemples suivants vous apprendront à utiliser le système PayPal pour trois grands types de transactions :
  • l'achat d'un seul objet, qui vous permet de vendre un objet aux enchères ;
  • le panier standard, qui vous permet de définir plusieurs objets pouvant être achetés dans une même transaction PayPal ;
  • le panier géré par base de données, qui vous permet de définir un système d'inventaire pouvant être géré et livré de façon dynamique sur vos pages à partir d'une base de données.

Création d'un site de commerce électronique avec PayPal


La création d'un site de commerce électronique avec PayPal est très probablement la solution la plus simple à implémenter. La rapidité de développement peut être un argument particulièrement intéressant sur le plan budgétaire. Certains compromis sont toujours possibles. Dans la mesure où toutes les animations du panier sont prises en charge dans une fenêtre contextuelle, la personnalisation possible se limite à l'ajout de votre logo au panier. Ceci dit, comme la plupart des sites ne requièrent pas une interface utilisateur totalement personnalisée, il peut être particulièrement intéressant d'utiliser ce système. Les interfaces classiques proposées par PayPal peuvent même aider à asseoir la confiance des clients.

S'agissant d'une suite d'extensions, il existe différents comportements serveur, chacun ayant une fonctionnalité propre. Certains éléments leur sont toutefois communs.
  • Adresse email PayPal : chaque comportement serveur requiert la saisie de l'adresse email utilisée pour votre compte PayPal. Si vous envisagez d'utiliser votre compte à des fins professionnelles, vous devez choisir le compte Business.
  • Champs statiques/dynamiques : presque tous les comportements serveur utilisent des champs qui vous permettent, dans UltraDev, de choisir des objets dans la fenêtre des associations de données ou des valeurs statiques. Il est important de placer les valeurs statiques entre guillemets (par exemple, "5.00")
  • Argent : tous les champs monétaires doivent être au format suivant : "xx,xx". Si vous affectez une valeur de la palette des associations de données à l'un de ces champs, vérifiez qu'ils respectent ce format. Vous pouvez utiliser la fonctionnalité intégrée UltraDev pour affecter un modèle de formatage à cette valeur.

Figure 1 : palette d'associations de données affectant un formatage monétaire.
  • Champs URL : certains des comportements serveur vous demandent l'URL d'un logo ou l'emplacement vers lequel envoyer l'utilisateur après traitement d'une transaction. Toutes les informations doivent être des URL absolues, c'est-à-dire qu'elles doivent inclure http://www.votredomaine.com.
Les comportements serveur

Les comportements serveur suivants, disponibles dans la suite, vous permettent d'interagir avec PayPal.
  1. Le comportement Achat unique
    Lorsqu'il est appliqué à une image ou à du texte, ce comportement serveur affiche directement l'écran de paiement PayPal. Vous pouvez ainsi créer des liens du type Achetez maintenant. Ce comportement est très pratique pour les sites ne proposant qu'un seul produit ou service.
  2. Le comportement serveur Depuis votre panier
    Si vous optez pour une autre solution de panier comme UltraCart II, vous pouvez continuer à utiliser les services proposés par PayPal pour accepter le paiement de vos produits. Les seules informations à fournir (parallèlement à votre identification PayPal et plusieurs URL) sont le numéro de commande et le montant total de la vente. Ces informations sont facilement collectées et transmises à l'interface utilisateur.
  3. Le comportement Ajouter un objet au panier
    Il s'agit probablement du comportement le plus souple. Le comportement Ajouter un objet au panier s'intègre très facilement à un écran d'objets géré par une base de données, permettant ainsi aux clients de parcourir le site et d'ajouter des objets dans leur panier. Chaque fois qu'un client clique sur le lien généré, une fenêtre contextuelle s'affiche ; elle présente de façon esthétique les objets contenus dans le panier. Les utilisateurs peuvent ensuite passer à la zone de paiement où ils peuvent se connecter à leur compte PayPal, ou tout simplement fournir les informations de paiement.
  4. Le comportement Afficher le panier
    Lorsque ce comportement est couplé au comportement Ajouter un objet au panier, une fenêtre détaillant le contenu du panier s'affiche dès que le client clique sur un lien généré par le comportement serveur Afficher le panier. La seule information nécessaire est votre adresse email PayPal.
  5. Le comportement Don
    Le lien généré par ce comportement serveur affiche l'écran à partir duquel l'utilisateur peut envoyer de l'argent depuis son compte PayPal. Une telle approche peut se révéler particulièrement intéressante pour les personnes qui vendent des applications à contribution volontaire ou pour les organismes à but non lucratif. Elle leur donne en effet la possibilité d'accepter de l'argent depuis votre site sans être lié par un achat donné.
  6. Le comportement Abonnement
    Les sites qui proposent un accès sur la base d'un abonnement pourront bénéficier de ce service unique proposé par PayPal. Les utilisateurs qui contractent un service d'abonnement recevront une facture mensuelle de PayPal. L'argent va directement sur votre compte PayPal. Un email répertoriant tous les paiements et indiquant la poursuite de l'abonnement vous est envoyé. Le lien généré par ce comportement serveur affiche une fenêtre dans laquelle l'utilisateur est invité à saisir les informations de facturation.

Applications pratiques de la suite PayPal


Actuellement, il existe deux scénarios classiques couvrant la majorité des scénarios de commerce électronique sur le Web. L'achat unique s'apparente au modèle des enchères dans le sens où un vendeur offre un objet uniquement. Lorsque cet objet est vendu, il ne figure plus sur le site. Le modèle du panier implique la vente de plusieurs objets, en un ou plusieurs exemplaires. Vous trouverez ci-après trois exemples utilisant le service PayPal pour proposer à la vente un seul objet, un panier utilisant le Panier PayPal et un panier utilisant le panier d'un tiers en interaction avec PayPal.

Nous avons créé un site de démonstration : http://www.codecube.net/teksales/. Les exemples présentés dans cet article peuvent être retrouvés sur ce site.


Figure 2 : site de démonstration de teksales


"J'en voudrais un, s'il vous plaît."- La vente d'objets à l'unité


Le comportement serveur achat unique est utilisé lorsque vous avez un objet à vendre. Les utilisateurs eBay se servent depuis longtemps de cette fonctionnalité pour le paiement de leurs enchères sur eBay. Si vous vendez plusieurs objets sur votre site, d'autres comportements serveur sont plus appropriés. Toutefois, pour la vente unique d'un objet d'occasion ou de collection, le comportement serveur Achat unique constitue une option rapide et simple à utiliser.

Imaginez que vous possédez la plus belle moto de la région, une Ducati Monster S4Fogarty. Un jour, alors que vous vous promenez, une voiture vous coupe soudainement la route. Votre vie repasse à toute vitesse dans votre tête : vous avez frôlé la mort. La peur vous gagne et il vous est désormais impossible de conduire votre moto sans avoir des sueurs froides. Vous décidez donc de la vendre sur votre site. Après quelques manipulations dans Ultradev, vous placez cet objet sur votre site.


Figure 3 : site de vente Ducati...comportement serveur

Vous imaginez que les gens vont se presser devant la boîte aux lettres pour vous envoyer le règlement de cette superbe invention, mais personne ne vient. Plusieurs raisons peuvent en être la cause. Le prix peut être supérieur au montant autorisé pour un paiement par chèque.

Utilisation du comportement serveur Achat unique

L’utilisation du comportement serveur Achat unique est très simple. Une fois votre page conçue, il vous suffit de choisir sur la page l'objet qui servira de bouton Acheter. Il peut s'agir d'une image Achetez-moi ou d'un texte véhiculant un message similaire. Sélectionnez l'objet, puis appliquez le comportement serveur comme n'importe quel autre. Le comportement serveur Achat unique figure dans la palette des comportements serveur sous PayPal > Achat unique PayPal.



Figure 4 : pp_SinglePurchase

Renseignez les champs de l'interface du comportement serveur. Vous avez terminé ! Lorsqu'un utilisateur clique sur le lien généré par le comportement, une fenêtre contenant les informations relatives à la collecte des paiements s'affiche ; l'utilisateur est alors invité à suivre la procédure de paiement. Vous recevrez une confirmation de la réalisation de la vente par PayPal. Il ne vous restera plus qu'à attendre le facteur pour obtenir votre paiement.


"Je vais prendre deux de chaque" - Le panier standard


La vente d'objets à l'unité constitue la majorité des transactions Internet, et notamment des fameuses enchères en ligne. Ceux qui cherchent à donner un caractère professionnel à leur site doivent toutefois faire face à différents problèmes. Ils proposent souvent une grande variété de produits et espèrent que leurs clients achèteront régulièrement plusieurs des objets proposés.

Mais revenons à vous, cher vendeur de moto en herbe. La vente de la Ducati que vous avez effectuée vous a permis d'identifier la demande existante pour les produits en rapport avec la moto. Vous avez donc décidé de créer une activité commerciale pour proposer certains de ces produits. Grâce à la solution de paiement en ligne PayPal, votre activité connaît un essor impressionnant. Bien que la revente de motos par le biais de votre site vous permette de dégager un chiffre d'affaires important, vous décidez de vendre des produits en rapport avec votre activité initiale, comme des casques et des lunettes. Ce concept est suffisamment simple mais vous ne pouvez pas continuer à utiliser la même solution. En faisant vos courses, comme toutes les semaines, vous prenez conscience de ce que vous faites lorsque vous prenez un bidon de dégraissant et que vous le placez dans votre caddie à côté du lait et des œufs. Vous avez besoin d'un panier sur votre site.

Un panier en ligne permet en effet aux visiteurs d'acheter plusieurs objets au cours d'une même transaction. Au fur et à mesure que les clients parcourent le site pour voir et choisir les objets qui les intéressent, le panier "mémorise" les objets sélectionnés, par le biais de cookies, de variables de session et d'une base de données. Lorsque les clients décident de valider leur sélection et de payer, il leur suffit de saisir les informations de paiement une seule fois ; la commande est passée pour tous les objets sélectionnés.

Utilisation du Panier PayPal

L’utilisation du comportement serveur Panier est très proche du comportement Achat unique. Il existe toutefois plusieurs différences notables dans la mesure où ce comportement doit être utilisé avec un panier. Tout d'abord, il existe une option qui permet au client de sélectionner un objet dans la quantité de son choix, comme deux paires de gants ou trois pantalons en cuir. Ensuite, lorsque le client clique sur le bouton Acheter, l'objet est ajouté à un panier ; le client peut poursuivre sa sélection sans avoir à saisir immédiatement son numéro de carte de crédit.

Pour appliquer le comportement à un objet, sélectionnez simplement ce dernier ou du texte sur votre page, puis choisissez le comportement serveur Ajouter au panier dans la palette des comportements serveur accessible via PayPal > Ajouter un objet au Panier PayPal. Répétez cette opération pour chacun des objets de votre site.



Le lien créé affiche une nouvelle fenêtre dans le système de Panier PayPal et y répertorie chacun des objets ajoutés. Si vous cliquez deux fois sur le même objet, la quantité augmente d'une unité. Dans ce cas, il s'agit de la méthode la plus adaptée car les acheteurs veulent limiter au maximum les manipulations pour pouvoir obtenir leurs produits. Aussi, si vous leur économisez ne serait-ce que quelques clics de souris, ils seront contents. Or, un client content est un client qui achète.

Utilisation de PayPal avec un panier géré par base de données


Les exemples précédents constituent de bons exercices car vous vous trouverez très probablement dans des situations approchantes pour lesquelles seules des fonctions très simples de PayPal sont nécessaires. La puissance de cette suite d'extensions se manifeste toutefois réellement lorsque cette dernière est couplée à une solution d'inventaire gérée par base de données. L'utilisation d'une base de données pour gérer vos produits implique une phase de développement plus longue mais à la pratique, les avantages sont indéniables et s'accompagnent d'une facilité de gestion et de maintenance. Si votre site est correctement construit, il fonctionne en grande partie sans votre intervention.

Structure de table

Pendant la construction de ce type de site, la phase la plus longue est celle de la création de la base de données. Sa connexion au système de Panier PayPal est en effet très simple. Pour notre présentation, nous utiliserons une structure de données classique : parent/enfant - principale/secondaire. Il s'agit de la présentation qui est utilisée dans 99% des bases de données qui se trouvent sur le Web. En cas de problème avec tout ce qui a trait aux bases de données dans ce projet, veuillez vous reporter aux nombreuses sources d'informations consacrées à ce sujet et disponibles sur le Web.

Chacune des lignes de la table parent peut être associée à un nombre illimité de lignes, ou à aucune, dans la table enfant. Dans le cadre d'un site de commerce électronique, nous aurons donc une table principale, à savoir la table des catégories et une table enfant, à savoir la table des produits. Vous trouverez ci-après un exemple des données susceptibles d'être contenues dans une base de données :

Catégorie Télévision
- Sony 20"
- RCA 19"
- Magnavox 32"

Catégorie Magnétoscope
- Panasonic Deux têtes
- Samsung Quatre têtes

Commencez par définir la table des catégories avec les champs suivants :
  • IDcat - Numérotation automatique
  • catName - Texte
Comme vous pouvez le constater, une table principale ne requiert que peu d'informations dans la mesure où elle sert uniquement à classer les nombreuses lignes de la table enfant. Certaines des autres informations susceptibles d'être contenues dans cette table sont :
  • une description étendue ;
  • l'image d'une catégorie ;
  • un champ Actif qui indique si la catégorie est active.
Cette table peut être utilisée sur une page répertoriant toutes les catégories d'objets disponibles sur votre site. Le client peut ensuite sélectionner une catégorie pour consulter le détail des produits qu'elle contient.

L'autre table nécessaire est la table des produits. Comme celle-ci contient les informations relatives à chacun des produits, vous devez prévoir un champ pour chacun des objets correspondants dans le comportement serveur Ajouter au panier.
  • IDobjet - Numérotation automatique
  • IDcat – nombre
  • nomObjet - texte
  • montant - devise
  • expédition et livraison - devise
  • gestion - devise
Si vous envisagez de ne pas utiliser certains de ces champs (vous n'appliquez aucun frais d'expédition, par exemple), saisissez des zéros dans ces champs.

Tout comme pour la table des catégories, nous utiliserons le minimum de champs pour des raisons de simplicité. Vous pouvez ajouter les autres champs suivants :
  • Date de l'ajout
  • Actif
  • Vues des pages

Figure 6 : tekDB_relationship
Représentation graphique de la relation existant entre les deux tables

Une fois la structure de la base de données créée, entrez des données de test dans les tables. Vous les remplacerez par la suite par des données de production. Créez tout d'abord plusieurs catégories.



Figure 7 : tekDB_catTableContents

Gardez bien à l'esprit qu'une catégorie est simplement un conteneur logique regroupant les produits enfants. Pour créer une relation entre la table des catégories et un produit en particulier, placez le numéro de la catégorie parent ("IDcat") dans le champ numérique "IDcat" de la table des produits. Sachez qu'il est possible de créer une structure de table plus complexe pour gérer les produits qui peuvent appartenir à plusieurs catégories. Nous en resterons toutefois là pour l'instant.


Figure 8 : tekDB_ProductTableContents


Affichage des données

Après avoir alimenté la base de données, vous devez placer les données sur une page. Seules deux pages sont nécessaires pour cette démonstration : une page principale qui affiche toutes les catégories que l'utilisateur peut choisir, et une page secondaire qui répertorie tous les objets de la catégorie choisie.

Créez tout d'abord un tableau HTML pour l'interface utilisateur. Un tableau à double entrée est parfait. La première ligne correspondra à un simple en-tête décrivant le contenu de la colonne située en dessous. La seconde ligne affichera le résultat du jeu d'enregistrements. Créez un jeu d'enregistrements correspondant au nom et à l'identifiant de la catégorie dans le tableau.

Faites glisser le nom de la catégorie de la palette de sources de données vers la seconde ligne de la première colonne. La seconde colonne contient un lien de visualisation.

Pour créer ce lien, mettez le texte en surbrillance, puis, à l'aide de la palette d'affichage des propriétés, accédez à la page sur laquelle les produits s'afficheront. Cliquez sur l'icône du dossier. La liste des pages existantes de votre site s'affiche alors. Sélectionnez la page des produits, puis cliquez sur le bouton Paramètres en bas de la boîte de dialogue. Dans la fenêtre de paramétrage qui s'affiche, vous pouvez créer un paramètre d'URL appelé IDcat (qui servira au filtrage dans le jeu d'enregistrements des produits), puis lui affecter une valeur issue de la base de données en sélectionnant le champ IDcat à l'aide de l'icône en forme d'éclair. Désormais, lorsque vous cliquez sur le bouton de visualisation situé à côté de cette catégorie, l'ID correspondant est transmis au jeu d'enregistrements des produits dans la chaîne d'URL. Seuls les produits de cette catégorie s'affichent alors sur la page secondaire. Une fois cette opération terminée, vous pouvez ajouter le comportement serveur Répéter la région dans la deuxième ligne.

Maintenant que la page de catégorie fonctionne, vous devez créer la page secondaire. Si vous accédez à cette page, l'IDcat figure dans la chaîne de recherche puisque vous étiez auparavant sur la page principale. Commencez alors par créer un jeu d'enregistrements pour chaque champ du tableau, puis filtrez l'IDcat sur la base de la valeur contenue dans la chaîne de recherche à l'aide de la requête ("IDcat").


Figure 9 : tekDB_categoryRS

L'interface utilisateur de cette table peut avoir exactement la même présentation à une exception près : elle contient une colonne de prix. Faites glisser le nom de l'objet dans la première colonne, le prix dans la seconde, puis saisissez Ajouter au panier dans la troisième. Sélectionnez le texte Ajouter au panier, puis choisissez le comportement Ajouter au panier dans la palette des comportements serveur. La plupart des champs de l'interface utilisateur sont associés à un voyant clignotant. Ces derniers vous permettent de remplir les champs de votre base de données à l'aide du jeu d'enregistrements créé dans la fenêtre Sources de données. Choisissez un champ de la base de données pour chacun des objets correspondants dans le comportement serveur. Une fois cette opération terminée, vous pouvez ajouter un comportement serveur Répéter la région dans la deuxième ligne. Au moment de l'exécution, lorsque les produits sont renseignés sur la page à partir de la base de données, chaque instance Ajouter au panier est associée aux informations appropriées. Chaque fois qu'un utilisateur clique sur un objet pour l'acheter, le panier est mis à jour avec les informations que vous avez saisies. Vous pouvez désormais assurer la maintenance des objets au sein de la base de données sans avoir à modifier vos pages HTML.


Figure 10 : tekDB_Addtocart

Il n'y a plus qu'à attendre. Les clients peuvent désormais parcourir votre catalogue d'objets, choisir ceux qui les intéressent, puis les payer. La rapidité de développement est l'un des principaux atouts faisant de la suite PayPal un sérieux outil de commerce électronique. Les autres systèmes de panier impliquent un long développement sans répondre réellement au problème de collecte des paiements. Cette démonstration a été créée en une heure environ grâce à la puissance de Dreamweaver UltraDev et de la suite d'extensions PayPal.

Cet article est extrait du nouveau livre de Ray West, Tom Muck et Joel Martinez, UltraDev E-commerce Concepts: Next Steps (concepts du commerce électronique avec UltraDev : Aller plus loin). Pour plus d'informations sur UltraDev et le commerce électronique, visitez le site Basic UltraDev sur www.basic-ultradev.com. Vous y trouverez des informations sur nos ouvrages, didacticiels et extensions qui vous aideront à accroître très largement vos possibilités de développement.

LIMITATION DE RESPONSABILITE : le contenu ci-après provient de l'auteur de chaque article, et non de PayPal, Inc. ni de l'un de ses affiliés ou filiales. Les articles peuvent contenir des erreurs. PayPal ne peut être tenu responsable du contenu de ces articles et ne fournira aucune assistance. Le cas échéant, PayPal vous invite à contacter les auteurs des articles pour toute question ou information sur le support technique ou sur les garanties et/ou les licences. Si vous décidez de faire confiance au contenu de ces articles, vous engagez votre propre responsabilité. PayPal n'engage aucune responsabilité concernant les erreurs ou autres dommages pouvant résulter de l'application du contenu des articles, y compris des dommages accessoires, particuliers, indirects ou immatériels. PayPal SE DECHARGE EXPRESSEMENT DE TOUTE GARANTIE concernant ce contenu et l'utilisation qui en est faite.