cocoastorm / vue-paypal-checkout

A simple Vue.js wrapper component for paypal-checkout
MIT License
153 stars 67 forks source link

2 important Paypal variables missing from the package #82

Open Benoit1980 opened 5 years ago

Benoit1980 commented 5 years ago

Hello,

I would like to inform you that 2 important variables are missing from your package(unless I missed something): :custom and :item_number1

When an app is detached from the backend, it is good to have them to pass the user id for example. Right now I will be using instead the invoice number but is it not ideal.

Thank you for the package.

Angulz commented 5 years ago

I stumbled upon the same thing, tried adding a custom variable unsuccessfully. Also tried using invoice-number but got an odd payment error "Payment could not be executed".

Benoit1980 commented 5 years ago

Angulz, I have to admit I have struggled a lot on this, and I hope this will help you.

On my paypal form page(front end), I added both the user id and invoice number together with a separator as:

                const chars='abcdefgh123456789';
                let s = '';
                while (len--) s += chars[Math.floor(Math.random() * chars.length)];
                let seconds = new Date() / 1000;
                return this.randomInvoiceId = s + Math.round(seconds) + "-" + this.uid;

the "-" separator will be super useful in the back end

the this.uid is my user id from the Vue storage.

In the paypal ipn side(backend) I receive the $request->invoice data from my Laravel controller and split it back into 2 separate variables as:

list($invoice, $userId) = explode('-', $request->invoice);

By doing this, you can then separate both your user id and Invoice id.

I have honestly scratched my head for days trying to figure out why I could not pass my custom data, or user id and more, now it works.

At least if the script change in itself, it is pretty safe because Paypal will always use the invoice id form parameter.

This is my Paypal button with the parameter:

          ```
  <PayPal
                        :button-style="buttonStyle"
                        :amount="grossPrice"
                        :currency="currency"
                        :description="description"
                        :client="credentials"
                        :env="paypalEnv"
                        :notify-url="paypalIpn"
                        :items="myItems"
                        :invoice-number="randomInvoiceId"
                        @payment-completed="paymentCompleted($event)"
                        @payment-cancelled="paymentCancelled($event)">
                </PayPal>
:notify-url="paypalIpn"  -->Point this to your backend paypal IPN script.
:invoice-number="randomInvoiceId" --> This is the invoice and user id script I pasted above

These 2 events are sent by this Vue paypal component and you can use their call back to show a message like "Payment failed" or "Thank you for your payment"

@payment-completed="paymentCompleted($event)" @payment-cancelled="paymentCancelled($event)"



One thing super super important is that if you use an array with multiple products, the gross price of all the products together have to be calculated and passed in the :amount="grossPrice" parameter. If this addition does not match all the products added together, you will get all sorts of Paypal warning and it becomes an absolute nightmare.....

Hope this helps.
Angulz commented 5 years ago

the "-" separator will be super useful in the back end

:notify-url="paypalIpn" -->Point this to your backend paypal IPN script.

These 2 events are sent by this Vue paypal component and you can use their call back to show a message like "Payment failed" or "Thank you for your payment"

Wow, this really helped! I think what I was missing was the PayPal notify-url prop, that was giving me the error. That made the invoice number work (as for the errors), on my backend however, thanks to you I can now get my user ID haha.

Super useful, cheers!

Benoit1980 commented 5 years ago

You are more than welcome, I struggled so much on this that I thought....let's not have someone else struggling too :-) Glad it helped.