ngx-okra v0.0.4

okra-ionic

This is an ionic module that abstracts the complexity of using okra with Ionic/Angular+.

USAGE

1. Install the module

npm i ngx-okra

2. Import the module

In your app.module.ts or any module where the component or directive would be used like so:

import { NgModule } from '@angular/core';

import { NgxOkraModule } from 'ngx-okra';
...

@NgModule({
  imports: [
    NgxOkraModule.forRoot('public_key_xxxxxxxxxxxxxxxxxxxxxxxx'),
  ]
})

export class AppModule {}

3. Implement in your project

There are two available options

• AngularOkraComponent: Renders a button which when clicked loads okra Inline

    <okra-button
      [customStyle]="{'font-size.px':14, 'color' : 'green', 'background-color' : 'coral'}"
      [clientName]="'bassey'" 
      [env]="'sandbox'" 
      [callback_url]="'www.my-webhook.com'"
      [products]="['auth', 'transactions', 'balance', 'income', 'identity']" (onClose)="okraCancel()"
      (onSuccess)="okraDone()">
      Open Okra
    </okra-button>

• AngularOkraDirective: A directive that loads okra inline when clicked

  <button
    okraButton
      [clientName]="'bassey'" 
      [env]="'sandbox'" 
      [callback_url]="'www.my-webhook.com'"
      [products]="['auth', 'transactions', 'balance', 'income', 'identity']" (onClose)="okraCancel()"
      (onSuccess)="okraDone()">
    Open okra
  </button>

And then in your component.ts

  import { Component, OnInit } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    reference = '';
    constructor() {}

    okraInit() {
      console.log('Okra initialized');
    }

    okraDone(ref: any) {
      this.title = 'Okra successfull';
      console.log(this.title, ref);
    }

    okraCancel() {
      console.log('Okra cancelled');
    }
  }
  

OkraOptions

For more information checkout okra's documentation

Contributing

Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.

License

The MIT License (MIT). Please see License File for more information.