question

brokenoval avatar image
brokenoval asked gd213 commented

EComm iFrame Customisation CSS

Is it possible to get a complete list of allowed customisations for the iFrame CSS?


Currently there are some examples here:
https://docs.clover.com/docs/customizing-iframe-elements-with-css


However it seems that there is a lot of functionality not allowed, and trial and error on every CSS property could take a very long time. Is there a comprehensive list of all available CSS properties that we can use?

EDIT:

So there's a lot of things I've tried that don't seem to work, here's a short list:


const styles = {
  html: { // Trying to edit the main wrapper within the iframe - DOESN'T work
    height: '20px',
  },
  body: { // trying to edit the main body inside the ifram - DOESN'T work
    width: '250px',
  },
  input: { // trying to edit all inputs inside the iFrame - DOES work
    border: 'solid',
    borderRadius: '4px',
    borderWidth: '1px',
    'border-color': 'rgba(0, 0, 0, 0.23)',
    width: '50%',
    height: '2em',
    margin: '0px',
    padding: '0.2em',
  },
  'input :active': { 'border-color': 'rgb(123,78,193)' }, // Trying to edit a different state of all inputs - DOESN'T work
  'payment-form': { 'background-color': '#000' }, // trying to edit the form element inside the iframe DOESN'T work
  '#payment-form': { 'background-color': '#000' }, // trying to do the same but using an id descriptor - DOESN'T work
  '.payment-form': { backgroundColor: '#000' }, // trying to do the same again using a class descriptor - DOESN'T work
  'card-number': { // editing the height of the card number div - DOESN'T work (this does work if you specify the input element underneath the card-number div
    height: '20px',
  },
  button: { // trying to edit the general colour of any button element - DOESN'T work
    'background-color': '#000',
  },
  '.button-container': { // trying to edit the specific button using the class descriptor - DOESN'T work
    'background-color': '#FFF',
  },
  'button-container': { // trying to edit the button using a general descriptor - DOESN'T work
    'background-color': '#CCC',
  },
  'card-date': { // DOESN'T work
    width: '500px',
    'background-color': '#CCCCCC',
  },
  'card-cvv': { // DOESN'T work
    width: '400px',
    'background-color': '#DDDDDD',
  },
  'card-postal-code': { // DOESN'T work
    width: '300px',
    'background-color': '#EEEEEE',
  },
  '.clover-footer': { // trying to edit the footer containing the Privacy Policy - DOESN'T work
    width: '200px',
  },
}
Payments
10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

David Marginian avatar image
David Marginian answered gd213 commented

All css as js is supported, eg. https://transform.tools/css-to-js
Is there something specific you are trying to use that is not working?

9 comments
10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Thanks David - that tool is useful. I can add styles to card-number, card-date, card-cvv and card-postal-address. But I'm trying to change the form itself `payment-form`, just sampliing simple things like background-color and width and they don't seem to be working. Is it possible to get a full list of the elements that are customisable? It'd be useful to get a starting version of that JS file that removes all style from the basic iFrame to give a clean slate to start from.

Also I'm trying to add a colour change to the border when I click on any input, specifically this isn't working:

"input :active" : { 'border-color': "rgb(123,78,193)" },
0 Likes 0 ·

The css for the form itself is in the developer's control since those are styles not passed to the iframe elements.
If you want to add styles on the form feel free to do that on the css of the form elements that are already on your page.

For the input specific case that you mentioned you can do that with the transform.tools mentioned above here is an example of using that as well
https://codepen.io/gareth-dsouza/pen/RwPjBXJ

0 Likes 0 ·
OK I see, so it's basically only the input elements that are inside an iframe, each of which is essentially a separate iframe. I thought the whole thing was an iframe. I'll play around a bit more - I think I'm getting confused as to where the scope of the iFrame ends...
0 Likes 0 ·
Show more comments
gd213 avatar image
gd213 answered gd213 edited

The library used under the hood is https://cssinjs.org

"jss" : "^9.8.7" ,
"jss-preset-default" : "^4.5.0" ,
10 |2000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Welcome to the
Clover Developer Community