1

Does anyone know how to directly style an input field generated by recurly.js? It injects input fields into the page through iframes. Their documentation gives classes that are added the the divs or spans (whatever you use) surrounding the iframe but they have styles alredy loaded in the of the iframe and I can't figure out how to override them.

Thanks!

recurly docs

GrantW
  • 98
  • 5

2 Answers2

4

Styling of payment fields injected within the iframe can be done through the CSS section of recurly.config() in the recurly sign-up page https://dev.recurly.com/docs/getting-started-1#section-styling-card-fields.  This enables the styles to be applied on the hosted payment fields when the recurly sign-up page is loaded.

Rachel Quick
  • 1,804
  • 9
  • 8
  • Ok. So, does this mean I can add styles directly into the style option in recurly.config() like border, borderColor, padding, width, etc... or do I need to initiate these styles when I sign up for the product? – GrantW May 17 '16 at 20:54
  • The hosted payment fields styling of the iframe are configured in the styling section of Recurly.config(). Non-iframe styling would be done through conventional CSS styling for the form. – Rachel Quick May 19 '16 at 14:03
  • @RachelQuick broken link – elquimista Dec 18 '17 at 19:18
  • Im having trouble with this aswell today. I cant seem to understand how to style the individual card elements. Also why is the Card image not available on CardNumberElement but its available on CardElement? When you use individual card elements you lose the ability to show the mastercard, visa emblem... – KingJoeffrey Dec 29 '22 at 04:33
0

updated link: https://dev.recurly.com/docs/recurly-js-getting-started

you can add styles to recurly.config

recurly.config({
  publicKey: ...,
  style: {
    all: {
      fontSize: '16px',
      fontColor: 'green',
      placeholder: {
        color: 'gray !important',
        fontWeight: 'bold'
      }
    }
  }
});
Marty
  • 36
  • 4