How to call a function inside another function in Angular

Question

I am building an online store, I am using paystack payment gateway, in the api, I am trying to run a function inside the payment gateway api but it's not working. Here is the code:

payWithPaystack(returnData, amount){
    const binded = this.service.completePayment.bind(this)
    var handler = PaystackPop.setup({
        key: '.......',
        email: this.details.email,
        amount: amount,
        currency: "NGN",
        ref: `ref-${Math.ceil(Math.random() * 10e13)}`, 
        metadata: {
            custom_fields: [{
                display_name: this.details.firstName+' '+this.details.lastName,
                variable_name: "mobile_number",
                value: this.details.phoneNumber
            }]
        },  
        callback(res){
            console.log(res)                
            binded(res);
        },
        onClose(){
            console.log('window closed');
            this.color='danger'
            this.payDisplay='Transaction closed'    
            this.payClick=false
        }
    });
    handler.openIframe();
}

in the service page here is the code

completePayment(sentData){
    console.log('enter')
    this.http.post(`${this.ApiURL}payAm.php`, sentData, {headers:this.headers})
    .subscribe(data=>console.log('ok'), error=>console.log(error))
}

Now the issue is that the function completePayment is calling partially, the console.log is running, but its not sending the http request, pls how can i solve this issue

Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Nov 21, 2019 at 12:31
Could you provide some logs? How do you decide that it does not work? Maybe you've got some errors or...? — Eugene Beliaev
– Eugene Beliaev, Commented Nov 21, 2019 at 12:34
the issue is that the this.completePayment(res) is not running — Eloike David
– Eloike David, Commented Nov 21, 2019 at 12:35

georgeawg · Accepted Answer · 2019-11-23 22:51:59Z

Write the payWithPaystack method so that it returns a promise:

payWithPaystack(amount){
    return new Promise( (resolve,reject) => {
        var handler = PaystackPop.setup({
            key: '.......',
            email: this.details.email,
            amount: amount,
            currency: "NGN",
            ref: `ref-${Math.ceil(Math.random() * 10e13)}`, 
            metadata: {
                custom_fields: [{
                    display_name: this.details.firstName+' '+this.details.lastName,
                    variable_name: "mobile_number",
                    value: this.details.phoneNumber
                }]
            },  
            callback(res){
                console.log(res)                
                //RESOLVE promise
                resolve(res);
            },
            onClose(){
                console.log('window closed');
                //REJECT promise
                reject('window closed');
            }
        });
        handler.openIframe();
    });
}

Then use the promise that it returns:

this.payWithPaystack(amount)
 .then( sentData => {
    console.log('enter', sentData);
    this.http.post(`${this.ApiURL}payAm.php`, sentData, {headers:this.headers})
    .subscribe(data=>console.log('ok'), error=>console.log(error))
}).catch( reason => {
    console.log("rejected: ", reason);
    this.color='danger'
    this.payDisplay='Transaction closed'    
    this.payClick=false;
});

Promises are the best way to chain asynchronous operations.

Bálint Réthy · Accepted Answer · 2019-11-21 12:44:38Z

0

Bind the syntax

...
payWithPaystack(returnData, amount){
    const binded = this.service.completePayment.bind(this);
    let handler = PaystackPop.setup({
    ....
    callback(res){
      binded(res);
    }
...

You can also try to bind the service ref.

edited Nov 21, 2019 at 12:44

answered Nov 21, 2019 at 12:35

Bálint Réthy

4331 gold badge6 silver badges27 bronze badges

4 Comments

Eloike David Over a year ago

it says bind does not exist on type 'void'

Bálint Réthy Over a year ago

Okay, my bad I edideted the answer.

Eloike David Over a year ago

its not fully working, here is the function in service completePayment(sentData){ console.log('enter') this.http.post(${this.ApiURL}payAm.php, sentData, {headers:this.headers}).subscribe(data=>console.log('ok'), error=>console.log(error)) }

Bálint Réthy Over a year ago

Have you tried bind the service ref as well? const binded = this.service.completePayment.bind(this.service);

Collectives™ on Stack Overflow

How to call a function inside another function in Angular

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related