angular8-okra

okra-angular

This is an angular module that abstracts the complexity of using okra with Angular2+.

USAGE

1. Install the module

npm install --save angular8-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 { Angular8OkraModule } from 'angular8-okra';
...

@NgModule({
  imports: [
    Angular8OkraModule.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
    [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
  </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

Name	Type	Required	Default Value	Description
callback_url	string	true	undefined	This is your webhook to which okra sends the clients data to.
key	String	false	undefined	Your public key from Okra.
products	ArrayList<Enums.Product>	true	undefined	The Okra products you want to use with the widget. list of products include: 'auth', 'transactions', 'balance', 'income', 'identity'
env	Enums.Environment	true	undefined
clientName	String	true	undefined	Name of the customer using the widget on the application
user	object	false	undefined	This contains some information of the user using the okra widget {fullname: 'USER_FULL_NAME',email: 'USER_EMAIL', bvn: 'USER_BVN'}

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.