Paypal pop up not working using php and paypal integration

Question

I am new here, and sorry for asking too soon. I just need your help and someone told me that your the best people to answer my question.

I am working with my online store just for testing, and my PayPal sandbox seems had a problem when the payment is made, I don't know what the code to be placed because there's no example on the PayPal side.

Here is my code, and don't mind my client id:

<script src="https://www.paypal.com/sdk/js?client-id=abcdefg&currency=USD"></script>
    <!-- Set up a container element for the button -->
    <script>
        paypal.Buttons({
            createOrder() {
                return fetch("/my-server/create-paypal-order", {
                    method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify({
                            cart: [
                            {
                                sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
                                quantity: "YOUR_PRODUCT_QUANTITY",
                            },
                            ],
                       }),
                })
                .then((response) => response.json())
                .then((order) => order.id);
            },
            onApprove(data) {
                return fetch("/my-server/capture-paypal-order", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                    orderID: data.orderID
                })
           })
           .then((response) => response.json())
           .then((orderData) => {
               console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
               const transaction = orderData.purchase_units[0].payments.captures[0];
               alert(`Transaction ${transaction.status}: ${transaction.id}\n\nSee console for all 
               available details`);
           });
      }
  }).render('#paypal-button-container');
</script>`

Answer 1

Essentially you need to create a backend to implement the two routes to create and capture an order, which in the above sample code are

/my-server/create-paypal-order
/my-server/capture-paypal-order

The paths can be changed, but whatever they are changed to they need to be real paths that the browser can send a fetch request to, and get back a JSON response (only JSON, no other HTML nor text may be part of the response, so be careful if using "echo" or "print" statements of debug info from PHP, this will break the client side code's ability to parse an expected JSON payload)

The backend for the 2 routes can be implemented in any language, including PHP. The sample backends in the standard integration guide and integration builder are in node.js as an example, since JavaScript is a language most understand, but that's simply the example -- you can implement what the sample node index.js does in any server-side language of your choice.

The create route needs to use the v2/checkout/orders API to create an order , and the capture route needs to capture a given order ID after approval. Calling the orders API requires first getting an access token, which the node sample shows how to do.