ngx-iugu

An Angular wrapper for Iugu gatway for JavaScript.

Demo

Iugu Docs

📲 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);
  }
}

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

License

Distributed under the MIT license. See LICENSE for more information. This project was generated with Angular CLI version 11.2.1.