Pago integrado

El modo integrado incorpora el formulario de pago de Sangho directamente en su página, sin redirección. El comprador permanece en su sitio durante todo el proceso.

Flujo completo

1. Servidor: crear una Intención de pago, devolver el client_secret
2. Frontend: cargar el SDK de Sangho JS con la clave pública
3. Frontend: montar el formulario en un div con sangho.checkout.mount()
4. Comprador: introducir sus datos y pagar
5. Frontend: callback onSuccess con los datos de la transacción
6. Servidor: confirmar mediante el webhook payment_intent.succeeded

Campos alojados (tarjetas)

Para las tarjetas bancarias, los campos de número, caducidad y CVV son iframes seguros (Hosted Fields de Braintree). Ningún dato de la tarjeta pasa por su servidor.

Integración HTML + JS

html

<!-- 1. Charger le SDK -->
<script src="https://js.sangho.ga/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>