How Checkout flow is implemented now (mimicking the Stripe flow)

[dartandrevinsky]

Below is the documentation of how the Stripe flow works for simple purchases and how/what we need to do in order to mimic it.

I discovered a diagram that perfectly describes how the communication with Stripe is going on. Please take a look at the Section 4 (Create PaymentIntent) with a nice flow diagram in it.

1. The Client. Checkout Page, once loaded, needs to communicate to the server API in order to obtain an object created from a server-side, secure, call to Stripe, called Payment Intent. This needs to be done before anything is rendered. The purpose of generating a payment intent - is to receive a property called ’client_secret’. This property is sort of a first part of the payment negotiation. This client secret is kept until the user fills out the payment detail form and submits the data.

1.1. The client requests the server API (e.g. POST /create-payment-intent) with the items (ids and counts) to be purchased.
1.2. The server is responsible to calculate the resulting total amount (or delegate it to Stripe) and to request a one-time payment intent for this amount. The request is signed by a Stripe Secret Key.
1.3. The server receives the Payment Intent object from Stripe and sends it down to the Client.
1.4. The Client stores the clientSecret property.

2. User. Fills out the payment form and submits the payment. (Presses ‘Pay’).

3. The Client via Client Stripe API, creates a payment using the stored previously client secret and also using the Stripe Public Key.

4. Based on the result of the previous step, the Client either shows the error or registers success and switches to ’Success Page’.

—

As the initial step, I took the Stripe Integration builder (from https://stripe.com/docs/payments/integration-builder) and set things to React + Node - and was able to take all the Stripe functionality to our app.

Secondly, I replaced all client code related to Stripe with the fakes/simple UI form - they follow the Stripe examples closely though.

Also, on the client-side, I replaced a call to a client Stripe API (stripe.confirmCardPayment(clientSecret, …card) ) with a dummy method which reacts on the card numbers and generates responses.

On the server-side,
I set up a server endpoint (POST /payment/intent, body: { items }). (Optionally: receive the items double-check them with the user’s cart stored on the server.) Then, the server calculates the total amount.
1.1. Create endpoint - done
1.2. The server calculates the total amount - presently, works with a sample amount ($14.00). - WIP
1.3. Generate a payment intent object and respond with it.