How do I dynamically change "amount" and email in paystack payment

See more:

ionic

I am building an app in which I have integrated a paystack payment gateway. The default amount specified is NGR 5000 and the default email is users@gmail.com. I want to dynamically change the amount and email so that the email is equal to (this.data.emailaddress) where (this.data.email address) is the value of email address passed down to the current page from another page.
Every effort has proven abortive for over four days now.
one of the errors I've been getting is "property "data" is used before its initialization".
I have tried to declare data at oninit, at export, and immediately under the constructor yet no luck.
I've tried a lot of other options, please any help would be appreciated.
please pardon my crude method of code I'm still new in programming.

please take a look at my codes:

paytackpayment.ts

import { DataitemsService } from './../dataitems.service';
import { ContactName } from '@ionic-native/contacts/ngx';
import { formatDate } from '@angular/common';

import {observable,Subscription} from 'rxjs';
import {catchError} from 'rxjs/operators';

import{ProfilePage}from '../Profile/profile.page';

import { send } from 'process';

import * as firebase from 'firebase';
import 'firebase/firestore'
import { ProfilePageModule } from '../profile/profile.module';
import { promise } from 'protractor';
import { async } from 'rxjs/internal/scheduler/async';


import { PaystackOptions } from 'angular4-paystack';

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';
import {Router}from '@angular/router';

import { LoadingController } from '@ionic/angular';
import { NewmenuPage } from './../newmenu/newmenu.page';

import {AlertController} from '@ionic/angular';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormBuilder,FormControl, Validators } from '@angular/forms';
import { AngularFirestore,AngularFirestoreCollection} from '@angular/fire/firestore';
import { splitNsName } from '@angular/compiler';

import{ NavParams} from '@ionic/angular';
import{NavController} from '@ionic/angular';
import {ActivatedRoute, NavigationExtras}from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

import { Message } from '@angular/compiler/src/i18n/i18n_ast';


@Component({
  selector: 'app-paystackpayment',
  templateUrl: './paystackpayment.page.html',
  styleUrls: ['./paystackpayment.page.scss'],
})
export class PaystackpaymentPage implements OnInit {
  data: any;
    service: any;

    detail: any;
    firestore: any;

    user: any;
    name: any;

    doc:any
    profile: any;

    highestloaneligible:number;
    repaymentdate:any;
     interest: number;
    amountpayable:any;
    loanamount:number;
    loantenor:any;
    loanday:string
    today=new Date
    totalinterest:number
    amountpayableRO:number
    totalinterestRU:any


    banknameholder: string;
    accountnumberholder: string;


     creditScore:number;

     isEnabled: boolean;
     pay: any;
     creditScorevalue: number;
     employmentstatusholder:string
     workindustryholder:string
     jobtitleholder:string

     datetofbirthholder: any;

     datetofbirth: any;

     title = '';
     emailaddress: any;

      onload(){
  
        this.route.queryParams.subscribe(params => {
        if (this.router.getCurrentNavigation().extras.state) {
        this.data = this.router.getCurrentNavigation().extras.state.user;
        
        }
       });

        }
         options: PaystackOptions = {
         amount: 50000,
        // //email: 'user@mail.com',
        //  email:  document.getElementById(email).value
         email: this.data.emailaddress,

        ref: `${Math.ceil(Math.random() * 10e10)}`,
        currency:"NGN"

          } 

         constructor(private myservice:DataitemsService,private route: 
         ActivatedRoute,public loadingController: LoadingController,private router: 
         Router,private afs:AngularFirestore, public alertCtrl: AlertController,public 
         db: AngularFirestore ) {}
          // constructor(private route: ActivatedRoute, private router: Router,private 
          afs:AngularFirestore, public alertCtrl: AlertController,public db: 
      AngularFirestore ) {}
        

        async ngOnInit() {
          // onload(){
    
           this.route.queryParams.subscribe(params => {
           if (this.router.getCurrentNavigation().extras.state) {
            this.data = this.router.getCurrentNavigation().extras.state.user;
             }
              });
          //this.myservice.datasomething();
               // this.myservice.profilesomething();
            this.user = {

             firstname: this.data.firstname,
            lastname: this.data.lastname,
            phonenumber:this.data.phonenumber,
            salaryrange:this.data.salaryrange,
            emailaddress:this.data.emailaddress
             }
    
        let navigationExtras: NavigationExtras = {
           state: {
           user: this.user
           }
          };

           }
       }

this is the code on paystackpayment.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { PaystackpaymentPage } from './paystackpayment.page';
import { Angular4PaystackModule } from 'angular4-paystack';

import { PaystackpaymentPageRoutingModule } from './paystackpayment-routing.module';


@NgModule({

 imports: [
   Angular4PaystackModule.forRoot('***********************'),
   CommonModule,
   FormsModule,
   IonicModule,
   PaystackpaymentPageRoutingModule
   ],
   declarations: [PaystackpaymentPage]
})
export class PaystackpaymentPageModule {
}

and on my paystackpayment.html I have:

<ion-header [translucent]="true">
<ion-toolbar>
  <ion-title>
    Blank
  </ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
   <ion-toolbar>
    <ion-title size="large">Blank</ion-title>
  </ion-toolbar>
</ion-header>

<div id="container">
  <button
  angular4-paystack
  [paystackOptions]="options"
  (paymentInit)="paymentInit()"
  (onClose)="paymentCancel()"
  (callback)="paymentDone($event)"
 >
  Pay with Paystack
</button>
</div>

</ion-content>

What I have tried:

I have tried to declare data at oninit, at export, and immediately under the constructor yet no luck.

I've tried a lot of other options, please any help would be appreciated.
please pardon my crude method of code I'm still new in programming.