Chargebee JS Angular Wrapper
Angular wrapper for Chargebee Components
Examples
For detailed examples: Click here
Live Demo
View live demo here
Installation
Install from npm:
npm install @chargebee/chargebee-js-angular-wrapperUsage
Chargebee Components requires you to initialize chargebee js with site and publishableKey
Wondering where to obtain your publishable API key? Refer here
In your index.html:
<html>
<head>
...
<script src="https://js.chargebee.com/v2/chargebee.js"></script>
<script>
Chargebee.init({
site: 'your-site',
publishableKey: 'your-publishable-key'
})
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>Basic usage
In your angular component
component.html
<div class="cell example example3" id="example-3" style="padding: 1em">
<form>
<div cbCardField id='card-field' (ready)="onReady($event)"></div>
<button (click)="onTokenize($event)">Submit</button>
</form>
</div>component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
cardComponent = null;
onReady = (cardComponent) => {
this.cardComponent = cardComponent;
}
onTokenize = (event) => {
event.preventDefault();
this.cardComponent.tokenize().then(data => {
console.log('chargebee token', data.token)
});
}
}A more complex example:
component.html
<div class="cell example example3" id="example-3" style="padding: 1em">
<form>
<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>
<div id="errors">{{errorMessage}}</div>
<button id='submit-button' (click)="onSubmit($event)">Pay 25$</button>
</form>
</div>component.ts
import { Component, ChangeDetectorRef, HostListener } from '@angular/core';
declare var Chargebee;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
errorMessage = '';
changeDetectorRef: ChangeDetectorRef;
cardComponent = null;
constructor(changeDetectorRef: ChangeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
}
errors = {};
classes = {
focus: 'focus',
complete: 'complete-custom-class',
invalid: 'invalid',
empty: 'empty',
};
fonts = [
'https://fonts.googleapis.com/css?family=Open+Sans'
];
styles = {
base: {
color: '#fff',
fontWeight: 600,
fontFamily: 'Quicksand, Open Sans, Segoe UI, sans-serif',
fontSize: '16px',
fontSmoothing: 'antialiased',
':focus': {
color: '#424770'
},
'::placeholder': {
color: '#9BACC8'
},
':focus::placeholder': {
color: '#CFD7DF'
}
},
invalid: {
color: '#fff',
':focus': {
color: '#FA755A'
},
'::placeholder': {
color: '#FFCCA5'
}
}
};
onReady = (cardComponent) => {
this.cardComponent = cardComponent;
}
setFocus(field) {
field.focus();
}
onChange = (status) => {
let errors = {
...this.errors,
[status.field]: status.error
}
this.errors = errors
let {message} = Object.values(errors).filter(message => !!message).pop() || {}
this.errorMessage = message
this.changeDetectorRef.detectChanges();
}
onSubmit = (event) => {
event.preventDefault();
this.cardComponent.tokenize().then(data => {
console.log('chargebee token', data.token)
});
}
}3DS Authorization
In your angular component
component.html
<div class="cell example example3" id="example-3" style="padding: 1em">
<form>
<div cbCardField id='card-field' (ready)="onReady($event)"></div>
<button (click)="authorize($event)">Submit</button>
</form>
</div>component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
cardComponent = null;
intent = null;
additionalData = {
// Additional data to improve the chances of frictionless flow
}
onReady = (cardComponent) => {
this.cardComponent = cardComponent;
}
createPaymentIntent() {
// make ajax call to your server to create a paymentIntent
...
this.intent = paymentIntent
}
authorize = (event) => {
event.preventDefault();
this.cardComponent.authorizeWith3ds(this.intent, this.additionalData).then(authorizedIntent => {
console.log('3DS Authorization success', authorizedIntent.id)
});
}
}Directives and APIs
cbCardField Directive (docs)
| Attributes | Description | Datatype |
|---|---|---|
fonts |
An array of font faces or links | Fonts |
classes |
Set of CSS classnames that get substituted for various events | Classes |
locale |
Language code | Locale |
styles |
Set of style customizations | Styles |
placeholder |
Set of placeholders for the card fields | Placeholder |
Events (docs)
| Props | Description | Arguments |
|---|---|---|
(ready) |
Triggers when component is mounted and ready | Field |
(change) |
Triggers for every state change | Field State |
(focus) |
Triggers when component is focused | Field State |
(blur) |
Triggers when component is blurred | Field State |
Individual Field directives (docs)
- cbNumberField
- cbExpiryField
- cbCvvField
| Props | Description | Datatype |
|---|---|---|
styles |
Styles for inidividual field | Styles |
placeholder |
Placeholder for the field | String |
Event Props (docs)
| Props | Description | Arguments |
|---|---|---|
(ready) |
Triggers when component is mounted and ready | Field |
(change) |
Triggers for every state change | Field State |
(focus) |
Triggers when component is focused | Field State |
(blur) |
Triggers when component is blurred | Field State |
Reference:
Chargebee Components - JS Docs
Support
Have any queries regarding the implementation? Reach out to support@chargebee.com