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', }, }