Paiement Embarqué

Le mode Embarqué intègre le formulaire de paiement Sangho directement dans votre page, sans redirection. L’acheteur reste sur votre site tout au long du processus.

Flux complet

1. Serveur : Créer une Intention de paiement, retourner le client_secret
2. Frontend : Charger le SDK Sangho JS avec la clé publique
3. Frontend : Monter le formulaire dans un div avec sangho.checkout.mount()
4. Acheteur : Saisir ses informations et payer
5. Frontend : Callback onSuccess avec les données de transaction
6. Serveur : Confirmer via webhook payment_intent.succeeded

Champs Hébergés (cartes)

Pour les cartes bancaires, les champs numéro, expiration et CVV sont des iframes sécurisées (Hosted Fields Braintree). Aucune donnée de carte ne transite par votre serveur.

Intégration HTML + JS

html

<!-- 1. Charger le SDK -->
<script src="https://js.sangho.com/v1/sdk.js"></script>
<!-- 2. Conteneur du formulaire -->
<div id="sangho-checkout"></div>
<button id="pay-btn">Payer</button>
<script>
const sangho = new Sangho('pk_live_xxxx');
// 3. Récupérer le client_secret depuis votre serveur
const { clientSecret } = await fetch('/api/create-payment', {
  method: 'POST',
  body: JSON.stringify({ amount: 5000 }),
}).then(r => r.json());
// 4. Monter le formulaire
const checkout = await sangho.checkout.mount('#sangho-checkout', {
  clientSecret,
  appearance: { theme: 'minimal', accentColor: '#0066FF' },
});
// 5. Soumettre
document.getElementById('pay-btn').onclick = async () => {
  const { error, paymentIntent } = await checkout.confirm();
  if (error) {
    console.error(error.message);
  } else {
    globalThis.location.href = '/merci';
  }
};
</script>