npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-iugu

v1.2.1

Published

An Angular wrapper for Iugu gatway for JavaScript.

Downloads

9

Readme

ngx-iugu

NGX-Iugu

Lib CI npm version

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.