# @chargebee/chargebee-js-angular-wrapper > Angular wrapper for Chargebee.js Components Latest version **5.0.3** (published 2025-10-27) · MIT license · 0 weekly downloads ## Install ```sh npm install @chargebee/chargebee-js-angular-wrapper pnpm add @chargebee/chargebee-js-angular-wrapper yarn add @chargebee/chargebee-js-angular-wrapper bun add @chargebee/chargebee-js-angular-wrapper ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. ## Facts | | | |---|---| | Version | 5.0.3 | | Published | 2025-10-27 | | First published | 2019-04-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 133.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 24 | | Author | Vivek | | Maintainers | chargebee | | Keywords | chargebee, chargebee.js, chargebee components, chargebee angular, chargebee angular wrapper, chargebee.js angular | ## Links - npm: https://www.npmjs.com/package/@chargebee/chargebee-js-angular-wrapper - Repository: https://github.com/chargebee/chargebee-js-wrappers - Homepage: https://github.com/chargebee/chargebee-js-wrappers/tree/master/chargebee-js-angular#readme - Issues: https://github.com/chargebee/chargebee-js-wrappers/issues - npm.io page: https://npm.io/package/@chargebee/chargebee-js-angular-wrapper ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^2.3.0 ## Recent versions - 5.0.3 (latest) — 2025-10-27 - 5.0.0 — 2025-01-06 - 4.0.0 — 2024-07-11 - 3.0.0 — 2024-04-30 - 2.0.0 — 2023-08-02 - 1.0.1 — 2023-01-10 - 1.0.0 — 2022-12-15 - 0.3.1 — 2021-03-26 - 0.3.0 — 2020-10-29 - 0.2.0 — 2019-09-07 - 0.1.4 — 2019-05-17 - 0.1.3 — 2019-05-09 - 0.1.2 — 2019-04-29 ## README # Chargebee JS Angular Wrapper Angular wrapper for Chargebee Components ## Examples For detailed examples: [Click here](https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/angular-app#readme) ## Live Demo View live demo [here](https://www.recur.in/components-examples/angular/#/example1) ## Installation Install from npm: ```bash npm install @chargebee/chargebee-js-angular-wrapper ``` ## Usage Chargebee Components requires you to initialize chargebee js with `site` and `publishableKey` > Wondering where to obtain your publishable API key? [Refer here](https://www.chargebee.com/docs/api_keys.html) In your `index.html`: ```html ...

``` ### Basic usage In your angular component component.html ```html

``` component.ts ```js import { Component } from '@angular/core'; declare var Chargebee; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], standalone: true, imports: [ RouterOutlet, CardFieldDirective, CvvFieldDirective, NumberFieldDirective, ExpiryFieldDirective, ], }) export class AppComponent { cardComponent = null; constructor(...) { ... Chargebee.init({ site: 'your-site' publishableKey: 'your-publishable-key' }) } 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 ```html

``` component.ts ```js import { Component, ChangeDetectorRef, HostListener } from "@angular/core"; declare var Chargebee; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], standalone: true, imports: [ RouterOutlet, CardFieldDirective, CvvFieldDirective, NumberFieldDirective, ExpiryFieldDirective, ], }) 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 ```html

``` component.ts ```js import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], standalone: true, imports: [ RouterOutlet, CardFieldDirective, CvvFieldDirective, NumberFieldDirective, ExpiryFieldDirective, ], }) 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](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-component-object)) | Attributes | Description | Datatype | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | `fonts` | An array of font faces or links | [Fonts](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | | `classes` | Set of CSS classnames that get substituted for various [events](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on) | [Classes](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | | `locale` | Language code | [Locale](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | | `showTestCards` | Add ability to show test cards on test sites | Boolean | | `styles` | Set of style customizations | [Styles](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | | `placeholder` | Set of placeholders for the card fields | [Placeholder](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-3) | ##### Events ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on)) | Props | Description | Arguments | | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | `(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) | | `(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | | `(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | | `(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | #### Individual Field directives ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object)) - cbNumberField - cbExpiryField - cbCvvField | Props | Description | Datatype | | ------------- | ---------------------------- | -------------------------------------------------------------------------------------------------- | | `styles` | Styles for inidividual field | [Styles](http://localhost:8081/checkout-portal-docs/components-fields-reference.html#parameters-5) | | `placeholder` | Placeholder for the field | String | ##### Event Props ([docs](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#on-2)) | Props | Description | Arguments | | ---------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | `(ready)` | Triggers when component is mounted and ready | [Field](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#card-field-object) | | `(change)` | Triggers for every state change | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | | `(focus)` | Triggers when component is focused | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | | `(blur)` | Triggers when component is blurred | [Field State](https://chargebee.com/checkout-portal-docs/components-fields-reference.html#parameters-6) | ## Reference: [Chargebee Components - JS Docs](https://chargebee.com/checkout-portal-docs/components-fields-integrations.html#quick-start-integration) ## Support Have any queries regarding the implementation? Reach out to [support@chargebee.com](mailto:support@chargebee.com) --- _Source: https://npm.io/package/@chargebee/chargebee-js-angular-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._