Stripe Checkout Package

[brandonw504]

Create a Node package that our client teams can import to handle payments with Stripe. This package should export:

• a customizable payment form component (takes in styles as an argument)
  • allow devs to just choose from a few different styles
  • payment on the left
    • credit card info, billing address, etc.
    • add a checkbox for if billing address is the same as shipping address
    • https://osume.com has a great checkout page for reference
  • order summary on the right (takes in a list of product IDs from local storage)
    • order summary shows a list of products and the cart total with estimated tax (based on current location just in the checkout page, the actual calculation should be done later by Stripe Tax) and a flat shipping rate
    • flat shipping rate is fetched from the StoreDetails table (will create this and provide the interface)

Payment Flow:

1. User navigates to the checkout page.
2. The estimated cart total with a flat shipping rate (fetched from the StoreDetails table) is displayed on the order summary.
3. User inputs billing address, credit card info, etc. and clicks submit.
4. Client sends the cart (a list of product IDs and their quantities taken from local storage) and non-sensitive user info (name, email, billing address, NOT credit card info) to the ProcessOrder endpoint on the Estore Manager (the server).
5. ProcessOrder calculates the cart total, creates a new Order in the database with the status "pending payment", and creates a PaymentIntent with the Order's ID in the metadata, so Stripe now knows how much money to expect from the purchase. Then, update the Order to also contain the PaymentIntent's ID as a field.
6. ProcessOrder returns the client_secret of the PaymentIntent to the client.
7. Use stripe.confirmCardPayment (or another function, if appropriate) with the client secret to send the credit card info directly to Stripe.
8. Upon success, call the UpdateOrder endpoint to change the order's status to "payment processed" on the Estore Manager, then redirect the user to an order confirmation page with their confirmation number.
9. Also upon successful payment, Stripe has a webhook that will send a POST request to an endpoint we define in the dashboard (something like /webhook or /stripe-webhook). This can serve as a failsafe in case the client doesn't call UpdateOrder for some reason. This endpoint will just be like any other endpoint, waiting for Stripe to call it, and run UpdateOrder if it's called.

I'll help you guys create ProcessOrder, and we'll have a concrete API interface from there.

For getting product prices:

The Estore Manager base URL will be stored as an environment variable in the client project that imports this package, so when running your API fetch calls you can just append the path to the base URL. The Stripe Webhook key will also be stored as an environment variable in the client project. I believe that you can essentially treat the environment variables as existing in the package itself (so you shouldn't need to do anything special besides just using process.env.ENV_VAR) since the client project is basically just importing the package's code. However, I'm not completely sure about this so we'll need to look into it.