Menu payment

[bobbiec]

• On checkout click:
  • create a new transaction for the current cart
  • redirect to the Credit API page
  • disable the checkout button
• Poll the Credit API every second and update the status when it resolves

I actually wasn't sure of how to get a transaction approved (aka, what I need to fill out on the web form), but I confirmed that it works for denying.

[ykotturi]

I pulled this and tested locally - looks good! LMK when you're ready to merge (if you'd like to implement any of the comments, remove console.logs, etc)

[bobbiec]

Addressed the style fixes, thanks.

I disagree with your comments. I feel like the first two don't really add anything, while the third and fourth show a misunderstanding of how the code flows.

I would read this code (and UI code in general) not from top-to-bottom, but from interaction to result. So in the Cart, the Check Out button has an onClick handler payForCart (inline below).

    return async () => {
      // create a new transaction
      const response = await createTransaction(totalPrice) as any;
      const newTransaction = createTransactionResponse.validate(response);
      if (newTransaction.error) {
        alert(newTransaction.error);
        return;
      }

      // open a new window for customer to complete the payment
      const transactionId = newTransaction.value.id;
      const getTransactionUrl = `http://credit.17-356.isri.cmu.edu/?transaction_id=${transactionId}`
      var win = window.open(getTransactionUrl, '_blank');
      if (win === null) {
        return;
      }

      // start polling to monitor status
      this.startTransactionPolling(transactionId);

      // switch focus to the new tab
      win.focus();
    }
  }

I think the comments in this function give a fairly high-level overview of what happens:

1. A new Transaction is created in the Credit API
2. A new window is opened for the customer to pay
3. Start polling to monitor the status of the transaction

From there, startTransactionPolling calls checkTransactionStatus, which checks the status, validates it, and stops the polling once the transaction resolves to a finished state.

[ykotturi]

Super helpful, thank you! I really like that distinction for how to read UI code and non UI code ; In the few formal programming classes I've taken, that has not come up. However the process of understanding where the interaction in the code first starts seems non-trivial...