Quick Start Integration

Card Components

Inserting chargebee.js script in your application

Include the following script in your HTML page. You need to do this only once per page

<script src="https://js.chargebee.com/v2/chargebee.js"></script>
chargebee.js script should be loaded through Chargebee server for PCI compliance. DO NOT download and load it via your server.

Using Chargebee JS wrappers

If you are planning to integrate using Angular, React or Vue, we suggest you to include our wrappers as dependency in your package.json file. This can speed up your integration.

​​Initializing a Chargebee instance

Inside your JavaScript code, initialize chargebee with the publishable key once the page is loaded and get 'chargebee instance' object. This object is used further to create components.

  • jQuery
  • vue

Integrating card component in Default mode

Adding HTML

Create a container element in your HTML to mount our Component. For Angular, Vue and React, use the respective Components provided by us.

  • jQuery
  • vue
  • angular
  • react

Adding JavaScript

You need to write JavaScript code to mount our Components and for tokenization(getting Chargebee's temp token)

  • Mounting
    For Angular, React and Vue, our JS wrappers would automatically mount the Components. For other types of integrations, you need to manually mount them.

  • Tokenizing

  • jQuery
  • vue
  • angular
  • react

Integrating card component in Fields mode

Adding HTML

Create container elements in your HTML to mount our components. For Angular, Vue and React, the corresponding wrappers will create the container elements for you.

  • jQuery
  • vue
  • angular
  • react

Adding JavaScript

You need to write JavaScript code to mount all fields and for tokenization(getting Chargebee's temp token)

  • Mounting
    For Angular, React and Vue, our js wrappers would automatically mount the component. For other types of integrations, you need to manually mount the component.

  • Tokenizing

  • jQuery
  • vue
  • angular
  • react

Using Chargebee JS wrappers

Angular

The card component and its fields are available as directives in Angular wrapper. 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>

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>

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.

Default Mode

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

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>

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.

Default Mode

  <card-component ref="cardComponent" />

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>

Examples

Live Example

Click here to view live example

View Code on Github