Watenga Elements Preview

Elements mount cross-origin secure iframes for card fields. Sensitive values never enter your DOM — only change events (brand, last4, completion) cross the boundary via validated postMessage.

Preview

Elements are in preview: build and try custom layouts in test mode. To take live card payments today, use the embedded checkout (watenga.mount()) or a hosted payment page.
Legacy non-secure DOM card inputs in @watenga/js are for local tests only (secure: false). Production integrations must pass checkoutSessionRef and publicKey so the secure frame path is used.

Secure frame sessions

  1. Create a checkout session on your server.
  2. Call POST /v1/elements/sessions with parent_origin set to window.location.origin.
  3. Mount the card Element — it loads /v1/public/elements/frame once per token.

Completing a payment

The secure frame mounts the payment provider's hosted component; the customer confirms the payment there, including any 3-D Secure step, and your page receives the result as an event. elements.submit() is disabled in production builds, and every checkout, payment and public API rejects request bodies that carry a card number or CVC with RAW_CARD_DATA_REJECTED.

Appearance API

The appearance API accepts visual CSS variables and rules only. Inline update({ style }) calls reject non-visual properties (for example position or url() values).

Read the full browser-security contract in the payment-page security guide.