One-time payments

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

import React, {
  useState
} from "react";
import {
  PayPalScriptProvider,
  PayPalButtons
} from "@paypal/react-paypal-js";

// Renders errors or successful transactions on the screen.
function Message({
  content
}) {
  return < p > {
    content
  } < /p>;
}

function App() {
  const initialOptions = {
    "client-id": "test", // "test" loads the PayPal JS SDK in demo mode. Replace this with your  sandbox client ID to test your sandbox app.
    "enable-funding": "paylater,card",
    "disable-funding": "venmo",
    "buyer-country": "US",
    currency: "USD",
    "data-page-type": "product-details",
    components: "buttons",
    "data-sdk-integration-source": "developer-studio",
  };

  const [message, setMessage] = useState("");

  return ( <
    div className = "App" >
    <
    PayPalScriptProvider options = {
      initialOptions
    } >
    <
    PayPalButtons style = {
      {
        shape: "rect",
        layout: "vertical",
        color: "gold",
        label: "paypal",
      }
    }
    createOrder = {
      async () => {
        try {
          const response = await fetch("/api/orders", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            // use the "body" param to optionally pass additional order information
            // such as product IDs and quantities
            body: JSON.stringify({
              cart: [{
                id: "YOUR_PRODUCT_ID",
                quantity: "YOUR_PRODUCT_QUANTITY",
              }, ],
            }),
          });

          const orderData = await response.json();

          if (orderData.id) {
            return orderData.id;
          } else {
            const errorDetail = orderData?.details?.[0];
            const errorMessage = errorDetail ?
              `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})` :
              JSON.stringify(orderData);

            throw new Error(errorMessage);
          }
        } catch (error) {
          console.error(error);
          setMessage(
            `Could not initiate PayPal Checkout...${error}`
          );
        }
      }
    }
    onApprove = {
      async (data, actions) => {
        try {
          const response = await fetch(
            `/api/orders/${data.orderID}/capture`, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
            }
          );

          const orderData = await response.json();
          // Three cases to handle:
          //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
          //   (2) Other non-recoverable errors -> Show a failure message
          //   (3) Successful transaction -> Show confirmation or thank you message

          const errorDetail = orderData?.details?.[0];

          if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
            // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
            // recoverable state, per /checkout/handle-funding-failure/
            return actions.restart();
          } else if (errorDetail) {
            // (2) Other non-recoverable errors -> Show a failure message
            throw new Error(
              `${errorDetail.description} (${orderData.debug_id})`
            );
          } else {
            // (3) Successful transaction -> Show confirmation or thank you message
            // Or go to another URL:  actions.redirect('thank_you.html');
            const transaction =
              orderData.purchase_units[0].payments
              .captures[0];
            setMessage(
              `Transaction ${transaction.status}: ${transaction.id}. See console for all available details`
            );
            console.log(
              "Capture result",
              orderData,
              JSON.stringify(orderData, null, 2)
            );
          }
        } catch (error) {
          console.error(error);
          setMessage(
            `Sorry, your transaction could not be processed...${error}`
          );
        }
      }
    }
    /> <
    /PayPalScriptProvider> <
    Message content = {
      message
    }
    /> <
    /div>
  );
}

export default App;