npm package: @g2p/ngx-evo-payments
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.1.
Latest version: 0.1.1

# NgxEvoPayments

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.1.

## Installation

npm install @g2p/ngx-evo-payments

## Configuration

In your app.module.ts

```typescript
import { EvoPaymentsModule }  from '@g2p/ngx-evo-payments'
```
and configure it like this:

```typescript
EvoPaymentsModule.forRoot({
      merchantId: 'MERCHANT_ID',
      version: 59,
      apiPassword: 'YOUR_API_PASSWORD'
}),
```

## Usage

The current implementation works only with the [HostedSeesion](https://evopaymentsmexico.gateway.mastercard.com/api/documentation/apiDocumentation/session/version/59/api.html) flavour of the api

### component.html
create a simple angular form like, you can feel free to use libraries like angular-material

This package exposes the next directives
 - evoNumber
 - evoSecurityCode
 - evoExpiryMonth
 - evoExpiryYear
 - evoNameOnCard
which must be used together with **formControlName**
```html
<form [formGroup]="form" (ngSubmit)="submit()">
  <mat-card>
    <mat-form-field appearance="outline" floatLabel="always">
      <mat-label>CARD_NUMBER</mat-label>
      <input evoNumber formControlName="number" matInput type="tel" />
      <mat-error *ngIf="form.controls.number.errors?.evoNumber">INVALID_CARD</mat-error>
      <div style="width: 45px;" matSuffix [innerHtml]="brand"></div>
    </mat-form-field>
    <mat-form-field appearance="outline" floatLabel="always">
      <mat-label>CVC</mat-label>
      <input evoSecurityCode formControlName="securityCode" matInput type="tel" autocomplete="off" />
      <mat-error *ngIf="form.controls.securityCode.errors?.evoSecurityCode">VALIDATOR_CVC</mat-error>
    </mat-form-field>
    <mat-form-field appearance="outline" floatLabel="always">
      <mat-label>EXPIRATION_MONTH</mat-label>
      <!-- <input formControlName="expirationDate" matInput type="text" ccExp autocomplete="cc-exp"/> -->
      <input formControlName="expiryMonth" type="number" evoExpiryMonth matInput/>
      <mat-error *ngIf="form.controls.expiryMonth.errors?.evoExpiryMonth">CARD_EXPIRED</mat-error>
    </mat-form-field>

    <mat-form-field appearance="outline" floatLabel="always">
      <mat-label>EXPIRATION_YEAR</mat-label>
      <input formControlName="expiryYear" type="number" evoExpiryYear matInput/>
      <mat-error *ngIf="form.controls.expiryYear.errors?.evoExpiryYear">CARD_EXPIRED</mat-error>
    </mat-form-field>

    <mat-form-field appearance="outline" floatLabel="always">
      <mat-label>CARDHOLDER_NAME</mat-label>
      <input evoNameOnCard formControlName="nameOnCard" matInput type="text"/>
      <mat-error *ngIf="form.controls.nameOnCard.errors?.evoNameOnCard">REQUIRED</mat-error>
    </mat-form-field>
    <mat-card-actions>
      <button [disabled]="form.invalid" mat-raised-button type="submit">DALE</button>
      <button mat-raised-button type="button" (click)="newSession()">New Session</button>
    </mat-card-actions>
  </mat-card>
</form>


```

### component.ts
Due to limitation in the evo API we cannot add validators, but the service will expose the EVO errors the angular way.
```typescript
...
constructor(
  ...,
  private evo: EVOHostedSession,
) {
  ...
  //Get notified when evo finalizes initialization
  this.loading$ = this.evo.loading();
  //You can use all the normal validator that you would
  this.form = builder.group({
    number: [''],
    nameOnCard: [''],
    expiryMonth: [''],
    expiryYear: [''],
    securityCode: [''],
  })
  ...
  ngAfterViewInit() {
    ...
    //You initialize the service and get a session in return
    //All components will be initialized and ready to use
    this.evo
      .cofigure({
        interaction: {
          displayControl: {
            formatCard: 'EMBOSSED',
            invalidFieldCharacters: 'REJECT'
          }
        },
        frameEmbeddingMitigation: ['javascript']
      })
      .subscribe(fromSessionUpdate => {
        console.log(fromSessionUpdate)
      })
      ...
      //If you want to get the card logo you can use this
      // the brand proporty is a safe svg that you can use with innerHtml
      this.evo
      .onCardTypeChange()
      .subscribe(result => this.brand = result.brand)
      ...
      //Want to change focus when valid?
      this.evo.autoFocus(this.form, [
        'number=>expiryMonth',
        'expiryMonth=>expiryYear',
        'expiryYear=>securityCode',
        'securityCode=>nameOnCard'
      ])
      .subscribe()
      //Please dont forget to unsubscribe
  }
}
```

## Support

Please contact me at gerard2perez@outlook.com if you need support in your integration
## Compatibility

This package is written with Angular 12 and is known to work with Angular 8 and tested with Evo API version 59