I need some help setting up paypal's gateway

Question

I'm building a website and I need to make a payment system. I'm not really sure where to start from, but I already have the website build, I just need to intergrade paypal. In the following code you will find 2 buttons, one for card payment, and the other is for paypal payment. How can I make them work? And there is also the .paymentTotalPrice which changes dynamically with js to the total of your cart.

<div class="paymentWrapper">
    <div class="paymentSection">
        <button id="cardPayment" class="paymentBtn">Credit or Debit Card</button>
        <button id="paypalPayment" class="paymentBtn">PayPal</button>
    </div>
    <div class="paymentSeperator"></div>
    <div class="paymentSection">
       <span class="paymentTotal">YOUR TOTAL IS: <span class="paymentTotalPrice">0,00 €</span></span>
    </div>
</div>

const cardButton = document.getElementById('cardPayment'); const paypalButton = document.getElementById('paypalPayment'); const paypalButtonContainer = document.getElementById('paypal-button-container');

        cardButton.addEventListener('click', () => {
            
        });
        paypalButton.addEventListener('click', () => {
            
        });
        

        paypal.Buttons({
            createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                amount: {
                    value: checkoutTotal.toFixed(2)
                }
                }]
            });
            },
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    const xhr = new XMLHttpRequest();
                    xhr.open('POST', '/path/to/process-payment.php');
                    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    xhr.onload = function() {
                    // Handle server response
                    };
                    xhr.send('paymentID=' + data.orderID);
                });
            }
        }).render('#paypalPayment');

Answer 1

actions.order.create and actions.order.capture are deprecated, and should not be used in any new integration

See the current standard integration guide for information on an integration that fetches to a backend for creating and capturing the order from there using the v2/checkout/orders REST API . The examples in that guide use node.js for the backend , but you can of course implement the backend with any language/environment including PHP.