PayPal Checkout with Smart Payment Buttons (React + Redux) create order problem

Question

Whenever I try to process a payment I receive a 422 error: Unprocessable entity. The problem occurs when I dynamically want to capture the purchased item details that I receive from the redux store.

I tried to follow this format (duplicate): PayPal Checkout (javascript) with Smart Payment Buttons create order problem

Which is the same as in the PayPal docs: https://developer.paypal.com/docs/api/orders/v2/#definition-item

However, this does not help. Here's my code

import React, {useState, useEffect, useRef} from 'react';
import {useSelector, useDispatch} from 'react-redux'

const mapState = ({ cart }) => ({
    itemsInCart: cart.itemsInCart,
    total: cart.total

})

const Cart = props => {
  
    const {itemsInCart} = useSelector(mapState);


        useEffect(() => {
          const itemsObj = itemsInCart.map(item => {
            return {
              name: item.name,
              description: item.description,
              unit_amount: {
                              currency_code: "USD",
                               value: item.price
              },
              quantity: "1"
            }
          })


          window.paypal
              .Buttons({
                createOrder: (data, actions) => {
                  return actions.order.create({
                    purchase_units: [
                      {
                        description: "Your purchase details",
                        amount: {
                          currency_code: 'USD',
                          value: document.getElementById('totalAmount').innerHTML
                        },
                        items: itemsObj
                        },
                    ],
                  });
                }

If I change the items property to item_list as I have seen in some documentations, the payment goes through but the items object is not captured. I can't figure out why.

score 0 · Answer 1 · answered Jul 15 '20 at 09:27

If you want to capture the line items it the items property, you have to specify a breakdown in the amount property like this:

 purchase_units: [
              {
                description: "test",
                amount: {
                  currency_code: "USD",
                  value: price,
                  breakdown: {
                    item_total: {
                      currency_code: "USD",
                      value: document.getElementById("totalAmount").innerHTML
                    }
                  }

This post is also helpful for a full code example: https://www.paypal-community.com/t5/REST-APIs/PayPal-Checkout-javascript-with-Smart-Payment-Buttons-create/m-p/1824785#M2816

PayPal Checkout with Smart Payment Buttons (React + Redux) create order problem

1 Answers1