How add custom styling to hosted fields?

Question

I'm trying to change the font-family and colour for the card#, exp, cvv, and submit fields in a cardForm. I'd also like to make the field widths responsive.

I'm using vue/quasar, and am using the format below for the customization.

Basically, I want to know how to refer to and customize each of the fields in the styles: { // Your styles } section.

I'm sure it's pretty basic, but I'm stuck and could really use a hand. Many thanks!

const cardForm = GlobalPayments.ui.form({
  fields: {
    "card-number": {
      placeholder: "•••• •••• •••• ••••",
      target: "#credit-card-card-number"
    },
    "card-expiration": {
      placeholder: "MM / YYYY",
      target: "#credit-card-card-expiration"
    },
    "card-cvv": {
      placeholder: "•••",
      target: "#credit-card-card-cvv"
    },
    "submit": {
      value: "Submit",
    }
  },
  styles: {
    // Your styles
  }
});

Answer 1

Should be in a format like below:

styles: {
                // Your styles
                'input[type=tel]': {
                    'color': '{{ ($company->companyDetail->text_field_font_color) ? $company->companyDetail->text_field_font_color : '#000000'}}',
                    'border-radius': '8px',
                    'background-color': '{{ ($company->companyDetail->text_field_bg_color) ? $company->companyDetail->text_field_bg_color : '#ffffff'}}',
                    'margin-top': '0.4em',
                    "font-family": 'sans-serif',
                    "font-weight": '400',
                    "font-size": '80%',
                    // "display": 'block',
                    "height": '30px',
                    // "width": '75%',
                    "padding": '5px 10px',
                    "outline": '0',
                    "border": '1px solid{{ ($company->companyDetail->text_field_font_color) ? $company->companyDetail->text_field_font_color : '#000000'}}'
                },
                "button[type=button]": {
                    "background-color": '{{ ($company->companyDetail->button_bg_color) ? $company->companyDetail->button_bg_color : '#1ece82'}}',                        "border-radius": '8px',
                    "border": '1px solid #666',
                    "font-weight": 'bold',
                    "color": '{{ $textButtonColor }}',
                    "padding-top": "0.5rem",
                    "padding-bottom": "0.5rem",
                    "padding-left": "1rem",
                    "padding-right": "1rem",
                },
                "button[type=button]:hover": {
                    "background-color": '{{ ($company->companyDetail->button_hover_bg_color) ? $company->companyDetail->button_hover_bg_color : '#636565'}}',
                    "color": '{{ $textButtonHoverColor }}'
                },
                // '#heartland-field[name=cardCvv]' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/cvv1.png?raw=true) no-repeat right',
                //     'background-size' :'63px 40px',
                // },
                // 'input#heartland-field[name=cardNumber]' : {
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/[email protected]?raw=true) no-repeat right',
                //     'background-size' :'55px 35px'},
                // '#heartland-field.invalid.card-type-visa' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/[email protected]?raw=true) no-repeat right',
                //     'background-size' :'83px 88px',
                //     'background-position-y':'-44px'
                // },
                // '#heartland-field.valid.card-type-visa' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/[email protected]?raw=true) no-repeat right top',
                //     'background-size' :'82px 86px'
                // },
                // '#heartland-field.invalid.card-type-discover' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/[email protected]?raw=true) no-repeat right',
                //     'background-size' :'85px 90px',
                //     'background-position-y' : '-44px'
                // },
                // '#heartland-field.valid.card-type-discover' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/[email protected]?raw=true) no-repeat right',
                //     'background-size' :'85px 90px',
                //     'background-position-y' : '1px'
                // },
                // '#heartland-field.invalid.card-type-amex' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/[email protected]?raw=true) no-repeat right',
                //     'background-size' :'50px 90px',
                //     'background-position-y':'-44px'
                // },
                // '#heartland-field.valid.card-type-amex' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/[email protected]?raw=true) no-repeat right top',
                //     'background-size' :'50px 90px'
                // },
                // '#heartland-field.invalid.card-type-mastercard' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-mastercard.png?raw=true) no-repeat right',
                //     'background-size' :'62px 105px',
                //     'background-position-y':'-52px'
                // },
                // '#heartland-field.valid.card-type-mastercard' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-mastercard.png?raw=true) no-repeat right',
                //     'background-size' :'62px 105px',
                //     'background-position-y':'-1px'
                // },
                // '#heartland-field.invalid.card-type-jcb' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/[email protected]?raw=true) no-repeat right',
                //     'background-size' :'55px 94px',
                //     'background-position-y':'-44px'
                // },
                // '#heartland-field.valid.card-type-jcb' :{
                //     'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/[email protected]?raw=true) no-repeat right top',
                //     'background-size' :'55px 94px',
                //     'background-position-y':'2px'
                // },
                // 'input#heartland-field[name=cardNumber]::-ms-clear' : {
                //     'display':'none'
                // }
                ".card-cvv": {
                    background: `transparent url({{ url('/images/cards/cvv1.png') }}) no-repeat right`,
                    "background-size": "63px 40px",
                },
                ".card-cvv.card-type-amex": {
                    background: `transparent url({{ url('/images/cards/cvv2.png') }}) no-repeat right`,
                    "background-size": "63px 40px",
                },
                ".card-number": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right`,
                    "background-size": "55px 35px",
                },
                ".card-number.invalid.card-type-amex": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right`,
                    "background-position-y": "-44px",
                    "background-size": "50px 90px",
                },
                ".card-number.invalid.card-type-discover": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right`,
                    "background-position-y": "-44px",
                    "background-size": "85px 90px",
                },
                ".card-number.invalid.card-type-jcb": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right`,
                    "background-position-y": "-44px",
                    "background-size": "55px 94px",
                },
                ".card-number.invalid.card-type-mastercard": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right`,
                    "background-position-y": "-52px",
                    "background-size": "62px 105px",
                },
                ".card-number.invalid.card-type-visa": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right`,
                    "background-position-y": "-44px",
                    "background-size": "83px 88px",
                },
                ".card-number.valid.card-type-amex": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right top`,
                    "background-size": "50px 90px",
                },
                ".card-number.valid.card-type-discover": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right`,
                    "background-position-y": "1px",
                    "background-size": "85px 90px",
                },
                ".card-number.valid.card-type-jcb": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right top`,
                    "background-position-y": "2px",
                    "background-size": "55px 94px",
                },
                ".card-number.valid.card-type-mastercard": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right`,
                    "background-position-y": "-1px",
                    "background-size": "62px 105px",
                },
                ".card-number.valid.card-type-visa": {
                    background: `transparent url({{ url('/images/cards/[email protected]') }}) no-repeat right top`,
                    "background-size": "82px 86px",
                },
            }