SecureFields JS

PayEngine 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:
1
const field = form.field('#cc-number-wr', {
2
 type: 'card-number',
3
 name: 'card_number',
4
 placeholder: 'Card Number',
5
 validations: ['required', 'validCardNumber'],
6
});
Copied!
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.
1
const field = form.field('#cc-number-wr', {
2
 type: 'card-number',
3
 name: 'card_number',
4
 placeholder: 'Card Number',
5
 validations: ['required', 'validCardNumber'],
6
 css: {
7
   background: 'rgba(215, 224, 235, 0.18)',
8
   border: 'none',
9
   borderRadius: '4px',
10
   boxSizing: 'border-box',
11
   color: 'white',
12
   fontSize: '12px',
13
   height: '40px',
14
   letterSpacing: '.7px',
15
   lineHeight: 'normal',
16
   padding: '0 10px',
17
 }
18
});
Copied!
Additionally, you can add styles through pseudo-classes, improving the user experience even further.
1
const field = form.field('#cc-number-wr', {
2
 type: 'card-number',
3
 name: 'card_number',
4
 placeholder: 'Card Number',
5
 validations: ['required', 'validCardNumber'],
6
 css: {
7
   background: 'rgba(215, 224, 235, 0.18)',
8
   border: 'none',
9
   borderRadius: '4px',
10
   boxSizing: 'border-box',
11
   color: 'white',
12
   fontSize: '12px',
13
   height: '40px',
14
   letterSpacing: '.7px',
15
   lineHeight: 'normal',
16
   padding: '0 10px',
17
   '&::placeholder': {
18
     color: 'white',
19
     fontSize: '12px',
20
     opacity: '.4',
21
   },
22
   '&:hover': {
23
     '&::placeholder': {
24
       opacity: '.7'
25
     }
26
   },
27
   '&:focus': {
28
     '&::placeholder': {
29
       opacity: '.7'
30
     }
31
   },
32
 }
33
});
Copied!
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:
1
const field = form.field('#cc-number-wr', {
2
 type: 'card-number',
3
 name: 'card_number',
4
 placeholder: 'Card Number',
5
 validations: ['required', 'validCardNumber'],
6
 css: {
7
   background: 'rgba(215, 224, 235, 0.18)',
8
   border: 'none',
9
   borderRadius: '4px',
10
   boxSizing: 'border-box',
11
   color: 'white',
12
   fontSize: '14px',
13
   height: '40px',
14
   letterSpasing: '.7px',
15
   lineHeight: 'normal',
16
   padding: '0 10px',
17
   '@media (min-width:420px)': {
18
     fontSize: '12px'
19
   }
20
 }
21
});
Copied!
​

Webhooks - Previous

Delete a webhook

Next - JS Client Library Properties & Styling

Onboarding Web-Component

Last modified 3mo ago

Copy link