@chargebee/chargebee-js-angular-wrapper NPM

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-wrapper

Usage

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" [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);
    });
  };
}

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
`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

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