@chargebee/chargebee-js-angular-wrapper

v4.0.0

Published

4 months ago

Angular wrapper for Chargebee.js Components

Downloads

7,260

0High
0Medium
0Low

chargebee

chargebee chargebee.js chargebee components chargebee angular chargebee angular wrapper chargebee.js angular

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 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Chargebee JS Angular Wrapper

Examples

Live Demo

Installation

Usage

Basic usage

A more complex example:

3DS Authorization

Directives and APIs

cbCardField Directive (docs)

Events (docs)

Individual Field directives (docs)

Event Props (docs)

Reference:

Support