An Angular wrapper for Iugu gatway for JavaScript.
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
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 {}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
) {}
}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 ...]/
}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.
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
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);
}
}Please, open an issue following one of the issues templates. We will do our best to fix them.
Distributed under the MIT license. See LICENSE for more information. This project was generated with Angular CLI version 11.2.1.