Search code examples
javascriptcssfontsadyen

Adyen checkout: Custom font for card component secured field


I've looked at the documentation and there are options used to change the font family for the input fields, but none of them cover the usage of a custom font. On our page we import Roboto and add it as a font-face which we inject in our global stylesheet using emotion (it's a react app) but since the an adyen secured field creates an iframe our custom fonts aren't inherited by the iframe. So I've also tried modifying the mounted iframes head by appending a style element to it, but it does not seem to work..

The documentation doesn't seem to cover this scenario, but I can't be the first one stumbeling upon having to use a custom font in an input field on a checkout page.. Does anyone have an idea on how this could be solved?


Solution

  • The card component uses iframes to keep card input fields out of scope for PCI Compliance and so that the iframe can't be manipulated from your website's scope.

    Adyen doesn't support a mechanism to import custom font families into the iframe at this time.