Implement a Checkout page

[dartandrevinsky]

A reference UI sketch is this:

[cer]

checkout or the following page needs to handle credit cards in a simple way.

• User has zero or more credit card associated with their account
• During checkout user can select an existing credit card or enter a new one (which is added to the list)

I'd like the UI to work as if it was written using Stripe (without actually using Stripe). e.g passing around payment methods and payment intents etc.

[dartandrevinsky]

[cer]

Seems reasonable.

Initially: I'd leave out all the buttons etc for editing the order in anyway.

[dartandrevinsky]

[dartandrevinsky]

Stripe elements and everything Stripe has been removed (replaced with a custom-made inputs):

[dartandrevinsky]

Several card numbers are hinted in the fake payment form:

1. Successful payment

2. Authentication required (not implemented down to invoking a new modal, i.e. 3ds modal, but throwing time-based dice to decide if it's an error or success):

3. Error in the payment:

[cer]

Seems fine. But I wouldn't bother with authentication required case.

[dartandrevinsky]

Seems fine. But I wouldn't bother with authentication required case.

As you can tell from looking at its implementation, it was nothing serious. It's like 3 lines of code. The values for the cards - I took it from the Stripe documentation. Realized it may help in manual testing.