Watenga.js integration paths

Accept payments with the embedded widget, a hosted payment link, or secure Elements for custom layouts. In every path card data is entered only in Watenga-hosted frames, never in your page (PCI SAQ-A). The old non-secure DOM inputs are not available in production builds.

Path	API	Best for	Layout control
Embedded widget	`watenga.mount()`	Fastest integration — full prebuilt checkout UI	Theme / tabs (Watenga renders card iframe and wallets)
Hosted Checkout	Payment link URL	Zero code — share a link or invoice	N/A (hosted on pay.watenga.africa)

Embedded widget (recommended)

Your server decides what is charged. It creates a checkout session with its secret key and gives the page the session's client_secret; the widget pays that session with your publishable key. A publishable key cannot create a checkout for an amount of its own choosing (403 CLIENT_SECRET_REQUIRED).

// Server (secret key)
const res = await fetch('https://api.watenga.africa/v1/checkout/sessions', {
  method: 'POST',
  headers: { Authorization: 'Bearer sk_live_xxx', 'Content-Type': 'application/json' },
  body: JSON.stringify({ amount: '25.00', currency: 'USD', reference: 'INV-001' }),
});
const { data: session } = await res.json(); // session.client_secret

// Browser (publishable key)
const watenga = Watenga('pk_live_xxx');
watenga.mount('#payment-form', {
  clientSecret: session.client_secret,
  amount: 25.00,
  currency: 'USD',
  reference: 'INV-001',
  onSuccess: (txn) => fulfillOrder(txn),
  onError: (err) => showError(err.message),
});

Hosted Checkout (zero code)

Create a payment link in the merchant dashboard and share https://pay.watenga.africa/your-slug. No JavaScript required. Enable TrustPay on the link when you need hold-until-buyer-confirms escrow.

Secure Elements (custom layouts)

Watenga.elements() mounts Watenga-hosted, cross-origin iframes for card fields, so card data never enters your page. Create a checkout session on your server, call POST /v1/elements/sessions with your page's parent_origin, then mount the card Element with checkoutSessionRef and publicKey. The payment, including 3-D Secure, completes inside the provider component in that frame. elements.submit() is disabled in production builds, and the API rejects raw card numbers or CVCs (RAW_CARD_DATA_REJECTED). See /developers/elements/overview.