Checkout

Lorsque vous envisagez d'implémenter une solution de paiement dans votre application, l'intégration de type Checkout offre une approche pratique et conviviale pour les utilisateurs. Cette méthode simplifie le processus de paiement en redirigeant le client vers une page dédiée où il peut sélectionner son mode de paiement et fournir les informations nécessaires. Voici un guide détaillé pour les développeurs sur la mise en œuvre de cette intégration.

Vue d'ensemble de l'intégration de type Checkout

L'intégration de type Checkout de Bictorys offre une approche conviviale pour permettre à vos clients d'effectuer des paiements en toute simplicité. Lorsqu'un utilisateur choisit de procéder au paiement, vous pouvez appeler l'API Charges sans inclure le paramètre de requête payment_type. Cette action redirigera le client vers une page de paiement où il pourra sélectionner son mode de paiement préféré et fournir les informations requises.

Étapes pour l'intégration de type Checkout

Etape 1 : Appel de l'API Charges

Utilisez l'API Charges sans spécifier le paramètre payment_type. Cela déclenchera le processus de redirection vers la page de paiement.

// Préparez les données de paiement: seul amount et currency sont obligatoires
const data = JSON.stringify({
  "amount": 100,
  "currency": "XOF",
  "paymentReference": "yourOrder_CF34509",
  "merchantReference": "33e1c83b-7cb0-437b-bc50-a7a58e5660ad",
  "successRedirectUrl": "https://client.co/redirect_url",
  "errorRedirectUrl": "https://client.co/redirect_url",
  "orderDetails": [
    {
      "name": "pineapple2",
      "price": 100,
      "quantity": 2.5,
      "taxRate": 5.5
    },
    {
      "name": "mango",
      "price": 100,
      "quantity": 2.5,
      "taxRate": 5.5
    }
  ],
  "customer": {
    "name": "John Dao",
    "phone": "+221776794638",
    "email": "[email protected]",
    "city": "Dakar",
    "postal_code": "string",
    "country": "SN",
    "locale": "fr-FR"
  },
  "allowUpdateCustomer": false
});

// Créez une nouvelle instance XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;

// Configurez l'événement pour la réponse
xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
    // Gérez la réponse, par exemple, redirigez le client vers la page de paiement
  }
});

// Ouvrez une nouvelle requête POST vers l'URL de l'API Charges
xhr.open("POST", "https://api.dev.bictorys.com/pay/v1/charges");

// Ajoutez les en-têtes nécessaires
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("X-Api-Key", "public-e6cf6c1d-3055-42fa-8eb7-c4f69b6fcbc8.7qmgwSXO69IttHNpS9oNg1WeUCOjnarUpa69jLPA5GmH96pe1EEKpUqf13AKbBSA");

// Envoyez les données JSON
xhr.send(data);

Etape 2 : Redirection du Client

Une fois l'API appelée, le client sera automatiquement redirigé vers la page de paiement sécurisée de Bictorys, où il pourra choisir entre différents modes de paiement.

Etape 3 : Choix du Mode de Paiement

Sur la page de paiement, le client aura la possibilité de choisir le mode de paiement autorisé par le marchand ( Mobile Money, Carte bancaire etc...)

Etape 4 : Saisie des Informations de Paiement

Le client fournira les informations de paiement nécessaires en toute sécurité. Bictorys garantit un environnement sécurisé et conforme aux normes de sécurité en vigueur.

Etape 5 : Confirmation et Retour

Une fois le paiement effectué, le client sera redirigé vers votre site avec une confirmation de la transaction.

Personnalisation

📘

Note

L'integration Checkout ne permet pas la personalisation de al page de paiement.

Si vous souhaiter personnaliser, optez pour l'integration Iframe

En adoptant l'intégration de type Checkout, vous assurez à vos utilisateurs une expérience de paiement transparente, tout en bénéficiant de la sécurité et de la simplicité offertes par la plateforme Bictorys. N'hésitez pas à nous contacter.