Tableau de bordAPI ReferenceObtenir une clé API
Guides

Iframe

Intégration de Paiement avec Bictorys : Mode Iframe

Suggest Edits

Vue d'ensemble de l'intégration Iframe

L'intégration Iframe de Bictorys vous permet d'incorporer le processus de paiement directement dans une fenêtre intégrée sur votre site web. Cela offre une expérience de paiement transparente et sécurisée.

Étapes pour l'intégration Iframe

Etape 1 : Inclusion de bictorys.js

Commencez par inclure bictorys.js dans la section <head> de votre site web. Ce fichier JavaScript facilite l'encapsulation de l'interface de paiement dans un iframe.

<!-- Inclure bictorys.js dans la section head de votre site -->
<head>
  <script src="https://path/to/bictorys.js"></script>
</head>

Etape 2 : Appel de l'API Charges

Préparez les détails de votre transaction, tels que le montant, la devise, et d'autres informations nécessaires. Ensuite, appelez l'API Charges sans spécifier le type de paiement.

// Préparez les détails de votre paiement
const detailsPaiement = {
  "merchantReference": "33e1c83b-7cb0-437b-bc50-a7a58e5660ad",
  "redirectUrl": "https://votre-site.com/redirection",
  "amount": 100,
  "currency": "XOF",
  // ... autres détails de votre commande et de vos informations
};

// Appelez l'API Charges sans spécifier payment_type
Bictorys.Charges.init(detailsPaiement);

Etape 3 : Choix du Mode de Paiement

Sur la fenêtre de paiement intégrée, votre client aura la possibilité de choisir le mode de paiement qu'il préfère, offrant ainsi une flexibilité totale.

Etape 4: Saisie des Informations de Paiement

Les informations de paiement seront saisies directement dans l'iframe de manière sécurisée, garantissant la confidentialité des données du client.

Etape 5 :Confirmation et Retour

Une fois que le paiement est confirmé, le client sera automatiquement redirigé vers votre site à l'URL de redirection spécifiée.

Personnalisation

Personnalisez l'apparence de la fenêtre de paiement intégrée pour qu'elle s'harmonise avec le style de votre site en utilisant du CSS. Voici un exemple de personnalisation :

/* Personnalisez l'apparence de la fenêtre de paiement intégrée */
iframe.bictorys-iframe {
  width: 100%;
  height: 500px;
  border: none;
  /* Ajoutez d'autres styles personnalisés selon vos préférences */
}

👍

Voilà !

Suivez ces étapes simples pour intégrer avec succès Bictorys sur votre site web, offrant ainsi à vos utilisateurs une expérience de paiement fluide et sécurisée.

N'hésitez pas à consulter la documentation Bictorys pour plus de détails et à contacter le support en cas de besoin. Merci d'utiliser Bictorys pour vos paiements en ligne !

Updated 9 months ago