How to fetch details from previous page to payment page?

Ionic Framework
1

I have 3 pages each consisting of a button to redirect to a payment page. I have commonly created a payment page for each page. In that payement page there is a label which shows the selected category that means the page that is redirected to payment page. that label should show the category which i have redirected. How can i do that?
here is my code
I am only posting one page here instead of three and the payment page too.
category page- category name: Third Party
html

<ion-header>
    <ion-navbar>
        <ion-title>KYC Details</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-label class="h">Company Details : </ion-label>
    <ion-item>
        <ion-label class="d">License : <span class="required">*</span></ion-label>
        <ion-icon name="document" item-end></ion-icon>
    </ion-item>
    <ion-item>
        <ion-label class="d">Other Ministry Registrations : <span class="required">*</span></ion-label>
        <ion-icon name="document" item-end></ion-icon>
        <!-- <ion-select interface="popover">
            <ion-option value="nes">MSME</ion-option>
            <ion-option value="n64">Nintendo64</ion-option>
            <ion-option value="ps">PlayStation</ion-option>
        </ion-select> -->
    </ion-item>
    <ion-item>
        <ion-label inline>PAN Number : <span class="required">*</span></ion-label>
        <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label inline>Aadhar Number : <span class="required">*</span></ion-label>
        <ion-input type="text"></ion-input>
    </ion-item>
    <ion-label class="h">Owner Details : </ion-label>
    <ion-item>
        <ion-label inline>Other Documents : <span class="required">*</span></ion-label>
        <ion-select interface="popover">
            <ion-option value="nes">Driving License</ion-option>
            <ion-option value="n64">Voter's Id</ion-option>
        </ion-select>
    </ion-item>
    <ion-item>
        <ion-label class="add">Documents : <span class="required">*</span></ion-label>
        <ion-icon name="document" item-end></ion-icon>
    </ion-item>
    <ion-item>
        <ion-label class="add">PAN : <span class="required">*</span></ion-label>
        <ion-icon name="document" item-end></ion-icon>
    </ion-item>
    <ion-item>
        <ion-label class="add">Aadhar : <span class="required">*</span></ion-label>
        <ion-icon name="document" item-end></ion-icon>
    </ion-item>
    <ion-label class="doc">
        <span class="required">documents must be uploaded in pdf format
            <p>size must be 5 mb</p>
        </span>
    </ion-label>
</ion-content>
<ion-footer no-shadow class="foot">
    <ion-toolbar position="bottom">
        <ion-row>
            <ion-col>
                <button ion-button full color="primary" block>Save</button>
            </ion-col>
            <ion-col>
                <button (click)="pay()" ion-button full color="primary" block>Proceed to payment</button>
            </ion-col>
        </ion-row>
    </ion-toolbar>
</ion-footer>

third party ts file

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { ConnectpayPage } from '../connectpay/connectpay';


@Component({
    selector: 'page-thirdkyc',
    templateUrl: 'thirdkyc.html',
    providers: [ObsAuthService]
})
export class ThirdkycPage {
    

    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }

        selectChange(e) {
            console.log(e);
        }
        public pay()
        {
            this.nav.push(ConnectpayPage); 
        }
        
    }

Payment page:
html:

<ion-header>
    <ion-navbar>
        <ion-title>PAYMENT OPTIONS</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-row>
        <!-- <ion-item> -->
        <ion-col>
            <ion-label class="cat">Selected Category: </ion-label>
        </ion-col>
        <ion-col>
            <ion-label class="cat">Amount to be paid: </ion-label>
        </ion-col>
        <!-- </ion-item> -->
    </ion-row>
    <ion-label class="p">Payment method : </ion-label>
    <ion-label class="cat">Payment done through : <ion-img class="img" src="../../assets/images/paytm-512.png"></ion-img>
    </ion-label>
    <div padding text-center>
    <a button class="btn" href="https://developer.paytm.com/docs/" ion-button color="primary" block> Proceed to paytm</a>
</div>
</ion-content>

ts file

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';


@Component({
    selector: 'page-connectpay',
    templateUrl: 'connectpay.html',
    providers: [ObsAuthService]
})
export class ConnectpayPage {


    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }

    selectChange(e) {
        console.log(e);
    }
    // goback() {
    //     this.nav.pop();  
    
}
2

Maybe you could try using ```navParams`` something like

Third Party TS FIle

//Declare category variable.
public category: string = 'third party';

//Use navParams here
public pay() {
    this.nav.push('ConnectpayPage', {category: this.category});
}

Payment Page TS File

//Add this to your constructor to access the parameter passed.
cat = navParams.get('category');
console.log(cat); //Log the value to check if it contains any.

But before you can use ```navParams``, you need to import it and declare it on your constructor first. Hope that it can solve your problem :slight_smile:

Reference Links: https://ionicframework.com/docs/v3/api/navigation/NavController/
https://ionicframework.com/docs/v3/api/navigation/NavParams/

4

It worked perfectly. Thank You :slightly_smiling_face:

1 Like
5

No worries. Maybe you could accept my answer as the solution. Thanks :blush: