Embedded Payment

Embedded mode integrates the Sangho payment form directly into your page, with no redirect. The buyer stays on your site throughout the entire process.

Complete flow

1. Server: Create a Payment Intent, return the client_secret
2. Frontend: Load the Sangho JS SDK with your public key
3. Frontend: Mount the form inside a div using sangho.checkout.mount()
4. Buyer: Enter their details and pay
5. Frontend: onSuccess callback with transaction data
6. Server: Confirm via payment_intent.succeeded webhook

Hosted Fields (cards)

For bank cards, the card number, expiration, and CVV fields are secure iframes (Braintree Hosted Fields). No card data ever passes through your server.

HTML + JS Integration

html

<!-- 1. Load the SDK -->
<script src="https://js.sangho.ga/v1/sdk.js"></script>
<!-- 2. Form container -->
<div id="sangho-checkout"></div>
<button id="pay-btn">Pay</button>
<script>
const sangho = new Sangho('pk_live_xxxx');
// 3. Fetch the client_secret from your server
const { clientSecret } = await fetch('/api/create-payment', {
  method: 'POST',
  body: JSON.stringify({ amount: 5000 }),
}).then(r => r.json());
// 4. Mount the form
const checkout = await sangho.checkout.mount('#sangho-checkout', {
  clientSecret,
  appearance: { theme: 'minimal', accentColor: '#0066FF' },
});
// 5. Submit
document.getElementById('pay-btn').onclick = async () => {
  const { error, paymentIntent } = await checkout.confirm();
  if (error) {
    console.error(error.message);
  } else {
    globalThis.location.href = '/thank-you';
  }
};
</script>