Can you add support for stylization of the iFrame?

Follow

Permanently deleted user

October 27, 2016 15:11

Spreedly only manages two fields using the iFrame: Credit Card Number and CVV.

The beautiful thing about the iFrame is the endless customization options it offers your engineering team. We receive many inquiries at Spreedly asking how to accomplish particular behavior on a customer's page.

While our engineering team is not able to speak to each of these questions on how to design your parent page, we think the prospect of adding a Professional Services team in the future is exciting. For now, Spreedly customers should rely on their internal engineering teams to field these questions. 

Check out our iFrame reference API for inspiration.

0

• 

  James Rosenthal September 27, 2017 14:07

  There doesn't seem to be any way to change the placeholder text color in the hosted fields.  Stripe's Elements API provides a way to do that like so:

  {
  base: {
   fontSize: '16px',
   ...
    '::placeholder': {
     color: 'rgba(0, 0, 0, 0.54)',
    }
   },
   invalid: {
    color: 'rgb(221,44,0)',
    ':focus': {
     color: '#303238',
    }
   }
  }

  Is there or will there be a workaround to style placeholder text? Spreedly.setStyle only applies to the field itself, and even though Spreedly.setPlaceholder's description says 'Style iFrame fields’ placeholder text', it just demonstrates changing the placheholder text value, not the style. Thanks!

  1

  Comment actions Permalink
• 

  Permanently deleted user September 27, 2017 18:02 (Edited September 27, 2017 18:02)

  Hi James, 

  We understand that stylizing your payment form to fit your UX is important, which is why our iFrame solution is such a popular choice for developers. Today, however, it is not possible to alter the color of the placeholder text within our iFrame.

  Our placeholder color is set via browser-specific pseudo selectors, and it is not possible for us to change the stylization. This cannot be overridden by using your own CSS, either.

  The idea of customizing the placeholder text appearance is an interesting one, and we are always open to hearing about how our customers would like our iFrame to behave.

  It's possible we may consider this in our next large iFrame update, so please keep an eye on our Changelog if this is something you are interested in!

  Thank you. 

  2

  Comment actions Permalink
• 

  Ryan Heneise February 08, 2018 01:54

  I second this request. As you can see in the attached image, the iframe placeholders are significantly darker than our app's styled placeholders. One option we are considering is to darken our own placeholders, but that would affect usability. 

  0

  Comment actions Permalink
• 

  Permanently deleted user February 08, 2018 17:28

  Ryan,

  Thanks for providing your feedback.

  Additional stylization for the iFrame is something that we're currently evaluating and these use cases are extremely helpful.

   

  1

  Comment actions Permalink
• 

  Kamal Eddin July 04, 2020 11:17

  we are in 2020 now :)
  
  is there any solution to change the placeholder color? I am working on a dark theme app, and definitely the placeholder cannot be grey.

  0

  Comment actions Permalink
• 

  Emanuela Villeroy October 20, 2022 13:31

  Hello there,
  
  I have the same question concerning the style customisation of a special state of the input fields in the iframe.
  Example when card number or CVV fields are focused, I would like to change border color.
  For now is not possible to add pseudo classes as :hover or :focus to inline ccs styles.
  
  Have you found a solution to allow a full style customisation of this fields styles?

  0

  Comment actions Permalink

Please sign in to leave a comment.