search

richnologies / ngx-stripe

Angular 6+ wrapper for StripeJS
MIT License
217 stars 77 forks source link

[BUG] Card icon not visible #245

Closed corentingosselin closed 4 months ago

corentingosselin commented 6 months ago

Describe the bug

The icon card is not visible with this configuration:

cardOptions: StripeCardElementOptions = {
    iconStyle: 'default',
    hideIcon: false,
    style: {
      base: {
        iconColor: 'white',
        color: 'white',
        fontWeight: '300',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '18px',
        '::placeholder': {
          color: '#CFD7E0',
        },
      },
    },
  };

Capture d’écran 2024-02-23 à 17 29 36

If I remove the is-hidden class from chrome inspector it works:

Capture d’écran 2024-02-23 à 17 45 21

Version ngx-stripe: 17.1.1

richnologies commented 4 months ago

Hey @corentingosselin,

Sorry for the delay, but just for future reference, when using Card Number, Card Expiry and Card CVV separately, the option is showIcon and not hideIcon. This is a Stripe API, not Ngx Stripe specific. I think the reason is, showing the icon is the default behaviour for the Stripe Card Element, but not for the Stripe Card Number Element.

When you're using the three elements separately options should be of type StripeCardNumberElementOptions and not StripeCardElementOptions