Calling External Functions Once PayPal Approve / Finish the Transaction

Question

I'm integrating PayPal Smart Button for My CheckOut Process Below is the Code to Render the Button

     LoadPaypalButton(orderid :string , link : string,token : string , applicationbaseurl:string)
  {
    this.addPaypalScript().then(()=>{paypal.Buttons({enableStandardCardFields: true,
      style: {
        shape: 'rect',
        color: 'blue',
        layout: 'vertical',
        label: 'paypal',
    },
      createOrder: function() {
        return orderid
       },
       onApprove : function(data , actions) {
        return fetch(link, {
          method: 'post',
          headers: {
            'Authorization': token,
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            OrderID: data.orderID
          })
        }).then(function(res) {
          return res.json();
        }).then(function(details) {
          console.log( details);
          console.log(details);
          actions.redirect(applicationbaseurl+'OrderHistory/'+token);

        })
       }
     }
    ).render('#paypal-button-container')});


  }

Everything Working fine and i want to call external function to handle my UI after transaction finish without taking user to any other page.How can call function like below within the script

callsuccess()
 {
   // Some Other work....
   console.log("Something ..!");

 }

I'm Using Angular 8.0 as my front end.this is what i tried so far in OnApprove:

   onApprove : function(data , actions) {
    return fetch(link, {
      method: 'post',
      headers: {
        'Authorization': token,
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        OrderID: data.orderID
      })
    }).then(function(res) {
      return res.json();
    }).then(function(details) {

      this.callsuccess(); //  This does not work
      actions.redirect(applicationbaseurl+'OrderHistory/'+token);

    })
   }

giving me below error

zone-evergreen.js:172 Uncaught TypeError: Cannot read property 'callsuccess' of undefined
at http://localhost:4200/main.js:1430:30
at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:3365:26)
at Zone.run (http://localhost:4200/polyfills.js:3130:43)
at http://localhost:4200/polyfills.js:3861:36
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3397:31)
at Zone.runTask (http://localhost:4200/polyfills.js:3174:47)
at drainMicroTaskQueue (http://localhost:4200/polyfills.js:3565:35)

Does anyone have any suggestion to make this happen ..?

Change all functions to fat arrows: `function (arg) {` to `(arg) => {`. See if that helps. — R. Richards, Jan 04 '20 at 14:14

jeprubio · Accepted Answer · 2020-01-04T14:48:38.870

2

Try using an arrow function:

onApprove : (data , actions) => {
    return fetch(link, {
      method: 'post',
      headers: {
        'Authorization': token,
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        OrderID: data.orderID
      })
    }).then((res) => {
      return res.json();
    }).then((details) => {

      this.callsuccess(details);


   actions.redirect(applicationbaseurl+'OrderHistory/'+token);

    })
   }

Note how function(data , actions) { becomes (data, actions) => { and the same goes for the then functions of the promises.

This should preserve the this as arrow functions have lexical scoping of this keyword. This functions are also called lambda functions.

edited Jan 04 '20 at 14:48

answered Jan 04 '20 at 14:14

jeprubio

17,312
5
45
56

Nope.It Didn't work..! thanks . i Found this on stackoverflow https://stackoverflow.com/questions/57090296/how-to-call-external-javascript-function-from-inside-onauthorize-paypal-smart-pa do you have any idea how to translate this in to angular. i never used window object at all – CrazyCoder Jan 04 '20 at 14:31
Sorry, I forgot to change the `then` functions, they should be arrow functions. I've updated the answer. It should work now. – jeprubio Jan 04 '20 at 14:33
still the same it giving me below errors – CrazyCoder Jan 04 '20 at 14:39
Cannot find name 'data' / function fetch(input: RequestInfo, init?: RequestInit): Promise ':' expected.ts(1005) . / Property 'callsuccess' does not exist on type 'PaypalComponent' – CrazyCoder Jan 04 '20 at 14:40
Well, now the `this` is preserved, you just need to implement the `callsuccess()` method on your PaypalComponent with the code to execute on success – jeprubio Jan 04 '20 at 14:41
yes. but i need to access to my other variables within the angular component.seems like i have to define call success function as a window function. like it saying here. but i'm still trying to understand how this will apply for my scenario https://stribny.name/blog/2018/01/how-to-communicate-with-angular-components-outside-angular – CrazyCoder Jan 04 '20 at 14:47
You can pass the info you need to `callsuccess` method. It might be the info you receive as `details`. Try calling `this.callsuccess(details);` and defining the callsuccess(details) method in your PaypalComponent. Log in the console what you receive and check if it's what you need – jeprubio Jan 04 '20 at 14:51
1

Actually Just realize i didn't remove function from function (data,action) part.found after 2 days after did several research . Your answer is the right answer and i just wasted several days because of the mistake – CrazyCoder Jan 08 '20 at 00:16
1

Thanks @jeprubio it Works for me you save my 1 headache teblet. – Vinay Kaithwas Nov 19 '20 at 06:20

Calling External Functions Once PayPal Approve / Finish the Transaction

1 Answers1