Watenga.js integration paths

One library, three ways to accept payments. Pick the path that matches how much UI control you need.

Path	API	Best for	Layout control
Embedded widget	`watenga.mount()`	Fastest integration — full prebuilt checkout UI	None (Watenga renders tabs, card iframe, wallets)
Elements	`watenga.elements()`	Custom checkout pages with modular fields	Full — mount Card, Phone, Address, Express separately
Hosted Checkout	Payment link URL	Zero code — share a link or invoice	N/A (hosted on pay.watenga.africa)

Embedded widget (fastest)

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

Elements (full layout control)

Live card acceptance: use the embedded widget (watenga.mount()) only. elements.submit() for card is disabled in the production @watenga/js bundle — it is available in local SDK builds for layout prototyping with pk_test_* keys only.

const watenga = Watenga('pk_live_xxx');
const elements = watenga.elements({ currency: 'USD', amount: 350.00 });

const card = elements.create('card');
card.mount('#card-number');
elements.createExpiry().mount('#card-expiry');
elements.createCvc().mount('#card-cvc');

const phone = elements.create('phone');
phone.mount('#phone');

card.on('change', (e) => {
  if (e.complete) enablePayButton();
});

const result = await elements.submit({ type: 'card' });
if (result.error) showError(result.error.message);
else handleSuccess(result.transaction);

Hosted Checkout (zero code)

Create a payment link in the merchant dashboard and share https://pay.watenga.africa/your-slug. No JavaScript required.

When to use Elements

Go-live: use watenga.mount()for card payments (COPY&PAY iframe). Elements card submit() is disabled in production.
You already have a checkout design system and only need secure fields.
Card number, expiry, and CVC must sit in different grid columns.
You want Express Checkout buttons (EcoCash QR, Zimswitch Tap, InnBucks) inline.
Billing address is collected with elements.create('address').