FedaPay CheckoutJs integration for Angular projects.
From a command terminal type the following
npm install fedapay-angular --save
Add the checkout.js script in your index.html file.
<!doctype html><htmllang="en"><head><metacharset="utf-8"><title>Fedapay Checkout Angular Plugin</title><basehref="/"><metaname="viewport" content="width=device-width, initial-scale=1"><linkrel="icon" type="image/x-icon" href="favicon.ico"></head><body><app-root></app-root><scriptsrc="https://cdn.fedapay.com/checkout.js?v=1.1.2"></script></body></html>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'})]})exportclassAppModule{}Please note, you only use
.forRoot()on your base app moduleThis 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'})]})exportclassAppModule{}import{Component}from'@angular/core';import{CheckoutOptions}from'fedapay-angular';
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})exportclassAppComponent{checkoutButtonOptions: CheckoutOptions={transaction: {amount: 100,description: 'Airtime'},currency: {iso: 'XOF'},button: {class: 'btn btn-primary',text: 'Payer 100 FCFA'},onComplete(resp){constFedaPay=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>