Nonstop Progressive Marxism

    @chargebee/chargebee-js-angular-wrapper
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    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'
          [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
    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

    Reference:

    Chargebee Components - JS Docs

    Support

    Have any queries regarding the implementation? Reach out to support@chargebee.com

    Install

    npm i @chargebee/chargebee-js-angular-wrapper

    DownloadsWeekly Downloads

    1,186

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    278 kB

    Total Files

    31

    Last publish

    Collaborators

    • chargebee