HandyPay

Comment accepter les paiements sur un site Web : un guide complet

L'acceptation des paiements sur un site Web nécessite l'intégration d'un processeur de paiement qui gère en toute sécurité les transactions par carte. Ce guide couvre les approches techniques, les étapes de mise en oeuvre et les considérations pour ajouter des fonctionnalités de paiement à votre site Web.

Que vous construisiez un magasin de commerce électronique, acceptiez des dons ou recueilliez des paiements pour des services, la compréhension de vos options vous aide à choisir la bonne approche.

Aperçu des options de paiement du site Web

Les sites Web peuvent accepter les paiements par plusieurs méthodes :

Pages de paiement hébergées rediriger les clients vers la page sécurisée d'un fournisseur de paiement. Après paiement, les clients retournent sur votre site. Cela nécessite un travail technique minimal.

Formulaires de paiement intégrés afficher les champs de paiement directement sur votre site Web en utilisant la bibliothèque JavaScript du fournisseur. Les données de la carte sont traitées en toute sécurité sans toucher vos serveurs.

Intégration complète API donne un contrôle complet sur le flux de paiement. Votre serveur communique directement avec le paiement API pour créer et gérer des transactions.

Liens de paiement peut être intégré sur les sites Web sous forme de boutons ou inclus dans les courriels de confirmation. Les clients cliquez pour effectuer le paiement sur une page hébergée.

Chaque approche implique des compromis entre simplicité et contrôle.

Pages de paiement hébergées

Les pages de paiement hébergées sont la façon la plus simple d'accepter les paiements sur un site Web.

Comment ça marche :

  1. Le client clique sur un bouton de paiement sur votre site
  2. Le client est redirigé vers la page hébergée du fournisseur de paiement
  3. Le client entre les détails de la carte sur la page sécurisée hébergée
  4. Après paiement, le client est redirigé vers votre site
  5. Votre serveur reçoit un webhook confirmant le paiement

Avantages:

  • Développement minimal requis
  • Le fournisseur de paiement s'occupe de toutes les questions de conformité PCI
  • Fonctionne avec n'importe quelle plateforme de site Web
  • Optimisé par défaut par mobile

Inconvénients:

  • Client quitte votre site pendant la caisse
  • Personnalisation limitée de l'apparence de page de paiement
  • Peut augmenter l'abandon de chariot en raison de redirection

Étapes de mise en œuvre:

  1. Créer un compte avec un prestataire de paiement
  2. Configurez les paramètres de votre commande hébergée
  3. Ajouter un bouton de paiement ou un lien vers votre site Web
  4. Configurer redirection URLs pour le succès et l'annulation
  5. Mettre en œuvre la gestion du webhook pour confirmer les paiements

Formulaires de paiement intégrés

Les formulaires de paiement intégrés maintiennent les clients sur votre site Web tout en recueillant les détails de la carte en toute sécurité.

Comment ça marche :

  1. Votre page charge la bibliothèque JavaScript du fournisseur de paiement
  2. La bibliothèque rend les champs d'entrée sécurisés pour les détails de la carte
  3. Le client entre les informations de la carte dans les champs intégrés
  4. JavaScript jennalis les données de la carte avec le fournisseur de paiement
  5. Votre serveur utilise le jeton pour effectuer le paiement par API

Avantages:

  • Les clients restent sur votre site
  • Aspect personnalisable pour correspondre à votre marque
  • Meilleur taux de conversion que les redirections
  • Les données de la carte ne touchent jamais vos serveurs

Inconvénients:

  • Nécessite une intégration JavaScript
  • Plus de travaux de développement que de pages hébergées
  • Doit gérer divers états d'entrée et erreurs de carte

Exemple de mise en œuvre:

<!-- Include the payment provider's JavaScript -->
<script src="https://js.paymentprovider.com/v1/"></script>

<form id="payment-form">
  <div id="card-element">
    <!-- Payment fields render here -->
  </div>
  <button type="submit">Pay</button>
  <div id="error-message"></div>
</form>

<script>
  // Initialize the payment library
  const provider = PaymentProvider("your_public_key");
  const elements = provider.elements();
  const cardElement = elements.create("card");
  cardElement.mount("#card-element");

  // Handle form submission
  document
    .getElementById("payment-form")
    .addEventListener("submit", async (e) => {
      e.preventDefault();

      const { token, error } = await provider.createToken(cardElement);

      if (error) {
        document.getElementById("error-message").textContent = error.message;
      } else {
        // Send token to your server to complete payment
        await fetch("/api/charge", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token: token.id, amount: 5000 }),
        });
      }
    });
</script>

Intégration complète API

L'intégration complète API permet un contrôle maximal de l'expérience de paiement.

Comment ça marche :

  1. Votre serveur crée une intention de paiement via API
  2. Le API retourne un secret client pour la façade
  3. Votre frontend collecte les détails de la carte et confirme le paiement
  4. Votre serveur reçoit des notifications de paiement sur webhook
  5. Vous mettez à jour votre base de données et remplissez l'ordre

Avantages:

  • Contrôle complet du flux de paiement
  • Soutien à des scénarios complexes (abonnements, marchés)
  • Peut construire des expériences de caisse personnalisées
  • Accès complet aux fonctionnalités du prestataire de paiement

Inconvénients:

  • Nécessite un effort important de développement
  • Doit gérer les cas d'erreur et les conditions de bord
  • La maintenance continue à mesure que APIs évoluent

Exemple d'implémentation côté serveur :

// Create a payment intent on your server
app.post("/api/create-payment", async (req, res) => {
  const { amount, currency, description } = req.body;

  const response = await fetch("https://api.paymentprovider.com/v1/payments", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.SECRET_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      amount,
      currency,
      description,
    }),
  });

  const payment = await response.json();

  res.json({
    clientSecret: payment.clientSecret,
    paymentId: payment.id,
  });
});

// Handle webhook notifications
app.post("/api/webhooks", async (req, res) => {
  const signature = req.headers["x-payment-signature"];

  // Verify webhook signature
  const isValid = verifySignature(
    req.body,
    signature,
    process.env.WEBHOOK_SECRET,
  );

  if (!isValid) {
    return res.status(400).send("Invalid signature");
  }

  const event = req.body;

  if (event.type === "payment.succeeded") {
    // Update order status, send confirmation email, etc.
    await fulfillOrder(event.data.paymentId);
  }

  res.json({ received: true });
});

API Gestion des clés

L'intégration de API sécurisée nécessite une bonne gestion des clés.

Clés publiques (aussi appelé clés publiables) sont sûrs d'inclure dans le code côté client. Ils identifient votre compte mais ne peuvent pas effectuer des opérations sensibles.

Clés secrètes doit être conservé sur votre serveur et jamais exposé dans le code frontend. Ils authentifient les demandes qui créent des frais, délivrent des remboursements et accèdent à des données sensibles.

Meilleures pratiques:

  • Stocker les clés secrètes dans les variables d'environnement, pas dans le code
  • Utiliser différentes clés pour les environnements de test et de production
  • Rotation des touches périodiquement et après tout compromis suspect
  • Limiter les autorisations de clé à ce qui est nécessaire

Mise en œuvre des webhooks

Webhooks informe votre serveur des événements de paiement asynchrone.

Pourquoi les hooks sont importants:

  • Les paiements peuvent réussir après que le client quitte votre site
  • Les problèmes de réseau peuvent empêcher votre frontend de recevoir une confirmation
  • Webhooks fournit une notification fiable des résultats de paiement

Sécurité Webhook :

  • Vérifier les signatures du webhook pour confirmer l'authenticité
  • Utiliser HTTPS seulement les paramètres
  • Répondez rapidement (dans les 5 secondes) pour éviter les chronométrages
  • Mettre en œuvre l'idempotency pour traiter les livraisons en double

Événements communs de webhook:

  • payment.succeeded - Paiement effectué avec succès
  • payment.failed - La tentative de paiement a échoué
  • payment.refunded - Le paiement a été remboursé
  • dispute.created - Client contesté une charge

Considérations en matière de sécurité

L'intégration des paiements sur le site Web nécessite une attention particulière à la sécurité.

PCI DSS Conformité s'applique à toute donnée de carte de gestion d'entreprise. L'utilisation de pages de paiement hébergées ou de formulaires intégrés avec tokenization minimise votre fardeau de conformité.

HTTPS est nécessaire pour toute page recueillant des informations de paiement. Obtenez un certificat SSL et configurez votre serveur pour utiliser HTTPS.

Ne jamais enregistrer les numéros de carte ou les stocker dans votre base de données. Utilisez plutôt les jetons fournis par votre processeur de paiement.

Valider toutes les entrées sur le client et le serveur. Ne jamais faire confiance aux données de la façade sans vérification.

Mettre en oeuvre la protection CSRF sur les paramètres de paiement pour prévenir les attaques de contrefaçon de demandes inter-site.

Tester votre intégration

Testez soigneusement avant d'accepter les paiements réels.

Utiliser le mode test fourni par votre processeur de paiement. Tester API les clés traitent les transactions sans déplacer de l'argent réel.

Numéros des cartes d'essai Simuler différents scénarios:

  • Paiements réussis
  • Cartes déclassées
  • Insuffisance des fonds
  • Cartes périmées
  • Authentification 3D Secure

Cas de bord d'essai:

  • Défauts de réseau pendant le paiement
  • Client fermeture navigateur mi-paiement
  • Présentations de formulaires en double
  • Gestion des entrées non valide

Choisir un fournisseur de paiement

Considérez ces facteurs lors de la sélection d'un fournisseur :

Couverture géographique - Le fournisseur soutient-il vos marchés cibles?

Méthodes de paiement soutenues - Cartes, portefeuilles numériques, virements bancaires ?

Prix - Frais par transaction, frais mensuels, frais d'installation ?

Expérience du développeur - Qualité de la documentation, SDKs, et soutien?

Caractéristiques - Abonnements, facturation, soutien du marché ?

Les fournisseurs les plus populaires sont Stripe, PayPal, Square et les options régionales. HandyPay offre des liens de paiement et une intégration de l'API pour les entreprises des Caraïbes.

Considérations spécifiques à la plate-forme

Différentes plateformes web ont différentes approches d'intégration.

WordPress/WooCommerce - Utilisez des plugins de passerelle de paiement pour une configuration rapide

Shopify - Traitement intégré des paiements avec Shopify Paiements

Sites Web personnalisés - Intégration directe API en utilisant les approches ci-dessus

Sites statiques - Utiliser les pages de paiement hébergées ou les fonctions sans serveur pour les appels API

Questions fréquentes

Ai-je besoin d'un développeur pour accepter les paiements sur mon site Web?

Les pages de paiement hébergées nécessitent une compétence technique minimale. Les formulaires intégrés et l'intégration API nécessitent généralement une assistance du développeur.

Combien de temps faut-il pour organiser les paiements sur le site Web?

Les pages hébergées peuvent être opérationnelles en quelques heures. L'intégration complète API peut prendre des jours à des semaines selon la complexité.

Quels sont les frais pour accepter les paiements en ligne?

La plupart des fournisseurs facturent 2,5 % à 3,5 % plus des frais fixes par transaction. Des rabais sur le volume peuvent être offerts.

Mon site Web est-il conforme à PCI?

En utilisant des pages hébergées ou des formulaires intégrés avec tokenization gère la plupart des exigences PCI. Consultez la documentation de conformité de votre fournisseur de paiement.

Puis-je accepter des paiements sans entité commerciale?

Certains fournisseurs autorisent des comptes individuels. Les exigences varient selon le fournisseur et la juridiction.

Comment gérer les remboursements?

La plupart des paiements APIs comprennent les paramètres de remboursement. Les remboursements renvoient généralement les fonds au mode de paiement initial dans les 5 à 10 jours ouvrables.

Guides connexes

Liens de paiement vs passerelles de paiement
Comment accepter les paiements en Jamaïque
Comment accepter les paiements à Trinité
Comment accepter les paiements en Guyana