Intégrations No-Code (Wix, Shopify, Webflow)

Vous pouvez intégrer HayBTech sur n'importe quel constructeur de site, même sans serveur dédié.

Wix (via Velo)

Wix permet d'exécuter du code côté serveur de manière sécurisée via Velo.

1. Backend (backend/pay.jsw)

Créez un fichier web method pour protéger votre clé secrète.

import { fetch } from 'wix-fetch';

export async function createPayment(amount) {
  const response = await fetch("https://app.haybtech.com/v1/payments", {
    method: 'post',
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer sk_your_secret_key"
    },
    body: JSON.stringify({
      amount: amount,
      currency: "XOF",
      merchant_ref: "WIX-" + Date.now()
    })
  });
  return response.json();
}

2. Frontend

Appelez votre fonction backend lors du clic sur un bouton.

import { createPayment } from 'backend/pay.jsw';
import wixLocation from 'wix-location';

$w("#payButton").onClick(async () => {
  const result = await createPayment(2500);
  if (result.data.payment_url) {
    wixLocation.to(result.data.payment_url);
  }
});

---

Shopify (Bouton Personnalisé)

Si vous n'utilisez pas l'App officielle, vous pouvez ajouter un bouton personnalisé dans votre thème.

1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
2. Ajoutez une section HTML personnalisé.
3. Collez le code suivant (utilisez un lien généré via votre tableau de bord HayBTech) :

<a href="https://pay.haybtech.com/l/votre-produit" 
   style="background: #FF6B00; color: white; padding: 15px 30px; text-decoration: none; border-radius: 5px; font-weight: bold;">
  Acheter avec Orange Money / Wave
</a>

---

Webflow / Squarespace / Bubble

Pour ces plateformes, utilisez HayBTech.js si vous avez accès au code personnalisé, ou un Lien de Paiement direct.

Exemple de bouton universel sécurisé

Copiez ce code dans un bloc "Embed" ou "Code" :

<button id="hb-buy-btn" style="cursor:pointer; background:#000; color:#fff; border:none; padding:12px 24px; border-radius:8px;">
  Payer en toute sécurité
</button>

<script src="https://js.haybtech.com/v1/haybtech.js"></script>
<script>
  const hb = new HayBTech('pk_test_votre_cle_publique');
  document.getElementById('hb-buy-btn').onclick = function() {
    // L'URL doit être générée par votre serveur ou être un lien de paiement fixe
    hb.redirectToCheckout({
      paymentUrl: 'https://pay.haybtech.com/l/votre-lien-fixe'
    });
  };
</script>

️ Sécurité No-Code

• Clés Secrètes : Ne collez JAMAIS une clé sk_... dans un bloc HTML ou dans le code frontend de Wix/Webflow. Utilisez toujours un environnement backend (comme Velo sur Wix) ou des liens de paiement pré-générés.
• Webhooks : Pour les plateformes No-Code, nous recommandons d'utiliser Zapier ou Make pour recevoir nos notifications et mettre à jour votre base de données.