@g2p/ngx-evo-payments

NgxEvoPayments

This project was generated with Angular CLI version 12.1.1.

Installation

npm install @g2p/ngx-evo-payments

Configuration

In your app.module.ts

import { EvoPaymentsModule }  from '@g2p/ngx-evo-payments'

and configure it like this:

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

Usage

The current implementation works only with the HostedSeesion 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

<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.

...
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 [e-mail] 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