digid pay Secure Fields

Status. Secure Fields are planned for public provisioning; this page is the styling + integration contract (per-field iframes, state classes, a11y, brand subsets, SCA in-frame, SAQ A wording).

digid pay Secure Fields are the hosted tokenization iframes that capture card data on your page. Each sensitive input (card number, CVC) lives in its own invisible iframe served from the digid pay tokenization vault, so the card data never touches your DOM, your servers, or digid pay systems beyond the vault boundary.

Why per-field iframes

• Card data is typed inside the vault boundary, never in your page.
• Each field is isolated: your scripts cannot reach into a field's iframe.
• You still control how they look and behave — through a styling API, not by touching the card data.

Basic capture (snippet)

The simplest path uses the checkout snippet; Secure Fields are created, styled and mounted for you:

const checkout = await digidPay.checkout({
  publishableKey: 'pk_sandbox_...',
  clientSecret: 'pi_..._secret_...',
  paymentMethods: ['visa', 'mastercard'],
  onEvent: handleEvent,
})
checkout.mount('#digid-checkout')

Styling guide

Fields accept a style object (or data attributes on the mount node). Supported properties per field:

Concern	Options
Base	base: { color, fontSize, fontFamily, fontWeight, letterSpacing, textAlign, padding, placeholderColor }
Focus	focus: { color, borderColor, boxShadow }
Toggled states	valid, invalid, empty, identified (each a style object)
Placeholder	via placeholderColor on base (see a11y below)
aria	ariaLabel per field (see a11y below)

const style = {
  base: {
    color: '#0f172a',
    fontSize: '16px',
    fontFamily: 'Inter, sans-serif',
    placeholderColor: '#64748b',
    padding: '12px',
  },
  focus: { borderColor: '#4338ca', boxShadow: '0 0 0 3px #eef2ff' },
  valid: { color: '#0f172a' },
  invalid: { color: '#b91c1c' },
  empty: { color: '#0f172a' },
}

State classes are applied to a wrapper you control so you can style the surrounding field container:

Class	When
.digid-field--valid	Input is complete and valid.
.digid-field--invalid	Input failed validation (e.g. bad Luhn, wrong CVC length).
.digid-field--empty	Input is empty.
.digid-field--identified	The card brand has been identified from the number.

.digid-field--invalid { border-color: #b91c1c; }
.digid-field--identified .digid-card-brand { display: block; }

Accessibility

• Provide a visible label and set ariaLabel on each field (number, expiry, CVC). Never rely on the placeholder as the only label.
• placeholderColor must meet contrast against the field background.
• Respect prefers-reduced-motion if you animate focus states.
• Keep focus visible: the focus style should always produce a distinguishable outline/ring.

digidPay.createField('cardNumber', {
  ariaLabel: 'Card number',
  placeholder: '1234 5678 9012 3456',
})

Card brand subset

Limit accepted brands with paymentMethods — an unlisted brand is not submitted:

paymentMethods: ['visa', 'mastercard', 'amex']

Supported brand tokens are documented in the dashboard test page; they match the scheme names (Visa, Mastercard, …).

No external resources inside fields

Secure Fields must stay self-contained:

• No external stylesheets or fonts may load inside the fields' iframes.
• To use a custom font, upload it to your digid pay configuration and reference it by name in style.base.fontFamily.

This is what keeps the field surface stable, dependency-free and auditable.

SCA in the frame

When a card requires 3-D Secure, the challenge runs inside the checkout flow — no page navigation, no new tab (see SCA & 3-D Secure). The snippet surfaces payment_intent.requires_action while the challenge is in progress and continues automatically.

SAQ A wording for merchants

Using digid pay Secure Fields means card entry happens entirely inside digid pay's vault boundary — never in your DOM or servers — which reduces your PCI burden to SAQ A. The wording you can rely on:

Card entry happens entirely inside digid pay's vault boundary, never in our DOM or servers, so our payment page qualifies for SAQ A under the card-brand self-assessment questionnaires.

digid pay operates as a service provider under its own self-assessment with an empty card-data environment. See PCI posture for the full merchant-facing statement.

Related

• Snippet — mount Secure Fields in one tag.
• Tokens — what crosses the vault boundary (only tokens).
• PCI posture — the merchant SAQ A story.