fountainpay-angular v1.0.0

Fountainpay-v1 Angular Library

Introduction

The Angular SDK helps you create seamless payment experiences in your Angular mobile or web app. By connecting to our modal, you can start collecting payment in no time.

Available features include:

• Collections: Card, Account, Mobile money, Direct Debit, Bank Transfers, NQR.
• Recurring payments: Tokenization and Subscriptions.

Table of Contents

1. Requirements
2. Installation
3. Initialization
4. Usage
5. Support
6. Contribution Guidelines
7. License
8. Contributors
9. Changelog

Requirements

1. Fountainpay version 1 API keys
2. Node version >= 6.9.x and npm >= 3.x.x
3. Angular version >= 9

Installation

Install the SDK

$ npm i fountainpay-angular

# or
$ yarn add fountainpay-angular

Initialization

Import FountainpayModule in your application module section Import FountainpayService to any component in your application Add private fpService: FountainpayService to your component constructor

 const config = {
  publicKey: 'FP-PUBK-**************************',
  tnxRef: Date.now(),
  amount: 100,
  currency: 'NGN',
  channels: ["card", "qrcode", "directDebit"],
  customer: {
    email: 'user@gmail.com',
    phoneNo: '070********',
    lastname: 'john',
    firstname:''
  }
};

Usage

Add Fountainpay to your projects as a component or a angular service:

1. In your Module
2. As a Component
3. Directly in your code

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FountainpayModule } from 'fountainpay-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FountainpayModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { FpcheckoutResponse } from 'projects/fountainpay-angular/src/lib/types';
import {FountainpayService} from "fountainpay-angular"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public config: any
  constructor(private fpService: FountainpayService) {
  }
  ngOnInit() {
    this.config={
      publicKey: "FP-PUBK-9603605594851666993306925",
      tnxRef: `${Date.now()}`,
      amount: 1000,
      currency: 'NGN',
      channels: ["card", "qrcode", "directDebit"],
      customer: {
        email: 'user@gmail.com',
        phoneNo: '08102909304',
        lastname: 'test',
        firstname:'user'
      },
    };
  }
  public onPayment(response: any){
    console.log(response)
  }
  public onClose(){
    alert("window close")
  }
  public innitializePayment(): void {
    const newconfig = {
    ...this.config,
      callback: (response: FpcheckoutResponse | any) => {
        this.onPayment!(response);
      },
      close: () => {
        this.onClose!();
      },
    };
    this.fpService.payWithFountainpay(newconfig as any);
  }

}

Service

<div>Testing Fountainpay checkout angular sdk library</div>
<div>
    <button (click)="innitializePayment()">Pay now</button>
</div>

Component

<div>Testing Fountainpay checkout angular sdk library</div>
<div>
    <fountainpay [config]="config" (onComplete)="onPayment($event)" (onClose)="onClose()">Make payment with FP Component</fountainpay>
</div>

Parameters

Read more about our parameters and how they can be used here.

Other methods and descriptions:

Methods provided by the Angular SDK:

Please check Fountainpay Documentation for other available options you can add to the tag.

Debugging Errors

We understand that you may run into some errors while integrating our library. You can read more about our error messages here.

For authorization and validation error responses, double-check your API keys and request. If you get a server error, kindly engage the team for support.

Support

For additional assistance using this library, please create an issue on the Github repo or contact the developer experience (DX) team via email.

You can also follow us @fountainpayng and let us know what you think 😊.

Contribution Guidelines

We welcome contributions from the community. Read more about our community contribution guidelines here.

License

By contributing to this library, you agree that your contributions will be licensed under its MIT license.

Copyright (c) Fountainpay Systems and Solutions.

Contributors

• Adedeji Richards