dhango.

Embedded Sign-Up · How-To

Integrate in three steps

<!-- Load the SDK from the sign-up origin, then: -->
var signup = Dhango.signup({
  container: '#signup-slot',          // or mode: 'modal'
  sessionId: '<from POST /v1/applicationSessions>',
  config: { theme: { primaryColor: '#0057ff', fontFamily: 'Poppins' } },
  onComplete: (e) => showThankYou(e.sessionId),
});

Get the SDK

<!-- Sandbox -->
<script src="https://signup.dhangodemo.com/embed.min.js"></script>

<!-- Production -->
<script src="https://signup.dhango.com/embed.min.js"></script>

Register your embed origins

Consume the completion webhook

// Node/Express example — verify HMAC-SHA256 over "{Timestamp}.{rawBody}" (base64)
const crypto = require('crypto');

app.post('/webhooks/dhango', express.raw({ type: 'application/json' }), (req, res) => {
  const signature = req.header('HMACSignature') || '';
  const timestamp = req.header('Timestamp') || '';

  const expected = crypto
    .createHmac('sha256', process.env.DHANGO_WEBHOOK_SECRET)
    .update(`${timestamp}.${req.body}`)     // sign the timestamp + RAW body, dot-joined
    .digest();                              // raw bytes; header carries base64

  // HMAC-SHA256 in base64 is exactly 44 chars. Enforce canonical base64 by regex
  // BEFORE decoding — Buffer.from(sig, 'base64') silently skips invalid characters,
  // so a mangled header could otherwise decode to the same bytes and pass.
  const canonical = /^[A-Za-z0-9+\/]{43}=$/.test(signature);
  const provided = Buffer.from(signature, 'base64');
  const authentic = canonical && provided.length === expected.length &&
    crypto.timingSafeEqual(provided, expected);
  const fresh = Math.abs(Date.now() / 1000 - Number(timestamp)) < 300; // bounds the replay window
  if (!authentic || !fresh) return res.status(401).end();

  const event = JSON.parse(req.body);     // { Type, Data } — PascalCase, string enum
  if (event.Type === 'ApplicationSubmitted') { // onboarding finished
    // event.Data: { ApplicationId, PlatformIdentifier, OrganizationName,
    //               DoingBusinessAs, ContactEmailAddress, SubmitDate }
    // Deliveries can repeat (retries, replays inside the freshness window):
    // make this idempotent — e.g. upsert keyed on (Type, ApplicationId).
    markMerchantOnboarded(event.Data.PlatformIdentifier, event.Data.ApplicationId);
  }
  res.status(200).end();
});

What you control