Customization

PaygreenJS exposes two customization layers:

CSS on the wrappers you control (card fields, Pay button, method picker).
The style option in init() for elements rendered inside hosted iframes (input text, placeholders, consent checkbox).

Pick the right layer depending on what you want to customize.

What you want to change	Layer
Border, background, radius of a card field	CSS
Pay button color, height, hover state	CSS
Method picker layout, per-method button	CSS
Text color and size inside the PAN / EXP / CVV iframes	`style` option
Placeholder color	`style` option

CSS — the wrappers

Card fields

PaygreenJS injects an iframe into your #paygreen-pan-frame, #paygreen-exp-frame, and #paygreen-cvv-frame containers.

Style these containers — not the iframe itself — for layout, borders, background, and spacing.

.paygreen-pan-frame,
.paygreen-exp-frame,
.paygreen-cvv-frame {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
}

/* States — applied automatically by PaygreenJS */
.frame--activated.frame--focus   { border-color: #0a84ff; }
.frame--activated.frame--invalid { border-color: #e11d48; }

Pay button

PaygreenJS injects a <button class="pg-pay-button"> inside #paygreen-button-container.

.pg-pay-button {
  background: #0a84ff;
  border: none;
  border-radius: 8px;
  height: 48px;
  color: #fff;
  font-weight: 600;
}
.pg-pay-button:hover    { background: #0066cc; }
.pg-pay-button:disabled { background: #c7d2db; cursor: not-allowed; }

Method picker

When a Payment Order has several methods, PaygreenJS renders a row of buttons inside #paygreen-methods-container. Each button has the class .pg-payment-method plus a per-method modifier .pg-payment-method-<method>.

/* Container */
#paygreen-methods-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Every button */
.pg-payment-method {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pg-payment-method:hover {
  border-color: #0a84ff;
  background: #f1f7ff;
}

/* Per-method look */
.pg-payment-method-bank_card  { /* ... */ }
.pg-payment-method-swile      { background: #ff6b3d; color: #fff; border: none; }
.pg-payment-method-restoflash { background: #1c2438; color: #fff; border: none; }

<method> is one of: bank_card, amex, conecs, swile, restoflash, ancv, bancontact, klarna.

Hide PSP status banners

Some acquirers inject their own status messages with the class .pg-status-message. To hide them:

.pg-status-message { display: none; }

The `style` option

Pass a style object to init() to control what's inside the hosted iframes.

paygreenjs.init({
  // ...
  style: {
    input: {
      base:        { color: '#111827', fontSize: '16px' },
      hover:       { color: '#111827' },
      focus:       { color: '#0a84ff' },
      invalid:     { color: '#e11d48' },
      placeholder: { base: { color: '#9ca3af' } },
    },
    checkbox: {
      label: {
        base:      { color: '#111827' },
        unchecked: { color: '#6b7280' },
      },
      box: {
        base:      { color: '#0a84ff', hover: { color: '#0066cc' } },
        unchecked: { color: '#9ca3af' },
      },
    },
  },
});

⚠️
Only color and fontSize are honored on input.* properties.
Borders, padding, spacing, radius, and background must be styled through CSS on the wrappers.

Focus control

paygreenjs.focus('pan'); // 'pan' | 'cvv' | 'exp'

A common pattern is to auto-advance the buyer to the next field as soon as the previous one becomes valid. Listen to the *_FIELD_ONCHANGE events and check event.detail.valid:

paygreenjs.on(paygreenjs.Events.PAN_FIELD_ONCHANGE, (e) => {
  if (e.detail?.valid) paygreenjs.focus('exp');
});

paygreenjs.on(paygreenjs.Events.EXP_FIELD_ONCHANGE, (e) => {
  if (e.detail?.valid) paygreenjs.focus('cvv');
});

Class reference

Reference of CSS classes injected or used by PaygreenJS.

Class	Where	Purpose
`.paygreen-pan-frame`, `.paygreen-exp-frame`, `.paygreen-cvv-frame`	Hosted-field wrappers	Layout, border, background.
`.frame--activated`	Same wrappers	Applied to every active hosted field.
`.frame--focus`	Same wrappers, when focused	Focused state.
`.frame--invalid`	Same wrappers, when invalid	Validation error state.
`.pg-pay-button`	Injected Pay button	Submit button.
`.paygreen-methods-container`	Multi-method picker wrapper	Layout of the picker.
`.pg-payment-method`	Each picker button	Per-button base style.
`.pg-payment-method-<method>`	Each picker button	Per-method override.
`.pg-status-message`	PSP-injected banners	Hide via `display: none`.

CSS — the wrappers

Card fields

Pay button

Method picker

Hide PSP status banners

The style option

Only color and fontSize are honored on input.* properties. Borders, padding, spacing, radius, and background must be styled through CSS on the wrappers.

Focus control

Class reference

The `style` option

Only `color` and `fontSize` are honored on `input.*` properties.
Borders, padding, spacing, radius, and background must be styled through CSS on the wrappers.