CODEWITHSUNDEEP
firebasevue.jspaypal
Abraham Felix
Abraham Felix

Reputation: 109

Paypal onApproved method, won't run my save to Firebase function

When I try to save the subscriptionID to Firebase DB inside the onApproved method for PayPal payment integration API, I get this random error regarding the firebase code, but if I run my Firebase code on the created or mounted does run well.

The payment goes through and I get the subscriptionID I will share below the visual details and code.

What I want is to save the subscriptionID on my DB so I can pull and show it on their profile, I want to also save a state on the store depending on the title of the sub like if they are basic pro or premium subscribers.

So I created an object on vuex store as, I know it may sound complex but I want to assign these values to the current user. I am using Vue.

Store:

state: {
    authenticated: false,
    user: {
      loggedIn: false,
      data: null
    },
    subscriber: {
      basic: false,
      pro: false,
      premium: false,
    }
  }, ...

onApproved code: "I get the subscriberID back from the PayPal call but I want to save it in firebase but Firebase code will drop ref error even though it worked on mounted or created"

onApprove: async function(data, actions) {

            /**
             * NOTE
             * - Save the subscription id in your Database
             * - This is important to ensure you can always
             * - Check on the status when user logs in or wants
             * - to make payment
             */


             console.log(data)


            // 4. Remove the selected package from the local storage

            // 5. Let's use swal to give us an alert once transaction is completed
              Swal.fire({
                icon: "success",
                title: "Congratulations",
                text: "Your payment has successfully been proccessed!" + " " + "Subscription ID:" + " " + data.subscriptionID,
                confirmButtonText: "Complete",
                showLoaderOnConfirm: true,
                preConfirm: () => {
                  // redirect user to dashboard or login
                  location.assign("http://localhost:1111/profile");
                },
                allowOutsideClick: false
              });

              //Firebase config this code doesn't run here but it runs on created or mounted just fine... 
                 messagesRef.child(this.userID).update(this.newSub);
                  this.newSub.packageselect = '' ;
                  this.newSub.subscrptionId = '';

            }

Result:

enter image description here

Console result:

enter image description here

My repo is public you are welcome to collaborate on GitHub: https://github.com/Abraham-Felix/mexdev

Upvotes: 0

Views: 157

Answers (1)

Preston PHX
Preston PHX

Reputation: 30359

The context of this is different when that function (onApprove) is run, so the properties on it that you are referencing are undefined and Firebase cannot do anything with undefined values, as the error log shows.

So: outside onApprove, save a variable reference to the "this" object you want to use, and and have your onApprove function reference it by that name.

(alternatively, you could probably use bind if it were needed)

Upvotes: 1

Related Questions