Using a variable to set the description field in a PayPal API

Question

I'm trying to set the description field using a string variable from C# codebehind. I cannot get the buttons to work unless I hardcode the description in the Javascript embedded in the HTML code.

The goal is to build a single amount paid with a variable description. I have the amount worked out but cannot seem to get the description field to take. The buttons render but when clicked on I just get the error message.

It does work if I use:

Description: "Hard Code Info"

I'm new to Javascript - any help would be appreciated.

<script src="https://www.paypal.com/sdk/js?client-id=xx&currency=USD&intent=capture"></script>
<script>
  var num
  var apr
  var ssk
  const paypalButtonsComponent = paypal.Buttons({
    // optional styling for buttons
    // https://developer.paypal.com/docs/checkout/standard/customize/buttons-style-guide/
    style: {
      color: "gold",
      shape: "rect",
      layout: "vertical"
    },

    // set up the transaction
    createOrder: (data, actions) => {
      // pass in any options from the v2 orders create call:
      // https://developer.paypal.com/api/orders/v2/#orders-create-request-body
      num = document.getElementById("MyAmount").textContent;
      ssk = document.getElementById("WhyDonate").textContent;
      const createOrderPayload = {
        purchase_units: [{
          description: {
            value: ssk
          },
          amount: {
            value: num
          },
        }],
        items: [{
          name: "Dues Or Donation",
          unit_amount: {
            currency_code: 'USD',
            value: num,
          },
          quantity: "1"
        }]
      };
      return actions.order.create(createOrderPayload);
    },

    // finalize the transaction
    onApprove: (data, actions) => {
      const captureOrderHandler = (details) => {
        const payerName = details.payer.name.given_name;
        document.getElementById("MyAmount").textContent = apr;
        document.getElementById('<%=ClearSession.ClientID %>').click();
      };
      return actions.order.capture().then(captureOrderHandler);
      console.log(Details);
    },

    // handle unrecoverable errors
    onError: (err) => {
      console.log('An error prevented the buyer from checking out with PayPal');
      // alert('An error prevented the buyer from checking out with PayPal');
    }
  });

  paypalButtonsComponent
    .render("#paypal-button-container")
    .catch((err) => {
      console.log('PayPal Buttons failed to render');
    });
</script>

Answer 1

actions.order.create and .capture are deprecated and should not be used for any new integration; support will be sunset and removed in the future.

Instead, create and capture the order from a backend (not browser JS) -- and fetch to those routes from the JS you have.

See the standard integration guide for details and an example. That example uses node.js for its backend but of course those backend routes can be implemented in any environment/language; whatever you're using for your server.