Article original : How to Integrate PayPal into Your HTML, CSS, and JS Product Pages
Par Shane Duggan
Imaginez si vous aviez une page de destination de produit incroyable, avec des clients prêts à faire un achat. Mais votre traitement de paiement manuel en JavaScript avec des scripts côté serveur, Authorize.net ou 2Checkout vous a fait défaut.
Frustré de ne pas pouvoir effectuer l'achat, votre client part chez vos concurrents.
J'imagine que ce serait une sensation terrible. Surement, il existe une meilleure façon de faire cela avec des passerelles de paiement modernes et largement acceptées. À la fin de ce tutoriel, je m'assurerai que vous ne vous retrouverez pas dans cette situation.
En ce qui concerne l'acceptation des paiements en ligne, PayPal est l'une des options les plus largement utilisées et les plus fiables disponibles. Il existe de nombreuses nouvelles startups logicielles apparaissant chaque jour qui utilisent PayPal pour gérer leurs transactions et les paiements de leurs clients.
L'intégration de PayPal dans vos propres pages produits HTML/CSS/JS peut grandement améliorer l'expérience utilisateur et rationaliser le processus de paiement pour vos clients.
PayPal dispose également d'une excellente documentation pour les développeurs qui rend cette intégration encore plus conviviale.
Dans ce tutoriel, nous examinerons les étapes impliquées dans l'intégration de PayPal dans vos pages produits. Vous apprendrez comment configurer votre PayPal pour l'intégration et implémenter le code dans vos pages HTML/CSS/JS. Ensuite, nous verrons comment vous pouvez utiliser vos nouvelles connaissances à l'avenir.
Comment pouvez-vous utiliser ce tutoriel ?
Maintenant, laissez-moi utiliser un exemple pour vous donner une meilleure idée de la façon dont vous pouvez utiliser ce tutoriel. (Alerte histoire fictive)
Récemment, j'ai décidé de lancer une nouvelle startup en ligne. Après avoir délibéré à travers d'innombrables idées pour des startups logicielles, j'ai décidé de créer une librairie en ligne d'eBooks.
En tant que tout premier produit, j'ai publié un eBook qui couvrait 10 ans de mon expérience de vie en programmation. Excité, j'ai créé une page de destination de produit avec toutes mes connaissances en HTML, CSS et JavaScript.
Présentation de MyProgrammingBook, un guide de programmation glorieux de 0,99 $ qui contient tout ce que vous devez savoir, y compris comment faire en sorte que tous vos algorithmes de recherche atteignent O(1) (pas vraiment...). Voici à quoi cela ressemble :
J'ai créé cette page de destination de produit en une heure en utilisant un simple HTML et CSS vanilla. Voici les fichiers que j'ai utilisés :
index.html
<!DOCTYPE html>
<html>
<head>
<title>MyProgrammingBook</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="product-container">
<div class="product-image-container">
<img src="myprogrammingbook.jpg" alt="MyProgrammingBook">
</div>
<div class="product-info-container">
<h1>MyProgrammingBook</h1>
<p class="price">$0.99</p>
<p class="product-description">
Vous voulez que tout votre code s'exécute à la vitesse O(1) ? Alors laissez-moi vous présenter MyProgrammingBook ! Écrit par le principal expert mondial en optimisation algorithmique (moi), ce livre vous apprendra tout ce que vous devez savoir pour rendre votre code ultra-rapide. De plus, il est livré avec une licorne gratuite* pour vous aider à implémenter toutes les techniques que vous apprenez. Ne manquez pas cette opportunité unique !
</p>
<p>*Conditions générales applicables</p>
</div>
<form>
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<label for="address">Adresse :</label>
<input type="text" id="address" name="address" required>
<div class="card-info">
<label for="card-number">Numéro de carte :</label>
<input type="text" id="card-number" name="card-number" required>
</div>
<div class="card-info">
<label for="expiry-date">Date d'expiration :</label>
<input type="text" id="expiry-date" name="expiry-date" required>
<label for="cvv">CVV :</label>
<input type="text" id="cvv" name="cvv" required>
</div>
<input type="button" value="Acheter maintenant" onclick="submitForm()">
</form>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.product-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-wrap: wrap;
}
.product-image-container {
width: 30%;
}
.product-info-container {
width: 70%;
padding-left: 20px;
}
img {
width: 100%;
height: auto;
}
form {
display: flex;
flex-wrap: wrap;
}
label, input[type="text"] {
width: 100%;
padding: 12px;
margin-top: 8px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
label {
width: 30%;
padding-right: 10px;
}
input[type="text"] {
width: 70%;
}
input[type="button"] {
background-color: #ff5722;
color: #fff;
padding: 12px 24px;
border: none;
cursor: pointer;
margin-top: 20px;
width: 100%;
}
input[type="text"][name="card-number"], input[type="text"][name="expiry-date"], input[type="text"][name="cvv"] {
width: 30%;
}
h1 {
margin-top: 0;
}
.price {
color: #ff5722;
font-size: 1.5em;
font-weight: bold;
}
script.js
Avec mes connaissances obsolètes, j'accepte le paiement via un formulaire pour collecter leurs détails de paiement avant de les traiter manuellement avec un fournisseur de paiement. Un exemple de fichier JavaScript pourrait ressembler à ceci :
// Obtenir les références aux éléments du formulaire
const form = document.getElementById("payment-form");
const cardNumber = document.getElementById("card-number");
const expiryDate = document.getElementById("expiry-date");
const cvv = document.getElementById("cvv");
const submitButton = document.getElementById("submit-button");
// Gérer la soumission du formulaire
form.addEventListener("submit", (event) => {
event.preventDefault();
// Désactiver le bouton de soumission pour éviter les soumissions multiples
submitButton.disabled = true;
// Créer un objet pour contenir les données du formulaire
const formData = {
cardNumber: cardNumber.value,
expiryDate: expiryDate.value,
cvv: cvv.value,
};
// Effectuer une validation côté client sur les données du formulaire
if (!validateFormData(formData)) {
// Si les données sont invalides, réactiver le bouton de soumission et retourner
submitButton.disabled = false;
return;
}
// Envoyer les données du formulaire au serveur
// Ce qui suit est juste un exemple et ne doit pas être utilisé dans un scénario réel
// car il manque des mesures de sécurité et une intégration appropriée de la passerelle de paiement
fetch("/charge", {
method: "POST",
body: JSON.stringify(formData),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((data) => {
// Gérer la réponse du serveur
if (data.success) {
// Paiement réussi
alert("Paiement réussi !");
} else {
// Paiement échoué
alert("Paiement échoué. Veuillez réessayer.");
submitButton.disabled = false;
}
})
.catch((error) => {
console.error(error);
alert("Une erreur s'est produite. Veuillez réessayer.");
submitButton.disabled = false;
});
});
function validateFormData(data) {
// Exemple de vérifications de validation
if (!data.cardNumber || data.cardNumber.length !== 16) {
alert("Veuillez entrer un numéro de carte valide.");
return false;
}
if (!data.expiryDate || data.expiryDate.length !== 5) {
alert("Veuillez entrer une date d'expiration valide au format MM/AA.");
return false;
}
if (!data.cvv || data.cvv.length !== 3) {
alert("Veuillez entrer un CVV valide.");
return false;
}
return true;
}
Cependant, cette méthode ancienne de prise de paiement crée plusieurs problèmes :
- Sécurité : Sans mesures de sécurité appropriées, des informations sensibles telles que les numéros de carte de crédit et les informations personnelles peuvent être vulnérables au piratage et à la fraude.
- Conformité : Une entreprise peut faire face à des pénalités et à des problèmes juridiques sans conformité avec des réglementations telles que PCI-DSS.
- Évolutivité : Le traitement des paiements en utilisant uniquement HTML, CSS et JavaScript peut ne pas être en mesure de gérer un volume élevé de transactions, surtout pendant les périodes de pointe.
- Maintenance : La maintenance et la mise à jour d'un système de paiement personnalisé peuvent être chronophages et coûteuses.
- Fonctionnalités limitées : La collecte de paiements en utilisant uniquement HTML, CSS et JavaScript peut manquer de fonctionnalités telles que les paiements récurrents, les abonnements, les remboursements et la détection de fraude.
- Manque d'intégration avec d'autres outils : HTML, CSS et JavaScript vanilla n'ont pas d'intégrations intégrées avec d'autres outils comme les logiciels de comptabilité, les logiciels de gestion des stocks et les fournisseurs de livraison.
Une méthode beaucoup plus simple, sans parler plus fluide et fonctionnelle, serait donc d'abstraire toutes les gestions de paiement à un tiers. D'autant plus que les clients seront souvent plus familiers avec l'utilisation de ces passerelles de paiement tierces.
Même si vous ne vendez pas de produit, cela peut être idéal pour les sites web qui vendent une sorte de service freelance ou de consultation, une tendance que nous avons observée récemment. Permettre au client de finaliser l'achat avec une passerelle de paiement tierce familière directement depuis votre site web ajoutera grandement à l'expérience utilisateur de votre service.
C'est un gagnant-gagnant pour vous et le client. Vous programmez moins et ils reçoivent plus. Alors plongeons pour découvrir comment nous pouvons implémenter cela dans vos propres sites web.
Comment intégrer PayPal dans vos pages produits
Maintenant que nous savons ce que nous voulons accomplir, passons à l'action. J'ai décomposé le processus en 6 étapes faciles à suivre. Elles sont :
- Accédez aux outils de développement de PayPal pour obtenir vos API.
- Configurez un environnement sandbox PayPal.
- Créez et personnalisez votre bouton PayPal.
- Intégrez votre bouton dans vos fichiers actuels.
- Testez l'intégration en utilisant l'environnement sandbox PayPal.
- Passez en production et commencez à accepter des paiements réels.
Nous avons beaucoup à couvrir, alors plongeons directement et commençons !
Comment accéder aux outils de développement de PayPal pour obtenir vos API
La première étape pour intégrer PayPal dans vos pages produits HTML/CSS/JS est de créer un compte PayPal. Cette étape est cruciale car elle vous donnera accès aux outils de développement et aux API de PayPal, nécessaires pour intégrer PayPal dans vos pages produits.
Si vous en avez déjà un, passez directement aux outils de développement de PayPal.
Pour créer un compte PayPal, vous devrez visiter le site web de PayPal et suivre les instructions à l'écran pour vous inscrire. Vous serez invité à fournir certaines informations personnelles et financières, telles que votre nom, votre adresse e-mail et les détails de votre carte de crédit.
Une fois que vous avez terminé le processus d'inscription, vous pourrez vous connecter à votre compte PayPal et accéder aux outils de développement et aux API nécessaires pour l'intégration. Il est important d'utiliser une adresse e-mail valide car vous recevrez des informations importantes et des mises à jour de PayPal.
Ensuite, vous pouvez trouver les outils de développement en haut à droite de votre tableau de bord PayPal.
Comment configurer un environnement sandbox PayPal
L'étape suivante consiste à créer un environnement sandbox PayPal.
Qu'est-ce que c'est, pourriez-vous demander ?
Eh bien, un environnement sandbox est un environnement de test qui imite l'environnement PayPal en direct. Il vous permet de tester votre intégration avant de passer en production, ce qui est une excellente fonctionnalité de PayPal pour s'assurer que tout fonctionne comme prévu.
Pour configurer un environnement sandbox PayPal, vous devrez vous connecter à votre compte PayPal et naviguer vers le tableau de bord du développeur. À partir de là, vous pouvez créer un nouveau compte sandbox en suivant les instructions à l'écran.
Une fois le compte sandbox créé, vous pourrez l'utiliser pour tester votre intégration en effectuant des paiements de test. Vous pouvez utiliser le compte sandbox en parallèle avec votre compte en direct.
Il est important de tester votre intégration de manière approfondie et de vous assurer que tout fonctionne comme prévu avant de passer en production.
Comment créer et personnaliser votre bouton PayPal
Cette étape consiste à créer le bouton qui sera placé sur votre page produit, permettant aux clients d'initier le processus de paiement.
Une façon de créer un bouton PayPal est d'utiliser l'outil de création de boutons PayPal, qui fournit une interface conviviale pour personnaliser votre bouton. Vous pouvez choisir parmi 3 styles de paiement différents, disponibles sur le site web de PayPal.
Accédez à outils commerciaux > Boutons PayPal > Commencer > Boutons intelligents. Cela vous amènera à l'interface de personnalisation des boutons. Ajustez les styles à votre convenance, puis cliquez simplement sur « Copier le code ».
Voici un exemple de code pour un bouton intelligent PayPal. Ensuite, nous devons mettre à jour nos fichiers précédents pour supprimer le formulaire d'entrée et insérer le code suivant à la place. Nous aborderons cela dans l'étape suivante. Avant cela, voici le snippet de ce que vous obtenez de Boutons intelligents de PayPal :
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo¤cy=USD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"amount":{"currency_code": "USD", "value": 0.99}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Détails complets disponibles
console.log('Résultat de la capture', orderData, JSON.stringify(orderData, null, 2));
// Afficher un message de succès dans cette page, par exemple :
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Merci pour votre paiement !</h3>';
// Ou aller à une autre URL : actions.redirect('thank_you.html');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
Notez que vous aurez des champs différents pour vos propres besoins, alors personnalisez votre propre bouton et référencez le code pour celui-ci, et non celui de mon tutoriel.
Il existe également différents styles de boutons parmi lesquels choisir, alors n'hésitez pas à explorer pour trouver quelque chose qui correspond à votre style.
Maintenant que nous sommes prêts, intégrons ce code dans nos fichiers actuels.
Comment intégrer votre bouton dans vos fichiers actuels
Avec notre code de bouton tout frais sorti de la boîte, intégrons cela dans nos fichiers actuels. Très simplement, nous devons remplacer les champs HTML que nous n'allons pas utiliser, à savoir le formulaire, et le remplacer par le bouton que nous avons créé.
Pour rester cohérent avec le style de programmation que nous avons utilisé pour l'exemple, je vais abstraire le JavaScript dans le fichier script.js. Cela devrait nous donner les fichiers suivants :
index.html
<!DOCTYPE html>
<html>
<head>
<title>MyProgrammingBook</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="product-container">
<div class="product-image-container">
<img src="myprogrammingbook.jpg" alt="MyProgrammingBook">
</div>
<div class="product-info-container">
<h1>MyProgrammingBook</h1>
<p class="price">$0.99</p>
<p class="product-description">
Vous voulez que tout votre code s'exécute à la vitesse O(1) ? Alors laissez-moi vous présenter MyProgrammingBook ! Écrit par le principal expert mondial en optimisation algorithmique (moi), ce livre vous apprendra tout ce que vous devez savoir pour rendre votre code ultra-rapide. De plus, il est livré avec une licorne gratuite* pour vous aider à implémenter toutes les techniques que vous apprenez. Ne manquez pas cette opportunité unique !
</p>
<p>*Conditions générales applicables</p>
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo¤cy=USD" data-sdk-integration-source="button-factory"></script>
<script type="text/javascript" src="script.js"></script>
</div>
</div>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.product-container {
max-width: 600px;
height: 500px;
overflow: hidden;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-wrap: wrap;
}
.product-image-container {
width: 30%;
}
.product-info-container {
width: 70%;
padding-left: 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
img {
width: 100%;
height: auto;
}
.product-info-container form {
width: 100%;
margin-top: 20px;
align-self: flex-end;
}
h1 {
margin-top: 0;
}
.price {
color: #ff5722;
font-size: 1.5em;
font-weight: bold;
}
script.js
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"amount":{"currency_code":"USD","value":0.99}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Détails complets disponibles
console.log('Résultat de la capture', orderData, JSON.stringify(orderData, null, 2));
// Afficher un message de succès dans cette page, par exemple :
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Merci pour votre paiement !</h3>';
// Ou aller à une autre URL : actions.redirect('thank_you.html');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
Ces fichiers vont nous donner la page de destination de produit suivante :
Comment tester l'intégration en utilisant l'environnement sandbox PayPal
Avant de passer en production avec votre intégration PayPal sur votre page produit, il est important de tester l'intégration pour vous assurer qu'elle fonctionne correctement et pour identifier tout problème.
Une façon de faire cela est d'utiliser l'environnement sandbox PayPal dont nous avons parlé précédemment.
Pour utiliser le sandbox PayPal avec le compte que vous avez créé précédemment, vous recevrez un ensemble de comptes de test sandbox (acheteur et vendeur) que vous pouvez utiliser pour tester votre intégration.
Avec ces comptes sandbox configurés, vous devrez vous assurer que le code de votre bouton PayPal sur votre page produit pointe vers l'environnement sandbox.
Vous pouvez faire cela en vérifiant que l'URL dans le code du bouton PayPal vous redirige vers "https://www.sandbox.paypal.com" au lieu de "https://www.paypal.com".
Avec votre code de bouton PayPal fonctionnel, vous pouvez maintenant tester l'intégration en visitant votre page produit et en cliquant sur le bouton PayPal. Vous serez redirigé vers la page de paiement sandbox PayPal où vous pourrez entrer les informations d'identification de votre compte de test sandbox et simuler un achat.
Une fois que vous avez terminé une transaction de test, vous pouvez vous connecter à votre compte sandbox pour voir les détails de la transaction et confirmer qu'elle a été traitée correctement.
Comment passer en production et commencer à accepter des paiements réels
Après avoir testé avec succès votre intégration PayPal dans l'environnement sandbox, vous êtes maintenant prêt à passer en production et à commencer à accepter des paiements réels sur votre page produit.
Passer en production implique quelques étapes simples pour vous assurer que votre intégration est configurée correctement et prête à traiter des paiements réels.
La première étape consiste à mettre à jour votre code de bouton PayPal sur votre page produit pour qu'il pointe vers l'environnement PayPal en direct. Inversement à ce qui a été fait précédemment, assurez-vous que l'URL dans le code du bouton PayPal vous redirige vers "https://www.paypal.com" au lieu de "https://www.sandbox.paypal.com".
Ensuite, vous devrez mettre à jour les paramètres de votre compte PayPal pour vous assurer que votre compte est configuré pour traiter des paiements en direct. Cela implique généralement de confirmer votre adresse e-mail et votre numéro de téléphone, ainsi que d'ajouter une méthode de paiement valide telle qu'une carte bancaire.
Il est également important de vous assurer que votre page produit est entièrement fonctionnelle et que toutes les informations nécessaires telles que les détails du produit, les prix et les frais de livraison sont exacts.
Enfin, vous devriez informer vos clients que vous acceptez désormais les paiements via PayPal, et leur fournir des instructions claires sur la manière de finaliser un achat.
Avec toutes ces étapes terminées, vous pouvez maintenant commencer à accepter des paiements réels via PayPal sur votre page produit !
Où aller à partir de là ?
Maintenant que vous êtes à jour avec la mise en place des intégrations PayPal sur vos propres sites web, pourquoi cela serait-il utile pour vous ? N'existe-t-il pas des moyens plus faciles d'intégrer des paiements sur votre site web ? Laissez-moi vous donner un peu de contexte.
Personnellement, je pensais que les outils no-code devenaient la norme ces derniers temps, pensant que je n'aurais probablement plus besoin de coder des pages web en HTML, CSS et JavaScript vanilla bientôt. Mais avec la nouvelle vague de startups en ligne, telles que les outils d'IA et les logiciels d'analyse de données, tournant autour de la réalisation de requêtes API à partir d'une interface utilisateur simple, je pense que les trois grands langages pourraient faire un peu de retour.
Souhaitant en lancer une moi-même (donc l'histoire précédente n'était pas entièrement fictive...), je me suis retrouvé à revenir aux bonnes vieilles langues de développement web vanilla pour accomplir la tâche. Et elles l'ont fait plus rapidement que les outils no-code - comme ce simple compteur de longueur de phrase que j'ai programmé en moins d'une heure.
Je n'oublierais donc pas d'apprendre à intégrer des fonctionnalités, comme celle-ci, dans des pages HTML, CSS et JavaScript standard. Parfois, lorsque vous voulez créer une page de produit ou de service simple qui fait le travail, vous pourriez vouloir vous appuyer sur les anciennes méthodes avec de nouvelles intégrations comme solution.
Conclusion et récapitulation
Laissez-moi vous faire un rapide récapitulatif :
Si vous cherchez à lancer une entreprise SaaS simple, alors HTML, CSS et JavaScript vanilla pourraient être vos meilleurs amis. Lorsque vous intégrerez PayPal dans vos pages produits, il est important de vous rappeler quelques points clés pour garantir une intégration fluide et réussie.
- Tout d'abord, il est essentiel d'avoir un compte PayPal et de bien connaître la documentation pour les développeurs de PayPal.
- Deuxièmement, assurez-vous que vos fichiers HTML et CSS sont bien structurés et conçus pour correspondre à votre page produit.
- Enfin, utilisez l'environnement sandbox PayPal pour les tests afin de vous assurer que tout est impeccable avant de passer en production avec des paiements réels.
Pour rappel, il est important de garder à l'esprit que la collecte de paiements via un formulaire sur votre site web n'est pas une méthode sécurisée d'acceptation des paiements, et il est recommandé d'utiliser une passerelle de paiement telle que PayPal pour garantir la sécurité des informations sensibles de vos clients.
Avec ces points à l'esprit, vous pouvez maintenant configurer PayPal sur vos pages produits et commencer à accepter des paiements de manière sécurisée et facile. J'espère que vous avez apprécié ce tutoriel, et si c'est le cas, n'hésitez pas à me contacter. Je vous souhaite bonne chance pour vendre vos produits aux masses !