cocoastorm / vue-paypal-checkout

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

paypal experience support broken? (v3.0.0) #28

Closed Menyadar closed 6 years ago

Menyadar commented 6 years ago

It looks like passing experience options is broken. When i use

<paypal-checkout
    ...
    :experience="experienceOptions"
    ...
>

...

data () {
  return {
    experienceOptions: {
      input_fields: {
        no_shipping: 1
      }
    }
  }
}

it ends up with error. Examining JSON data sent to the server it looks like the options are passed verbatim as part of the payment call, but when i do the same on PayPal Integration Demo it passes experience_profile_id: TXP-6LE46586NC7700531 instead.

Demo on the example site generates this WebProfile beforehand with POST call to https://www.sandbox.paypal.com/v1/payment-experience/web-profiles with following data:

{"input_fields":{"no_shipping":1},"name":"0.12354225931261098","temporary":true}

server response:

{"id":"TXP-6LE46586NC7700531","name":"0.12354225931261098","temporary":true,"input_fields":{"no_shipping":1}}

Quick grep through paypal-checkout sources for experience_profile_id shows the support should be there.

cocoastorm commented 6 years ago

Hey @Nonisiuniis!

Thanks for the catch! I'm not sure why I had the experience options passed in like that before... I'll work on a fix pretty soon!

cocoastorm commented 6 years ago

Hey @Nonisiuniis,

I fixed it in v3.1.0! :rocket:

Tell me if that fixed it for you! Sorry about the regression.

Menyadar commented 6 years ago

No other changes except for upgrade to 3.1.0 - it correctly hides shipping info, however i get some errors after finishing payment

This object is returned by the callback:

Object { paymentToken: "EC-43B92192DXXXXXXXX", orderID: "EC-43B92192DXXXXXXXX", payerID: "A8LQYXXXXXXXX", paymentID: "PAY-8A4921851K887993XXXXXXXX", intent: "sale", returnUrl: "https://www.sandbox.paypal.com/?paymentId=PAY-8A4921851K887993XXXXXXXX&token=EC-43B92192DXXXXXXXX&PayerID=A8LQYXXXXXXXX" }

it is followed by several HTTP 2xx requests, but then it fails with 400 Bad Request:

[POST] [XHR] https://www.sandbox.paypal.com/webapps/hermes/api/payment/PAY-8A4921851K887993XXXXXXXX/execute  [HTTP/1.1 400 Bad Request 1044ms]

then it spits out these errors to browser console and paypal button disappears

ppxo_xc_ppbutton_error @ index.js:577:31
Object { error: "./node_modules/post-robot/src/index.js/_RECEIVE_MESSAGE_TYPE[conf.b.POST_MESSAGE_TYPE.RESPONSE]@https://www.paypalobjects.com/api/checkout.4.0.181.js:3298:31\nreceiveMessage@https://www.paypalobjects.com/api/checkout.4.0.181.js:2858:25\nmessageListener@https://www.paypalobjects.com/api/checkout.4.0.181.js:2879:13\n", timestamp: 1521231776273, windowID: "a3843301ab", pageID: "a671246a08", prev_corr_ids: "faab28dc88dd3, faab28dc88dd3,9e2233295f135, 9e2233295f135,df592f3515147, df592f3515147,521f21d8baf45, 521f21d8baf45", referer: "<my domain>", host: "www.sandbox.paypal.com", path: "/webapps/hermes/button", env: "sandbox", country: "US", … }
 ./node_modules/post-robot/src/index.js/_RECEIVE_MESSAGE_TYPE[conf.b.POST_MESSAGE_TYPE.RESPONSE]@https://www.paypalobjects.com/api/checkout.4.0.181.js:3298:31
receiveMessage@https://www.paypalobjects.com/api/checkout.4.0.181.js:2858:25
messageListener@https://www.paypalobjects.com/api/checkout.4.0.181.js:2879:13

ppxo_unhandled_error @ vue-paypal-checkout.min.js:1
Object { stack: "./node_modules/xcomponent/src/component/parent/index.js/m</n.prototype.listeners/e[y.POST_MESSAGE.ERROR]@webpack-internal:///./node_modules/vue-paypal-checkout/dist/vue-paypal-checkout.min.js:1:146888\n./node_modules/xcomponent/src/component/base.js/r</e.prototype.listen/p</s<@webpack-internal:///./node_modules/vue-paypal-checkout/dist/vue-paypal-checkout.min.js:1:94288\n./node_modules/post-robot/src/index.js/x[_.b.POST_MESSAGE_TYPE.REQUEST]/<@webpack-internal:///./node_modules/vue-paypal-checkout/dist/vue-paypal-checkout.min.js:1:71178\n./node_modules/zalgo-promise/src/index.js/t</e.try@webpack-internal:///./node_modules/vue-paypal-checkout/dist/vue-paypal-checkout.min.js:1:198560\n./node_modules/post-robot/src/index.js/x[_.b.POST_MESSAGE_TYPE.REQUEST]@webpack-internal:///./node_modules/vue-paypal-checkout/dist/vue-paypal-checkout.min.js:1:70866\nl@webpack-internal:///./node_modules/vue-paypal-checkout/dist/vue-paypal-checkout.min.js:1:59731\np@webpack-internal:///./node_modules/vue-paypal-checkout/dist/vue-paypal-checkout.min.js:1:60014\n", errtype: "[object Error]", timestamp: 1521231776309, windowID: "488020d91b", pageID: "fcbbec5956", prev_corr_ids: "", referer: "<my domain>", host: "<my domain>", path: "/", env: "production", … }

Error: ./node_modules/post-robot/src/index.js/_RECEIVE_MESSAGE_TYPE[conf.b.POST_MESSAGE_TYPE.RESPONSE]@https://www.paypalobjects.com/api/checkout.4.0.181.js:3298:31
receiveMessage@https://www.paypalobjects.com/api/checkout.4.0.181.js:2858:25
messageListener@https://www.paypalobjects.com/api/checkout.4.0.181.js:2879:13
2.js%20line%2029%20%3E%20eval:1:146888

strangely it shows env: "production", but it was tried on sandbox account / env

UPDATE: possibly some localStorage / cookie error.. i've cleared all and forced reload, works like a charm.

cocoastorm commented 6 years ago

Sweet! Again thanks for catching this! If you have any other issues feel free to let me know via another issue.

Cheers!