HayBTech.js (Navigateur)

La bibliothèque JavaScript officielle pour intégrer HayBTech côté client.

Intégration par IA (Prompt pour Marchands)

Si vous utilisez un assistant IA (comme Cursor, GitHub Copilot, ChatGPT, Claude, etc.), vous pouvez copier-coller le prompt suivant pour intégrer ce SDK de A à Z dans votre projet :

Agis en tant qu'expert en intégration frontend JavaScript. Je souhaite intégrer la passerelle de paiement HayBTech sur mon site web statique ou Single Page Application (SPA) avec la bibliothèque browser `haybtech.js` (ou `@haybtech/browser`).

Voici ma stack technique actuelle :
- Framework Frontend : [ex: Vanilla JS, React, Vue, Angular]
- Backend : [ex: API REST Node.js, PHP, Laravel, ou serverless]

*Note de sécurité : L'initiation de paiement doit s'effectuer via votre serveur backend. Le code frontend sert à appeler votre backend et à rediriger ou afficher le guichet de paiement.*

Tâches à accomplir dans le code généré :
1. **Déclenchement du paiement** : Créer une fonction JS qui intercepte le clic sur le bouton "Payer", envoie les détails du panier à votre backend via une requête `fetch` et reçoit l'URL de paiement `payment_url`.
2. **Redirection ou Modal intégrée** : Rediriger l'utilisateur vers cette URL de manière transparente avec `haybtech.redirectToCheckout({ paymentUrl })` ou en ouvrant un popup avec `haybtech.openPopup(...)`.
3. **Écran d'attente et de retour** : Gérer les pages de destination `success_url` et `failed_url`. Sur la page de succès, afficher un écran d'attente pendant que le backend valide la commande par webhook, puis confirmer visuellement l'achat.
4. **Gestion des pannes** : Afficher des messages d'erreur clairs en cas d'échec réseau ou de refus de paiement sans exposer de détails techniques inutiles.

Génère le code frontend complet, moderne, commenté et optimisé.

️ Sécurité

N'utilisez JAMAIS votre clé secrète (sk_...) côté client. Le SDK HayBTech.js rejette systématiquement les clés secrètes. Utilisez votre Clé Publique (pk_...).

Installation

<script src="https://js.haybtech.com/v1/haybtech.js"></script>

Usage

Initialisation

const haybtech = new HayBTech('pk_test_votre_cle_publique');

Redirection vers le Checkout

C'est la méthode la plus simple et la plus sûre. Votre backend crée le paiement et renvoie une paymentUrl.

haybtech.redirectToCheckout({
  paymentUrl: 'https://app.haybtech.com/checkout/...'
});

Ouverture en Popup

Si vous voulez que vos clients restent sur votre site pendant le paiement :

haybtech.openPopup({
  paymentUrl: 'https://app.haybtech.com/checkout/...',
  onSuccess: (data) => {
    console.log("Paiement réussi", data);
    window.location.reload();
  }
});

Pourquoi utiliser HayBTech.js ?

1. Sécurité : Gestion isolée des redirections.
2. UX : Ouverture fluide en popup pour réduire le taux d'abandon.
3. Légèreté : Moins de 5 Ko, zéro dépendance.