@chargebee/chargebee-js-angular-wrapper
Advanced tools
Angular wrapper for Chargebee Components
For detailed examples: Click here
View live demo here
Install from npm:
npm install @chargebee/chargebee-js-angular-wrapper
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>
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);
});
};
}
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" [showTestCards]="true" [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);
});
};
}
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)
});
}
}
| 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 |
showTestCards | Add ability to show test cards on test sites | Boolean |
styles | Set of style customizations | Styles |
placeholder | Set of placeholders for the card fields | Placeholder |
| 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 |
| Props | Description | Datatype |
|---|---|---|
styles | Styles for inidividual field | Styles |
placeholder | Placeholder for the field | String |
| 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 |
Chargebee Components - JS Docs
Have any queries regarding the implementation? Reach out to support@chargebee.com
FAQs
Angular wrapper for Chargebee.js Components
We found that @chargebee/chargebee-js-angular-wrapper demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.