Frontend Capabilities

# Support for JS framework

# React

Check the React API Reference for the complete list of props that can be passed to the React Components. For more details on the React wrapper click here (opens new window).

# Default Mode

  <CardComponent ref={this.cardRef} onChange={this.onChange}/>
1

# Fields Mode

<CardComponent className="field" 
  fonts={fonts} 
  classes={classes} 
  locale={locale} 
  styles={styles} 
  ref={this.CardRef} 
  onReady={this.onReady}
>
  <CardNumber placeholder='4111 1111 1111 1111' className="field empty" onChange={this.onChange} onReady={this.onReady} />
  <CardExpiry placeholder='MM / YY' className="field empty" onChange={this.onChange} />
  <CardCVV placeholder='CVV' className="field empty" onChange={this.onChange} />
</CardComponent>
1
2
3
4
5
6
7
8
9
10
11
12

# Vue

Check the Vue API Reference for the complete list of props that can be passed to the Vue Components. or more details on the Vue wrapper click here (opens new window).

# Default Mode

  <card-component ref="cardComponent" />
1

# Fields Mode

  <card-component class="fieldset" ref="cardComponent" 
    :fonts="fonts" 
    :styles="styles" 
    :locale="locale" 
    :classes="classes" 
    @ready="onReady"
    @change="onChange"
  >
    <card-number class="field empty" @focus="onFocus"  :placeholder="'4111 1111 1111 1111'" />
    <card-expiry class="field empty" @focus="onFocus"  :placeholder="'MM / YY'" />
    <card-cvv class="field empty" @focus="onFocus" :placeholder="'CVV'" />
  </card-component>
1
2
3
4
5
6
7
8
9
10
11
12

# Angular

The card component and its fields are available as directives in Angular wrapper (opens new window). Check the Angular API Reference for full list of attributes that can set on the directives.

# Default Mode

  <div cbCardField id='card-field' (ready)="onReady($event)"></div>
1

# Fields Mode

  <div cbCardField id='card-field' 
    [fonts]="fonts"
    [styles]="styles"
    locale='en'
    [classes]="classes"
    (ready)="onReady($event)"
  >
    <div id='card-number' cbNumberField class="field empty" placeholder="4111 1111 1111 1111" 
      (ready)="setFocus($event)"
      (change)="onChange($event)"
    ></div>
    <div id='card-expiry' cbExpiryField class="field empty" placeholder="MM / YY"
      (change)="onChange($event)"
    ></div>
    <div id='card-cvv' cbCvvField class="field empty" placeholder="CVV"
      (change)="onChange($event)"
    ></div>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

← Examples →