Styling

Each element is actually mounted in an iframe under the hood. Because of this, Elements are unlikely to work with any existing styling and component frameworks that you may have. Despite this, you should still be able to fully configure an Element to seamlessly blend in with the rest of your site. Fully customizing Elements consists of configuring the Element with options, applying styles to the Element container, and responding to events.

Why iFrames?

We recognize that the use of iframes makes styling an Element more difficult, but they shift the burden of securely handling payment data to Stripe and provide an easy way to keep your site compliant with industry regulation.

import { Component, OnInit, ViewChild } from '@angular/core';

import { StripeCardComponent } from 'ngx-stripe';
import {
  StripeCardElementOptions,
  StripeElementsOptions
} from '@stripe/stripe-js';

@Component({
  selector: 'app-styling-example',
  template: `
    <ngx-stripe-card [options]="cardOptions"></ngx-stripe-card>
  `,
})
export class StylingExampleComponent {
  @ViewChild(StripeCardComponent) card: StripeCardComponent;

  cardOptions: StripeCardElementOptions = {
    iconStyle: 'solid',
    style: {
      base: {
        iconColor: '#c4f0ff',
        color: '#fff',
        fontWeight: 500,
        fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
        fontSize: '16px',
        fontSmoothing: 'antialiased',
        ':-webkit-autofill': {color: '#fce883'},
        '::placeholder': {color: '#87bbfd'}
      },
      invalid: {
        iconColor: '#ffc7ee',
        color: '#ffc7ee'
      }
    }
  };
}

Element Container

Style the container you mount an Element to as if it were an <input> on your page. For example, to control padding and border on an Element, set these properties on the container. This is usually done by re-using the classes that you have applied to your DOM <input> elements.

The Element Container API allows to specify a class name for container of the input in the iframe. You can set this using the option classes in the element options, or just use the containerClass in the element:

import { Component, OnInit, ViewChild } from '@angular/core';

import { StripeCardComponent } from 'ngx-stripe';
import {
  StripeCardElementOptions,
  StripeElementsOptions
} from '@stripe/stripe-js';

@Component({
  selector: 'app-styling-example',
  template: `
    <ngx-stripe-card containerClass="example"></ngx-stripe-card>
  `,
})
export class StylingExampleComponent {
  @ViewChild(StripeCardComponent) card: StripeCardComponent;
}

The default value is StripeElement, and there are also some subclasses:

• .StripeElement--complete

• .StripeElement--empty

• .StripeElement--focus

• .StripeElement--invalid

• .StripeElement--webkit-autofill (Chrome and Safari only)