cocoastorm / vue-paypal-checkout

A simple Vue.js wrapper component for paypal-checkout

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Passing in :items to detail transaction line items in item_list fails with Malformed JSON request

calirails opened this issue · comments

Hi, thank you for developing and sharing this component. It's a really nice encapsulated module.

I've been debugging into vue-paypal-checkout-common.js to understand the internals and how it works with Paypals' checkoutlib.js. I'm able to receive the payment-completed event handler if I pass only the amount; but I really want to show the line item details to the customer when he/she has navigated to Paypal. After several days of debugging and comparing my binding values with the Paypal payments API API, I'm still blocked and failing. Hope you can help steer me in the right direction or learn how to fix the issue and submit a pull request.

Heres my Paypal button binding:
<Paypal env='sandbox' currency='USD' v-bind:client='paypalCredentials' v-bind:button-style='paypalStyle' v-on:payment-cancelled='onPaypalPaymentCancelled' v-on:payment-authorized='onPaypalPaymentAuthorized' v-on:payment-completed='onPaypalPaymentCompleted' v-bind:amount='orderTotalWithoutShipping()' v-bind:items='paypalTransactionRequest()'> </Paypal>

I've tried different bindings and values that more closely mirror the raw REST API but (there are some transformations possibly??) but without success The browser console emitted error for me is
`Uncaught Error: Error: Request to post https://www.sandbox.paypal.com/v1/payments/payment failed with 400 error. Correlation id: dac1bbeba1a99, dac1bbeba1a99
{
"name": "MALFORMED_REQUEST",
"message": "Incoming JSON request does not map to API request",
"information_link":
"https://developer.paypal.com/webapps/developer/docs/api/#MALFORMED_REQUEST",
"debug_id": "dac1bbeba1a99"
}
at XMLHttpRequest. (https://www.paypalobjects.com/api/checkout.4.0.223.js:14044:39)

I've attached a screenshot that shows how I've configured my Paypal Bindings and several debug callstack frames with locals window variable to capture state.
paypal-checkout-vue-help

I'd really appreciate a response on what I'm doing wrong, how I can debug and fix the problem. Thanks in advance.

I've attached another sreenshot to visually clarify the intended CX objective with passing in the :items information.
paypal-checkout-item-details-goal