Dans le passé, les sites web statiques présentaient généralement des images et des descriptions de produits, ce qui incitait les clients à passer commande par e-mail ou par téléphone. Aujourd’hui, cependant, les clients s’attendent à une expérience plus dynamique, avec de solides fonctionnalités de commerce électronique. Le processus d’achat s’en trouve simplifié, ce qui encourage les utilisateurs à effectuer des transactions sur votre site plutôt que d’explorer les options de la concurrence.

L’ajout d’une passerelle de paiement et d’une commande à votre site statique est assez simple. Les interfaces de programmation d’applications (API) et les architectures sans serveur vous permettent d’intégrer des fonctionnalités de commerce électronique dans les sites web statiques, ce qui permet à votre entreprise d’accepter directement les transactions.

Ce tutoriel explore l’ajout des passerelles de paiement PayPal et Stripe au site statique d’une boutique de livraison de fleurs. Suivez les étapes pour apprendre à ajouter ces fonctions à votre site web et ouvrir de nouvelles opportunités pour stimuler les ventes en ligne.

Premiers pas

Avant de plonger dans les étapes de l’intégration d’une passerelle de paiement et d’une commande à votre site statique, posons les bases d’une mise en œuvre réussie et sans heurts.

  1. Téléchargez et déployez cet exemple de code de site statique sur l’hébergement de site statique de Kinsta.
  2. Ouvrez un compte PayPal, en optant pour un compte professionnel, plus adapté à ce tutoriel. Ce type de compte est nécessaire pour tester les boutons que vous intégrez. Après vous être inscrit, ajoutez les informations relatives à votre entreprise et associez un compte bancaire. Après vérification de votre compte, vous pouvez obtenir des identifiants API à partir du portail PayPal Developer pour une utilisation ultérieure.
  3. Créez un compte Stripe en saisissant les informations relatives à votre entreprise et à votre compte bancaire. Stripe offre une activation rapide du compte, ce qui est avantageux pour ce projet. Une fois votre compte activé, vous pouvez immédiatement accéder au tableau de bord Stripe. C’est là que vous récupérez votre clé API, un élément crucial pour les étapes suivantes.

Examiner l’exemple de site statique

Ce tutoriel utilise un site statique pré-existant pour présenter l’intégration des fonctionnalités de paiement PayPal et Stripe. Malgré son contenu statique, l’exemple de site web imite une boutique de fleurs en ligne.

L’infrastructure d’hébergement de sites statiques de Kinsta fournit un environnement efficace pour déployer et tester les fonctionnalités de paiement PayPal et Stripe afin de créer un site statique plus sophistiqué et plus attrayant.

Après avoir déployé votre site sur Kinsta, rendez-vous sur la page d’accueil. Cliquez sur le bouton ORDER INQUIRY.

Exemple de page d'accueil de site avec un bouton ORDER INQUIRY.
Exemple de page d’accueil de site avec un bouton ORDER INQUIRY.

Sélectionnez un produit disponible sur la page Flowers Catalog – the turkish Rose.

Exemple de page de catalogue du site avec différentes options de fleurs.
Exemple de page de catalogue du site avec différentes options de fleurs.

Cette action vous amène à la page des détails du produit, où les boutons de paiement pour PayPal et Stripe sont implémentés.

Exemple de page produit.
Exemple de page produit.

Comment intégrer la commande PayPal dans votre site statique ?

L’ajout d’une commande PayPal offre à vos clients un moyen de paiement sûr et fiable et rationalise le processus de transaction, améliorant ainsi l’expérience de l’utilisateur. Cette intégration peut considérablement améliorer la fonctionnalité de votre site et la satisfaction de vos clients.

Voici comment intégrer la commande PayPal à votre site statique :

  1. Connectez-vous au tableau de bord des développeurs PayPal.
  2. Sur le tableau de bord, accédez à la section Apps & Credentials. Activez le mode Sandbox, puis cliquez sur Create App.
  3. Dans le formulaire, donnez un nom à votre application (par exemple, Kinsta Gateway Demo). Sélectionnez Merchant comme type et cliquez sur Create App.

    Formulaire de création d'application de PayPal.
    Formulaire de création d’application de PayPal.

  4. Copiez l’ID client de la section API credentials pour créer plus tard un bouton de commande PayPal.

    Informations d'identification de l'application PayPal.
    Informations d’identification de l’application PayPal.

  5. Faites défiler la page de l’application pour passer en revue les autres réglages. Les valeurs par défaut conviennent pour ce tutoriel. Cliquez sur Save Changes.

    Caractéristiques de l'application PayPal.
    Caractéristiques de l’application PayPal.

  6. Ensuite, intégrez la commande PayPal à votre site statique. Créez un bouton de commande à l’aide du SDK JavaScript pour les méthodes de paiement alternatives (APM) de PayPal. Il vous permet d’intégrer divers moyens de paiement dans un site statique sans avoir à configurer une application backend. Ajoutez le code JavaScript suivant au fichier product.html, juste avant la balise de fermeture </body>. Remplacez YOUR_CLIENT_ID par votre identifiant de client PayPal. Vous devrez peut-être également remplacer la devise USD par la devise acceptée par votre compte PayPal. 
    <!-- STRIPE BUTTON BEGIN -->
<script   
src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD"   
data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
	createOrder: function(data, actions) {
	// Set up the transaction
	return actions.order.create({
		purchase_units: [{
		amount: {
			value: '1.00'
		}
		}]
	});
	},
	onApprove: function(data, actions) {
	// Capture the funds from the transaction
	return actions.order.capture().then(function(details) {
		// Show a success message to the buyer
		alert('Transaction completed by ' + details.payer.name.given_name);
	});
	}
}).render('#paypal-button-container');
</script>
<!-- STRIPE BUTTON END -->

    La fonction paypal.Buttons définit deux fonctions :

    • createOrder – Configure les détails de la transaction, tels que le montant de l’achat (1,00 USD dans ce cas).
    • onApprove – Gère l’approbation de la transaction, la saisie des fonds et l’affichage d’un message de réussite à l’intention de l’acheteur. Dans le code ci-dessus, nous utilisons la fonction alert().

    Enfin, la fonction render spécifie que le bouton PayPal doit être rendu à l’intérieur de la page existante <div> avec l’ID paypal-button-container.

    Vous avez maintenant intégré PayPal dans votre site statique.

Comment intégrer la commande Stripe dans votre site statique

Stripe est une plateforme technologique largement utilisée qui offre des solutions de traitement des paiements pour les entreprises de toutes tailles. Voici comment ajouter la commande Stripe à votre site statique :

  1. Avant d’implémenter le bouton de paiement Stripe, vous pouvez gérer les produits et les prix via une API ou le tableau de bord Stripe. Pour utiliser le tableau de bord, ouvrez-le, sélectionnez le mode Test et cliquez sur Product catalog.

    Page du catalogue de produits Stripe.
    Page du catalogue de produits Stripe.

  2. Cliquez sur le bouton + Add product pour ouvrir le formulaire Add a product.

    Page d'ajout de produit de Stripe.
    Page d’ajout de produit de Stripe.

  3. Saisissez les détails de votre produit dans les champs suivants :
    • Nom : Rose turque
    • Description : Il s’agit d’une magnifique rose turque
    • Image : (Téléversez l’échantillon imagesturkishrose.png )
    • Moyen de paiement : Unique
    • Montant : $1.00
    • Devise : USD (ou la devise de votre choix)
  4. Cliquez sur Add product.
  5. Dans la liste de la page Product catalog, sélectionnez le produit Turkish Rose.

    Détails du catalogue de produits Stripe.
    Détails du catalogue de produits Stripe.

  6. Dans la section Pricing produits, cliquez sur Create payment link. Examinez les options du produit et assurez-vous que la quantité est 1.

    Détails du produit Stripe pour la Rose Turque.
    Détails du produit Stripe pour la Rose Turque.

  7. Cliquez sur Create link.

    Détails de paiement du produit Stripe.
    Détails de paiement du produit Stripe.

  8. Sur la page PAYEMENT LINK, cliquez sur le bouton Buy.

    Détails de la page LIEN DE PAIEMENT Stripe.
    Détails de la page LIEN DE PAIEMENT Stripe.

  9. Lorsque le panneau du bouton Buy s’affiche, vous pouvez voir le code généré pour le bouton de paiement. Choisissez la mise en page du bouton, activez la fonction Modifier le texte du bouton et saisissez « Acheter avec Stripe » dans le champ Change button text. Cliquez ensuite sur Save changes and copy code pour copier le code généré dans le presse-papiers de votre système d’exploitation.

    Formulaire Stripe pour créer un bouton d'achat.
    Formulaire Stripe pour créer un bouton d’achat.

  10. Collez le code copié dans le fichier product.html de l’exemple de code avant la balise de fermeture </body> (entre les commentaires STRIPE BUTTON BEGIN et STRIPE BUTTON END ), comme pour PayPal. 
    <!-- STRIPE BUTTON BEGIN -->
<script> async
  src="https://js.stripe.com/v3/buy-button.js">
</script>

<stripe-buy-button>
  buy-button-id="BUY_BUTTON_ID"
  publishable-key="PUBLISHABLE_KEY"
>
</stripe-buy-button>
<!-- STRIPE BUTTON END -->

Une fois que vous avez fini d’implémenter les boutons de paiement PayPal et Stripe, déployez le code du site statique dans votre environnement d’hébergement de site statique Kinsta.

Tester le processus de commande

Ouvrez la page de détails du produit du site statique de démonstration. Assurez-vous que les boutons PayPal et Stripe s’affichent correctement.

Exemple de page produit du site avec les boutons de paiement PayPal et Stripe.
Exemple de page produit du site avec les boutons de paiement PayPal et Stripe.

Cliquez sur le bouton de commande PayPal. Il devrait ouvrir une boîte de dialogue de connexion dans laquelle votre client s’authentifiera auprès de PayPal pour effectuer son achat.

Flux PayPal avec options de connexion ou d'enregistrement.
Flux PayPal avec options de connexion ou d’enregistrement.

Si vous rencontrez des problèmes de connexion à ce stade, cela peut être dû au fait que vous avez testé avec un compte personnel plutôt qu’avec un compte professionnel.

Les clients peuvent également choisir le bouton Carte de débit ou de crédit PayPal. Cliquez sur cette option pour afficher la boîte de dialogue. Saisissez les détails de votre compte.

Le flux PayPal vous propose d'utiliser une carte de débit ou de crédit.
Le flux PayPal vous propose d’utiliser une carte de débit ou de crédit.

PayPal devrait présenter les détails de votre commande et de votre compte. Cliquez sur Complete purchase.

PayPal affiche la confirmation de l'achat.
PayPal affiche la confirmation de l’achat.

Lorsque PayPal approuve la transaction, le code JavaScript du client affiche une alerte vous informant que la transaction est terminée. Cette alerte est destinée au développement et au débogage. Vous ne devez pas l’utiliser dans le code de production.

Flux PayPal avec une alerte de fin de transaction.
Flux PayPal avec une alerte de fin de transaction.

Pour vérifier cette transaction, ouvrez le tableau de bord PayPal pour les entreprises. Cliquez sur Activité > Toutes les transactions pour afficher une liste détaillée de toutes les transactions récentes.

Détails de la transaction commerciale PayPal.
Détails de la transaction commerciale PayPal.

Sur la page product.html du site de fleurs, vous pouvez également tester le flux de paiement Stripe en cliquant sur le bouton Acheter avec Stripe. Cette action déclenche la boîte de dialogue Stripe contenant les détails du produit et les options de paiement, y compris Google Pay, Link et les paiements par carte bancaire.

Options de paiement du flux Stripe.
Options de paiement du flux Stripe.

À des fins de démonstration, choisissez Google Pay. Une boîte de dialogue vous demande de confirmer l’achat en utilisant Google Pay avec une carte de votre liste, comme une carte Mastercard enregistrée.

Flux Stripe lors de l'utilisation de Google Pay.
Flux Stripe lors de l’utilisation de Google Pay.

Cliquez sur PAY. En cas de succès, Stripe présente au client la confirmation de l’achat.

Confirmation d'achat Stripe.
Confirmation d’achat Stripe.

Dans le tableau de bord Stripe, ouvrez l’onglet Paiements. Il affiche les détails de la transaction effectuée, y compris le montant, la devise, la description, le client et la date.

Page de détails de paiement de Stripe.
Page de détails de paiement de Stripe.

Comment résoudre les problèmes liés au processus de commande ?

Voici quelques étapes de dépannage pour diagnostiquer et résoudre les erreurs rencontrées lors de vos tests de commande :

  • Corrigez la configuration de la passerelle de paiement.
  • Validez votre certificat SSL.
  • Vérifiez la compatibilité du navigateur du client.
  • Gérez correctement les erreurs.
  • Testez le processus de paiement dans plusieurs environnements.
  • Utilisez des techniques de journalisation et de surveillance.

Résumé

Vous avez maintenant intégré des boutons de commande pour les passerelles de paiement PayPal et Stripe dans un exemple de boutique de fleurs en ligne hébergée avec Kinsta. Les mêmes techniques peuvent être utilisées pour ajouter des options de paiement à vos autres sites web statiques, afin d’encourager les clients à acheter vos produits et d’augmenter les ventes.

Le service d’hébergement de sites statiques de Kinsta offre un terrain de jeu transparent aux développeurs qui se lancent dans le domaine dynamique du commerce électronique et de l’intégration des paiements. Son infrastructure robuste garantit un chargement rapide des pages, ce qui favorise une expérience d’achat en ligne fluide.

Outre le service d’hébergement de sites statiques, Kinsta propose également un service d’hébergement d’applications conçu pour des applications plus dynamiques, comme les applications web qui nécessitent un traitement côté serveur, des interactions avec des bases de données et d’autres fonctionnalités complexes.

Transformez votre site statique en une expérience dynamique avec des passerelles de paiement comme PayPal et Stripe. Quel autre service préférez-vous ou connaissez-vous ? Partagez-le dans les commentaires ci-dessous.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).