Moyasar offre un moyen fluide d'intégrer les paiements par carte de crédit dans votre application web. Suivez ces étapes pour configurer et commencer à accepter des paiements.

Qu'est-ce qu'une passerelle de paiement ?

Une passerelle de paiement est un service qui autorise et traite les paiements par carte de crédit pour les entreprises en ligne et hors ligne. Elle agit comme intermédiaire entre le site web du marchand et les institutions financières impliquées dans la transaction. Les passerelles de paiement garantissent que les informations sensibles, comme les détails de la carte de crédit, sont transmises de manière sécurisée du client à la banque acquéreuse.

Comment fonctionnent les passerelles de paiement ?

Les passerelles de paiement fonctionnent en cryptant et transmettant de manière sécurisée les détails de la transaction du navigateur du client vers le serveur web du marchand, puis vers le processeur de paiement. Voici un processus étape par étape :

Le client initie le paiement :
- Le client entre ses informations de paiement sur le site web du marchand.
Cryptage :
- La passerelle de paiement crypte les détails de la transaction.
Approbation de la transaction :
- La passerelle de paiement envoie les données cryptées au processeur de paiement ou à la banque acquéreuse.
- La banque vérifie les détails de la transaction et approuve ou refuse la transaction.
Confirmation de la transaction :
- La passerelle de paiement renvoie le message d'approbation ou de refus au site web du marchand.
- Le marchand informe le client du statut de la transaction.

Quand ai-je besoin d'une passerelle de paiement ?

Vous avez besoin d'une passerelle de paiement si vous prévoyez d'accepter les paiements par carte de crédit sur votre site web ou application mobile. Elle est essentielle pour garantir des transactions sécurisées et offrir une expérience de paiement fluide à vos clients.

Passerelles de paiement les plus fiables en Arabie Saoudite

Moyasar : Connue pour son intégration facile et ses fonctionnalités de sécurité robustes.
Payfort : Une passerelle de paiement fiable et sécurisée largement utilisée au Moyen-Orient.
HyperPay : Offre des options de paiement étendues et des mesures de sécurité solides.
Tap Payments : Fournit une expérience de paiement fluide avec plusieurs méthodes de paiement.

Intégration étape par étape du paiement web Moyasar avec les cartes de crédit

Étape 1 : Configurer votre compte Moyasar

Inscription/Connexion :
- Visitez Moyasar et inscrivez-vous ou connectez-vous.
Obtenir les clés API :
- Après vous être connecté, naviguez vers le Dashboard.
- Allez dans la section API Keys et copiez votre Publishable Key et Secret Key.

Étape 2 : Ajouter le script Moyasar à votre page web

Incluez la bibliothèque JavaScript de Moyasar dans votre fichier HTML. Ajoutez la balise script suivante dans la section <head> :

<head>
    <!-- Bibliothèque JS Moyasar -->
    <script src="https://cdn.moyasar.com/mpf/0.3.0/moyasar.min.js"></script>
</head>

Étape 3 : Créer un formulaire de paiement

Créez un formulaire pour collecter les détails de paiement des utilisateurs :

<form id="payment-form">
    <div class="form-group">
        <label for="card-name">Nom du titulaire</label>
        <input type="text" id="card-name" placeholder="Jean Dupont" required>
    </div>
    <div class="form-group">
        <label for="card-number">Numéro de carte</label>
        <input type="text" id="card-number" placeholder="4242 4242 4242 4242" required>
    </div>
    <div class="form-group">
        <label for="expiry-month">Mois d'expiration</label>
        <input type="text" id="expiry-month" placeholder="MM" required>
    </div>
    <div class="form-group">
        <label for="expiry-year">Année d'expiration</label>
        <input type="text" id="expiry-year" placeholder="AA" required>
    </div>
    <div class="form-group">
        <label for="cvv">CVV</label>
        <input type="text" id="cvv" placeholder="123" required>
    </div>
    <button type="submit">Payer maintenant</button>
</form>

Étape 4 : Initialiser le paiement Moyasar

Ajoutez un script pour gérer la soumission du formulaire et le traitement du paiement :

<script>
document.getElementById('payment-form').addEventListener('submit', function(event) {
    event.preventDefault();
 
    const cardName = document.getElementById('card-name').value;
    const cardNumber = document.getElementById('card-number').value;
    const expiryMonth = document.getElementById('expiry-month').value;
    const expiryYear = document.getElementById('expiry-year').value;
    const cvv = document.getElementById('cvv').value;
 
    Moyasar.init({
        element: '#payment-form',
        amount: 1000, // Montant en halalas (ex: 1000 halalas = 10 SAR)
        currency: 'SAR',
        description: 'Description du paiement',
        publishable_api_key: 'VOTRE_CLE_PUBLISHABLE',
        on_success: function(response) {
            console.log('Paiement réussi:', response);
        },
        on_failure: function(error) {
            console.error('Paiement échoué:', error);
        }
    });
 
    Moyasar.pay({
        method: 'creditcard',
        creditcard: {
            name: cardName,
            number: cardNumber,
            month: expiryMonth,
            year: expiryYear,
            cvv: cvv
        }
    });
});
</script>

Étape 5 : Gérer la réponse de paiement

Les callbacks on_success et on_failure géreront la réponse de paiement. Vous pouvez personnaliser ces fonctions pour afficher des messages appropriés à l'utilisateur.

Étape 6 : Tester votre intégration

Avant de passer en production, testez votre intégration en utilisant les détails de carte de test fournis par Moyasar.

Étape 7 : Passer en production

Une fois que vous avez testé votre intégration, remplacez les clés par vos clés de production depuis le tableau de bord Moyasar.

Conclusion

En suivant ces étapes, vous pouvez intégrer le système de paiement web de Moyasar avec les cartes de crédit dans votre application web. Pour plus d'informations, consultez la Documentation Moyasar.

Si vous rencontrez des problèmes ou avez besoin d'aide supplémentaire, l'équipe de support de Moyasar est disponible pour vous aider. Bon codage !

Intégrer le paiement web Moyasar avec les cartes de crédit