Support for Angular 11

[Bjarne Gerhardt-Pedersen]

Installing the package in Angular 11 project, NPM gives dependency error for Angular 10.1.1

If force installing the library, and implemented the Module, an error occurs in the web console

[Dinesh]

Hi @bgpedersen, This error is due to Chargebee.js trying to initialise before document.body is loaded. You can do the following to solve this.

Add Chargebee Angular module in app.module.ts:

import { ChargebeeJsAngularWrapperModule } from '@chargebee/chargebee-js-angular-wrapper';
...
@NgModule({
  ...
  imports: [
    ...
    ChargebeeJsAngularWrapperModule
  ],
  ...
})

Initialise Chargebee.js on constructor of your component: app.component.ts

export class AppComponent {
  cardComponent = null;
  ...
  constructor() {
    window['Chargebee'].init({
      site: 'your-site',
      publishableKey: 'publishable-key'
    })
  }

  onReady = (cardComponent) => {
    this.cardComponent = cardComponent;
  }

  onTokenize = (event) => {
    event.preventDefault();
    
    this.cardComponent.tokenize().then(data => {
      console.log('chargebee token', data.token)
    });
  }
}

app.component.html

  <div cbCardField id='card-field' (ready)="onReady($event)"></div>
  <button (click)="onTokenize($event)">Submit</button>

Also, @chargebee/chargebee-js-angular-wrapper is still on Angular 10, however, there should not be any compatibility issues when using with the latest versions of angular.

We'll bump the angular peer dependencies to the latest version soon.

[Martin Hombach]

@bgpedersen is this issue still open? If not, please close.