@openutility/acceptjs-angular-wrapper v5.0.0

acceptjs-angular-wrapper

exposing the Authorize.net Accept.js Host your own script from an Angular service.

This service exposed one method generatePaymentNonce which will return a string promise of the nonce. any script errors, or api errors should be returned in the promise rejection.

// file app.module.ts
import { NgModule } from '@angular/core';
import { TK_CONFIG, Config, AcceptJSService } from '@openutility/acceptjs-angular-wrapper';

/*
  Build the configuration file passing in the AcceptJS
  URL (testing or prod)
  and your apiLoginID and client key
//*/
const AcceptJSConfig: Config = {
  acceptjsUrl: 'mockAcceptjs.js'
  , apiLoginID: '123'
  , clientKey: '456'
};

@NgModule({
  providers: [
    {
      provide: TK_CONFIG,
      useValue: AcceptJSConfig
    },
    AcceptJSService
  ]
})
export class AppModule { }

// file app.component.ts
import { Component, OnInit  } from '@angular/core';
import { TK_CONFIG, Config, AcceptJSService } from '@openutility/acceptjs-angular-wrapper';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
    constructor(private _acceptJSSrv: AcceptJSService) { }

    async onSubmit(cc: CreditCard): void {
      try {
        const nonce = await this._acceptJSSrv.generatePaymentNonce(cc);
        // submit nonce to your server with payment amount
      } catch (ex) {
        console.error(ex);
      }
    }
}

Dynamic Config

// file app.module.ts
import { NgModule } from '@angular/core';
import { TK_CONFIG, Config, AcceptJSService } from '@openutility/acceptjs-angular-wrapper';
import { of } from 'rxjs';

const AcceptJSConfig: Config = {
  acceptjsUrl: 'mockAcceptjs.js'
  , apiLoginID: '123'
  , clientKey: '456'
};

@NgModule({
  providers: [
    {
      provide: TK_CONFIG,
      useFactory: () => of(AcceptJSConfig)  // note: you wouldn't code it this way, but just to show how it could work... :)
    },
    AcceptJSService
  ]
})
export class AppModule { }