<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fedapay Checkout Angular Plugin</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.2"></script>
</body>
</html>

Inject

Make fedapay-angular available throughout your app

import { NgModule } from "@angular/core";
import { FedaPayCheckoutModule } from 'fedapay-angular';

@NgModule({
  imports: [ FedaPayCheckoutModule.forRoot({ public_key: 'pk_sandbox_XXXXXX' }) ]
})
export class AppModule {}

Please note, you only use .forRoot() on your base app module

This ONLY matters if you need to support lazy loading via loadChildren()

For Ionic applications, you will need to add your app ID.

import { NgModule } from "@angular/core";
import { FedaPayCheckoutModule } from 'fedapay-angular';

@NgModule({
  imports: [ FedaPayCheckoutModule.forRoot({ public_key: 'pk_sandbox_XXXXXX', app_id: 'org.ionic.myapp' }) ]
})
export class AppModule {}

Usage

import { Component } from '@angular/core';
import { CheckoutOptions } from 'fedapay-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    checkoutButtonOptions: CheckoutOptions = {
        transaction: {
            amount: 100,
            description: 'Airtime'
        },
        currency: {
            iso: 'XOF'
        },
        button: {
            class: 'btn btn-primary',
            text: 'Payer 100 FCFA'
        },
        onComplete(resp) {
            const FedaPay = window['FedaPay'];
            if (resp.reason === FedaPay.DIALOG_DISMISSED) {
                alert('Vous avez fermé la boite de dialogue');
            } else {
                alert('Transaction terminée: ' + resp.reason);
            }

            console.log(resp.transaction);
        }
    };

    checkoutEmbedOptions: CheckoutOptions = {
        transaction: {
            amount: 100,
            description: 'Airtime'
        },
        currency: {
            iso: 'XOF'
        }
    };
}

In your component's view

<!--- app.component.html -->
 <button [fedaCheckoutOptions]="checkoutButtonOptions"> Click on me </button>

<div [fedaCheckoutOptions]="checkoutEmbedOptions" [embeded]="true"
  style="height : 500px; width: 500px; background-color: #eee">
</div>

FAQs

What is fedapay-angular?

Is fedapay-angular well maintained?

Package last updated on 16 Dec 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install