Description or Note for Web Payments SDK card payments

Questions
1

I am trying to make a simple card payment form on my site. I am able to make the card payment in the sandbox environment, but I don’t see anyway to add a note or description to show what the payment is for. The only variables I see that I can set are amount and customerID. Is there a way to give a custom description or note or to attach line items to a card payment so that they would know in the dashboard what the payment was for?

Here is my code currently:


  <head>
    <link href="/app.css" rel="stylesheet" />
    <script
      type="text/javascript"
      src="https://sandbox.web.squarecdn.com/v1/square.js"
    ></script>
    <script>
      const appId = '<ApplicationID>';
      const locationId = '<LocationID>';

      async function initializeCard(payments) {
        const card = await payments.card();
        await card.attach('#card-container');

        return card;
      }

       async function createPayment(token, amount, customerID) {
        const body = JSON.stringify({
          locationId,
          sourceId: token,
          amount: amount,
          customerId: customerID,
        });

        const paymentResponse = await fetch('/payment', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body,
        });

        if (paymentResponse.ok) {
          return paymentResponse.json();
        }

        const errorBody = await paymentResponse.text();
        throw new Error(errorBody);
      }

      async function tokenize(paymentMethod) {
        const tokenResult = await paymentMethod.tokenize();
        if (tokenResult.status === 'OK') {
          return tokenResult.token;
        } else {
          let errorMessage = `Tokenization failed with status: ${tokenResult.status}`;
          if (tokenResult.errors) {
            errorMessage += ` and errors: ${JSON.stringify(
              tokenResult.errors
            )}`;
          }

          throw new Error(errorMessage);
        }
      }

      // status is either SUCCESS or FAILURE;
      function displayPaymentResults(status) {
        const statusContainer = document.getElementById(
          'payment-status-container'
        );
        if (status === 'SUCCESS') {
          statusContainer.classList.remove('is-failure');
          statusContainer.classList.add('is-success');
        } else {
          statusContainer.classList.remove('is-success');
          statusContainer.classList.add('is-failure');
        }

        statusContainer.style.visibility = 'visible';
      }

      document.addEventListener('DOMContentLoaded', async function () {
        if (!window.Square) {
          throw new Error('Square.js failed to load properly');
        }

        let payments;
        try {
          payments = window.Square.payments(appId, locationId);
        } catch {
          const statusContainer = document.getElementById(
            'payment-status-container'
          );
          statusContainer.className = 'missing-credentials';
          statusContainer.style.visibility = 'visible';
          return;
        }

        let card;
        try {
          card = await initializeCard(payments);
        } catch (e) {
          console.error('Initializing Card failed', e);
          return;
        }

        // Checkpoint 2.
          async function handlePaymentMethodSubmission(event, paymentMethod) {

              var amount;
              var customerID;
              amount = (parseFloat(document.getElementById("inpAmount").value).toFixed(2) * 100) * (1 + 0.03);
              customerID = document.getElementById("inpName").value;
              customerID = customerID.replace(/\s/g, '')

              event.preventDefault();

              try {
                // disable the submit button as we await tokenization and make a payment request.
                cardButton.disabled = true;
                const token = await tokenize(paymentMethod);
                  const paymentResults = await createPayment(token, amount, customerID);
                displayPaymentResults('SUCCESS');

                console.debug('Payment Success', paymentResults);
              } catch (e) {
                cardButton.disabled = false;
                displayPaymentResults('FAILURE');
                console.error(e.message);
              }
        }

        const cardButton = document.getElementById('card-button');
        cardButton.addEventListener('click', async function (event) {
          await handlePaymentMethodSubmission(event, card);
        });
      });
    </script>
  </head>
  <body>
    <form id="payment-form">
      <div id="card-container"></div>
        Amount<br />
        <input type="text" id="inpAmount" />
        Name<br />
        <input type="text" id="inpName" />
      <button id="card-button" type="button">Pay Now</button>
    </form>
    <div id="payment-status-container"></div>
  </body>
2

:wave: With the Orders API, you can build web and mobile applications to take orders and capture itemization details about purchases — then send them to the Square app, online Dashboard, Restaurants app, or Square Register, once they are charged.

The Orders API captures itemization details about purchases and can track additional information and requirements necessary to fulfill an Order that can be linked to a Square payment. Orders can be built from catalog items to simplify maintenance and reporting, or they can be built from ad-hoc line items defined at the time of Order creation. Additionally, Orders API allows you to track itemized refunds so you can easily reconcile your reporting and inventory. .

To start building a customized solution to accept Orders (online or in-app), manage products and customers, and handle the day-to-day operations that keeps business running, visit our Developer Doc. :slightly_smiling_face:

3

That is a lot of functionality that I don’t need, but I guess I can start over with the Orders API. Is there really no way to make any identifying information using the Web Payments SDK so that if they view a payment in their dashboard they can see who it was from or what it was for? All they can see is that someone paid them X$?

4 
"customer_id": "somestring",
  "verification_token": "string",
  "buyer_email_address": "string",
  "note": "string"

You can add note at the same level where customer_id is and that will appear as title in the dashboard.