Ngx-iugu NPM | npm.io

ngx-iugu

NGX-Iugu

An Angular wrapper for Iugu gatway for JavaScript.

📲 Installation

First time using Iugu? Create your Iugu account, if you don’t have one already.

First you need to install the npm module:

npm i ngx-iugu --save

Usage

1. Import the `NgxIuguModule`:

Finally, you can use ngx-iugu in your Angular project. You have to import NgxIuguModule.forRoot() in the root NgModule of your application.

The forRoot static method is a convention that provides and configures services at the same time. Make sure you only call this method in the root module of your application, most of the time called AppModule. This method allows you to configure the NgxIugu by specifying a publish key and/or a path for JS SDK.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { NgxIuguModule } from "ngx-iugu";

@NgModule({
  imports: [
    BrowserModule,
    NgxIuguModule.forRoot({
      CDN: string,
      testMode: boolean,
      accountID: string,
      autoInicialize: boolean,
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Import the `NgxIuguService` and `NgxIuguValidationsService`

import {
  NgxIuguService,
  IuguCreditCard,
  IuguResponse,
  NgxIuguValidationsService,
} from "projects/ngx-iugu/src/public-api";

@Component({
  selector: "dd-form",
  templateUrl: "./form.component.html",
  styleUrls: ["./form.component.scss"],
})
export class FormComponent implements OnInit {
  creditCardIugu: IuguResponse;
  creditCard!: FormGroup;

  constructor(
    private IuguValidationsService: NgxIuguValidationsService,
    private IuguService: NgxIuguService,
    private formBuilder: FormBuilder
  ) {}
}

3. use the validation function in your form

export class FormComponent implements OnInit {
  //[...Code ...]/
  async ngOnInit(): Promise<void> {
    this.creditCard = this.formBuilder.group(
      {
        fullName: ["", [Validators.required]],
        validate: [
          "",
          [Validators.required],
          [this.IuguValidationsService.asyncValidateExpiration],
        ],
        cardNumber: [
          "",
          [Validators.required],
          [this.IuguValidationsService.asyncValidateCreditCardNumber],
        ],
        securityCode: ["", [Validators.required]],
      },
      {
        validator: this.IuguValidationsService.validateCVV(
          "cardNumber",
          "securityCode"
        ),
      }
    );
  }
  //[...Code ...]/
}

Validations functions for reactive forms

A classe NgxIuguValidationsService nos fornece uma abstração das funções disponibilizadas pela Iugu, com funções que podem ser usadas para validação dos campos de um formulário reativo.

Functions for validations

All validation functions add an error to the control of the example form form.controls[securityCode].setErrors({ invalidCVV: true });

Functions	Error name	Description
asyncValidateCreditCardNumber	invalidNumber	Adds an error to control when network credit card number is invalid
asyncValidateAccountID	invalidAccountId	Adds error when accountId is invalid
validateCVV	withoutCreditCardNumber / invalidCVV	The cvv field its validation depends also on the credit card number, so we have 2 possible errors when the cvv is invalid or when the credit card number was not filled
asyncValidateExpiration	invalidExpiration	validates the card expiration field an observation is that the field used in this function must contain the month and year, example `12/33` or `12/2033`

The validateCVV function recebe dois parametros sendo eles o nome do control usados para o numero do cartão de credito e para o cvv repectivamentes

4. Make your token Iugu

export class FormComponent implements OnInit {
  //[...Code ...]/
  async submit(): Promise<void> {
    const creditCard = this.creditCard.getRawValue();
    const [firstName, surName] =
      this.IuguService.Iugu.utils.getFirstLastNameByFullName(
        creditCard.fullName
      );
    const [cardExpirationMonth, cardExpirationYear] =
      this.IuguService.Iugu.utils.getMonthYearByFullExpiration(
        creditCard.validate
      );

    const params: IuguCreditCard = {
      ...creditCard,
      cardExpirationMonth,
      cardExpirationYear,
      firstName,
      surName,
    };

    const data = await this.IuguService.createTokenByObject(params);
  }
}