> For the complete documentation index, see [llms.txt](https://docs.payengine.co/payengine-api-v2.5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payengine.co/payengine-api-v2.5/ui-styleguide-specs/securefields.md).

# SecureFields JS

![](/files/mAziJxQ3vifulCZ663Bm)

Platform payment uses our defined SecureFields to display credit card fields and other secure fields on your checkout page. This gives you the flexibility to customize your checkout experience by styling the fields according to your theme and preferences.

All fields are displayed within `iframe` elements to provide a secure experience for customers. Because the content of iframes is technically not a part of your page, it's not possible to directly apply styles to those components from your style sheet and must be done another way.

Let's start with a basic credit card field:

```javascript
const field = form.field('#cc-number-wr', {
 type: 'card-number',
 name: 'card_number',
 placeholder: 'Card Number',
 validations: ['required', 'validCardNumber'],
});
```

Now you can utilize all available features of CSS-in-JS technology. Added property `css` includes the ability to adjust any CSS property, including transition animations, custom styles for pseudo-classes, and media queries.

```javascript
const field = form.field('#cc-number-wr', {
 type: 'card-number',
 name: 'card_number',
 placeholder: 'Card Number',
 validations: ['required', 'validCardNumber'],
 css: {
   background: 'rgba(215, 224, 235, 0.18)',
   border: 'none',
   borderRadius: '4px',
   boxSizing: 'border-box',
   color: 'white',
   fontSize: '12px',
   height: '40px',
   letterSpacing: '.7px',
   lineHeight: 'normal',
   padding: '0 10px',
 }
});
```

Additionally, you can add styles through pseudo-classes, improving the user experience even further.

```javascript
const field = form.field('#cc-number-wr', {
 type: 'card-number',
 name: 'card_number',
 placeholder: 'Card Number',
 validations: ['required', 'validCardNumber'],
 css: {
   background: 'rgba(215, 224, 235, 0.18)',
   border: 'none',
   borderRadius: '4px',
   boxSizing: 'border-box',
   color: 'white',
   fontSize: '12px',
   height: '40px',
   letterSpacing: '.7px',
   lineHeight: 'normal',
   padding: '0 10px',
   '&::placeholder': {
     color: 'white',
     fontSize: '12px',
     opacity: '.4',
   },
   '&:hover': {
     '&::placeholder': {
       opacity: '.7'
     }
   },
   '&:focus': {
     '&::placeholder': {
       opacity: '.7'
     }
   },
 }
});
```

In this example, we used the nesting of classes within the iframe to reach the nested elements. With nesting, you can style option blocks in dropdowns, as well as any properties or pseudo-classes into media queries, like so:

```javascript
const field = form.field('#cc-number-wr', {
 type: 'card-number',
 name: 'card_number',
 placeholder: 'Card Number',
 validations: ['required', 'validCardNumber'],
 css: {
   background: 'rgba(215, 224, 235, 0.18)',
   border: 'none',
   borderRadius: '4px',
   boxSizing: 'border-box',
   color: 'white',
   fontSize: '14px',
   height: '40px',
   letterSpasing: '.7px',
   lineHeight: 'normal',
   padding: '0 10px',
   '@media (min-width:420px)': {
     fontSize: '12px'
   }
 }
});
```