Theming - Resurs Docs

CSS custom properties

:root {
  /** The main accent color  */
  --resurs-checkout-accent-color: light-dark(#8ca101, #a7c080);

  /** Text color */
  --resurs-checkout-text-color: light-dark(#272e33, #d2c5a9);

  /** Background color of the component */
  --resurs-checkout-background: light-dark(#fff, #212529);

  /** Border Radius, a value between 0-30px or equivalent unit of your choice */
  --resurs-checkout-border-radius: 8px;

  /** Font family for all widget text */
  --resurs-checkout-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /** Animation duration for the expand/collapse transition */
  --resurs-checkout-transition-duration: 0.25s;

  /** Easing function for the expand/collapse transition */
  --resurs-checkout-transition-easing: ease-out;

  /** Secondary vars */
  /** Header and subtitle color; defaults to primary foreground */
  --resurs-checkout-header-color: light-dark(#272e33, #d2c5a9);

  /** Hyperlink color; defaults to primary foreground */
  --resurs-checkout-link-color: light-dark(#272e33, #d2c5a9);

  /** Text color for the collapsed view; defaults to the text color */
  --resurs-checkout-collapsed-text-color: light-dark(#272e33, #d2c5a9);

  /** Radiobutton color; defaults to primary color */
  --resurs-checkout-checkbox-color: light-dark(#8ca101, #a7c080);

  /**Radiobutton dot color; defaults to primary color */
  --resurs-checkout-checkbox-checkmark: light-dark(#8ca101, #a7c080);
}

Font size

The widget inherits font-size from its placement context. Text scales with the surrounding page rather than using a fixed size. There is no --resurs-checkout-* property for size; control it with the native CSS font-size property on the component.

/* Managed: overrides the 14px default */
resurs-payment-method-selector {
  font-size: 16px;
}

/* Full control: sets the inherited value */
resurs-payment-method-group {
  font-size: 14px;
}

Primary content (payment option names, selling points, and links) renders at that size. The collapsed title is 2px larger and fine print is 2px smaller. In full control, set font-size on the group to match your own subtitle (the component can’t read it; it’s a sibling in your DOM).

Animation

The widget animates its expand and collapse using a CSS Grid row height transition. If your checkout already animates other payment methods, you can match the timing so all cards feel consistent.

resurs-payment-method-selector,
resurs-payment-method-group {
  --resurs-checkout-transition-duration: 300ms;
  --resurs-checkout-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

Set --resurs-checkout-transition-duration: 0s to disable animation entirely.

See Accessibility for keyboard navigation, ARIA roles, reduced motion, and contrast guidance.

⌘I