Secure PayPal Checkout Client-side?

Viewed 473

With paypal's client side checkout they claim you can simply drop their code onto your site (front end). However, from this example it looks like a user could modify the amount requested because the code is on the client ("Never trust the client").

Is it Possible to secure this or is server side code necessary?

Code straight from demo

<!DOCTYPE html>

<head>
    <!-- Add meta tags for mobile and IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

<body>
    <!-- Set up a container element for the button -->
    <div id="paypal-button-container"></div>

    <!-- Include the PayPal JavaScript SDK -->
    <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

    <script>
        // Render the PayPal button into #paypal-button-container
        paypal.Buttons({

            // Set up the transaction
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '0.01'
                        }
                    }]
                });
            },

            // Finalize the transaction
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    // Show a success message to the buyer
                    alert('Transaction completed by ' + details.payer.name.given_name + '!');
                });
            }


        }).render('#paypal-button-container');
    </script>
</body>
1 Answers

Server-side is necessary to secure the amount (as well as the description and any other data you want to specify as part of the transaction)

Here is the front-end demo pattern for server-side.

When the capture is done in the server route, it should check the amount was as expected.

Related