PayPal Smart Buttons won't acknowledge items list. Ideas?

Question

I'm having issues with the PayPal smart buttons interface. The documentation is very counterproductive.

The email samples in sandbox won't show the item descriptions/details. It just shows the totals. In one document on their site, the items block is inside the purchase_units block. That fails will no real error messages.

paypal.Buttons({
    createOrder: function (data, actions) {
        // Busy indicator.
        var spinner = document.getElementById("spinner");
        var cart = document.getElementById("vysshopcart");
        spinner.style.display = "block";
        cart.style.display = "none";
        // This function sets up the details of the transaction, including the amount and line item details.
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: "10",
                    "currency-code": "USD",
                    details: {
                        subtotal: "10",
                        shipping: "0",
                        tax: "0.00"
                    },
                    total: "10"
                }
            }],
            links: [{
                href: "http://192.168.249.20:81/virtual-yard-sale?invoice=2020092011397C1E",
                rel: "approve"
            }],
            "items": [
                {
                    "sku": "2",
                    "name": "Harry & David Snack Disk",
                    "price": "5.00",
                    "quantity": "1",
                    "category": "PHYSICAL_GOODS",
                    "currency": "USD"
                }
                , {
                    "sku": "10",
                    "name": "Raya Insulated Lunch Tote",
                    "price": "5.00",
                    "quantity": "1",
                    "category": "PHYSICAL_GOODS",
                    "currency": "USD"
                }
            ]
        });
    },
    onApprove: function (data, actions) {
        // This function captures the funds from the transaction.
        return actions.order.capture().then(function (details) {
            // This function shows a transaction success message to your buyer.
            window.location.replace("http://192.168.249.20:81/virtual-yard-sale?invoice=2020092011397C1E");
        });
    }
}).render('#paypal-button-container');

Actually, this post was helpful. https://stackoverflow.com/questions/56414640/paypal-checkout-javascript-with-smart-payment-buttons-create-order-problem — Jay Benton, Sep 20 '20 at 17:45

Preston PHX · Answer 1 · 2021-03-11T22:39:46.587

Looks like you found the answer elsewhere, an items array goes inside purchase_units, but then an amount breakdown is also required, e.g.

           amount: {
                currency_code: "EUR",
                value: "200.00",
                breakdown: {
                    item_total: {
                        currency_code: "EUR",
                        value: "200.00"
                    }
                }
            },

Regarding the onApprove process, consider doing that and the createOrder from your server if possible. Here's a demo: https://developer.paypal.com/demo/checkout/#/pattern/server

You would need two routes on your server which call the /v2/checkout/orders API, one for 'Create Order' and one to capture it, documented here.

Server integrations are more robust, assuming you want to ensure the client (browser) doesn't monkey with the totals and that you receive an immediate API response of successful capture and can so flag orders as paid for in your server, in contrast to actions.order.capture() in client side code, which might possibly bug out on you.

But for a relatively low volume of transactions / simple use case, the simpler client-side-only integration may be adequate.

PayPal Smart Buttons won't acknowledge items list. Ideas?

1 Answers1